:root {
  color-scheme: light;
  --bg: #f4f5f1;
  --surface: #ffffff;
  --surface-soft: #f8f9f6;
  --surface-raised: #ffffff;
  --ink: #18211b;
  --ink-soft: #5f6962;
  --ink-faint: #8c958e;
  --line: #dfe4de;
  --line-strong: #ccd4cc;
  --green: #185b42;
  --green-2: #257555;
  --green-soft: #e8f1ec;
  --lime: #dff277;
  --brand-blue: #155b8d;
  --brand-blue-2: #2477ad;
  --brand-blue-on-dark: #58a6d5;
  --accent-contrast: #ffffff;
  --accent-ink: #173a29;
  --sidebar: #122a20;
  --sidebar-text: #b9c7bf;
  --sidebar-muted: #8ea398;
  --sidebar-border: rgba(255,255,255,.09);
  --sidebar-hover: rgba(255,255,255,.06);
  --sidebar-active: rgba(223,242,119,.13);
  --field: #ffffff;
  --table-head: #f5f7f4;
  --soft-decor: #f0f2ee;
  --privacy-bg: #edf6f0;
  --privacy-line: #d4e5d9;
  --info-bg: #eaf2f7;
  --info-ink: #365b6f;
  --info-chip: #cfe0ea;
  --warning: #fff7db;
  --warning-ink: #7d5a13;
  --warning-chip: #efd58e;
  --danger: #a23f3f;
  --shadow: 0 18px 50px rgba(35, 49, 40, 0.08);
  --radius: 18px;
  --font: "DM Sans", "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-label: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --title-sm: 18px;
  --title-md: 22px;
  --title-lg: 28px;
  --title-mobile: 24px;
  --metric-size: 26px;
  --line-body: 1.55;
  --control-height: 36px;
  --control-radius: 9px;
  --control-height-compact: 32px;
  --control-radius-compact: 8px;
  --control-height-micro: 26px;
  --control-radius-micro: 6px;
  --motion-fast: 150ms;
  --motion-base: 220ms;
  --motion-slow: 300ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-ease-soft: cubic-bezier(.4, 0, .2, 1);
  interpolate-size: allow-keywords;
}

:root[data-font-size="small"] {
  --text-xs: 10px; --text-sm: 11px; --text-label: 12px; --text-md: 13px; --text-lg: 15px;
  --title-sm: 17px; --title-md: 20px; --title-lg: 26px; --title-mobile: 22px; --metric-size: 24px;
}
:root[data-font-size="large"] {
  --text-xs: 12px; --text-sm: 13px; --text-label: 14px; --text-md: 15px; --text-lg: 17px;
  --title-sm: 19px; --title-md: 23px; --title-lg: 29px; --title-mobile: 25px; --metric-size: 28px;
}
:root[data-font-size="xlarge"] {
  --text-xs: 13px; --text-sm: 14px; --text-label: 15px; --text-md: 16px; --text-lg: 18px;
  --title-sm: 20px; --title-md: 24px; --title-lg: 30px; --title-mobile: 26px; --metric-size: 30px;
}

@media (max-width: 820px) {
  .ai-settings-compact-overview { grid-template-columns: 1fr; }
  .ai-settings-entry-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .ai-task-policy-row { grid-template-columns: minmax(0, 1fr) minmax(140px, .8fr); }
  .ai-task-policy-row > div { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .ai-settings-current-model { grid-template-columns: 38px minmax(0, 1fr); }
  .ai-settings-preference-summary { grid-column: 1 / -1; justify-content: flex-start; }
  .ai-settings-entry-grid, .ai-task-policy-row { grid-template-columns: 1fr; }
  .ai-task-policy-row > div { grid-column: auto; }
  .ai-usage-pagination { justify-content: space-between; }
}

:root[data-appearance="ocean"] {
  --green: #155b8d; --green-2: #2477ad; --green-soft: #e6f0f7; --lime: #8dd8ff;
  --accent-ink: #12374d; --sidebar: #102838; --sidebar-text: #b8c9d3; --sidebar-muted: #8ba2af;
  --sidebar-active: rgba(141,216,255,.14); --privacy-bg: #edf5fa; --privacy-line: #d2e5f0;
}
:root[data-appearance="violet"] {
  --green: #6447a8; --green-2: #8062c5; --green-soft: #efeafa; --lime: #cdb5ff;
  --accent-ink: #342559; --sidebar: #251d38; --sidebar-text: #cbc2d8; --sidebar-muted: #9e91ae;
  --sidebar-active: rgba(205,181,255,.14); --privacy-bg: #f4f0fa; --privacy-line: #e3d9f3;
}
:root[data-appearance="sunset"] {
  --green: #a44d2b; --green-2: #c46842; --green-soft: #f9ebe4; --lime: #ffbf85;
  --accent-ink: #5c2d1d; --sidebar: #38231d; --sidebar-text: #d5c3bb; --sidebar-muted: #ab8f83;
  --sidebar-active: rgba(255,191,133,.14); --privacy-bg: #fbf1ec; --privacy-line: #efdcd2;
}
:root[data-appearance="graphite"] {
  --green: #454c53; --green-2: #68727c; --green-soft: #eceff1; --lime: #cfd5da;
  --accent-ink: #252a2e; --sidebar: #202428; --sidebar-text: #c4c9cd; --sidebar-muted: #929aa0;
  --sidebar-active: rgba(207,213,218,.13); --privacy-bg: #f0f2f3; --privacy-line: #dce1e4;
}

:root[data-resolved-theme="dark"] {
  color-scheme: dark;
  --bg: #101412;
  --surface: #171c19;
  --surface-soft: #1c221e;
  --surface-raised: #212722;
  --ink: #eef2ef;
  --ink-soft: #aab3ad;
  --ink-faint: #7f8a83;
  --line: #303832;
  --line-strong: #414b44;
  --green-soft: color-mix(in srgb, var(--green-2) 22%, #171c19);
  --accent-contrast: #ffffff;
  --field: #141916;
  --table-head: #1c221e;
  --soft-decor: #252c27;
  --privacy-bg: color-mix(in srgb, var(--green) 17%, #171c19);
  --privacy-line: color-mix(in srgb, var(--green-2) 36%, #303832);
  --info-bg: #182832;
  --info-ink: #b5d5e5;
  --info-chip: #284454;
  --warning: #342c18;
  --warning-ink: #ead394;
  --warning-chip: #59491f;
  --danger: #e18888;
  --shadow: 0 20px 55px rgba(0,0,0,.28);
}

:root[data-resolved-theme="dark"][data-appearance="forest"] { --green: #2d795a; --green-2: #55a37d; --lime: #dff277; }
:root[data-resolved-theme="dark"][data-appearance="ocean"] { --green: #2776a8; --green-2: #58a6d5; --lime: #8dd8ff; }
:root[data-resolved-theme="dark"][data-appearance="violet"] { --green: #7357b5; --green-2: #a188db; --lime: #cdb5ff; }
:root[data-resolved-theme="dark"][data-appearance="sunset"] { --green: #ad5b39; --green-2: #db8a64; --lime: #ffbf85; }
:root[data-resolved-theme="dark"][data-appearance="graphite"] { --green: #59636c; --green-2: #89949d; --lime: #cfd5da; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--text-md); line-height: var(--line-body); transition: background-color .22s ease, color .22s ease; }
.auth-checking .app-shell, .auth-checking .auth-gate, .auth-checking .ai-launcher, .auth-checking .back-to-top { display: none; }
.auth-pending .app-shell { display: none; }
.auth-pending .ai-launcher, .auth-pending .back-to-top { display: none; }
.auth-ready .auth-gate { display: none; }
.auth-session-splash { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--ink-faint); background: var(--bg); font-size: var(--text-xs); }
.auth-session-splash .brand-mark { width: 38px; height: 38px; display: grid; place-items: center; color: var(--brand-blue); animation: authSessionPulse 1.15s ease-in-out infinite alternate; }
.auth-session-splash .brand-icon { width: 34px; height: 34px; }
.auth-pending .auth-session-splash, .auth-ready .auth-session-splash { display: none; }
@keyframes authSessionPulse { from { opacity: .48; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.auth-gate { position: relative; isolation: isolate; min-height: 100vh; display: grid; place-items: center; overflow: hidden; padding: 28px; color: #edf4ff; background-color: #070b16; background-image: linear-gradient(rgba(136,170,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(136,170,255,.022) 1px, transparent 1px), radial-gradient(circle at 18% 12%, rgba(34,102,160,.25), transparent 38%), radial-gradient(circle at 84% 78%, rgba(77,57,145,.21), transparent 42%), radial-gradient(circle at 12% 86%, rgba(128,59,103,.17), transparent 36%), radial-gradient(circle at 70% 14%, rgba(96,77,166,.16), transparent 34%), linear-gradient(135deg, #070b16 0%, #0a1626 38%, #121326 67%, #15101f 82%, #081b21 100%); background-size: 46px 46px, 46px 46px, 125% 125%, 135% 135%, 145% 145%, 130% 130%, 180% 180%; background-position: 0 0, 0 0, 0% 0%, 100% 100%, 0% 100%, 72% 0%, 0% 50%; animation: authBackdropDrift 20s ease-in-out infinite alternate; }
.auth-gate::before, .auth-gate::after { position: absolute; z-index: -1; width: 520px; height: 520px; border-radius: 50%; filter: blur(90px); content: ""; pointer-events: none; }
.auth-gate::before { top: -210px; right: -130px; background: linear-gradient(145deg, rgba(35,99,185,.23), rgba(32,116,137,.15)); animation: authGlowOne 17s ease-in-out infinite alternate; }
.auth-gate::after { bottom: -260px; left: -150px; background: linear-gradient(145deg, rgba(71,58,139,.21), rgba(24,105,121,.14)); animation: authGlowTwo 22s ease-in-out infinite alternate; }
.auth-grid-wave { position: absolute; z-index: 0; inset: 0; overflow: hidden; background-image: linear-gradient(rgba(143,178,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(143,178,255,.03) 1px, transparent 1px); background-position: 0 0; background-size: 46px 46px; opacity: .34; animation: authGridBaseBreath 9s ease-in-out infinite alternate; pointer-events: none; will-change: opacity; }
.auth-grid-wave::before, .auth-grid-wave::after { position: absolute; inset: 0; content: ""; pointer-events: none; }
.auth-grid-wave::before { background-image: linear-gradient(rgba(169,196,255,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(169,196,255,.11) 1px, transparent 1px); background-position: 0 0; background-size: 46px 46px; opacity: .38; -webkit-mask-image: linear-gradient(105deg, transparent 24%, #000 43%, rgba(0,0,0,.88) 49%, transparent 67%); mask-image: linear-gradient(105deg, transparent 24%, #000 43%, rgba(0,0,0,.88) 49%, transparent 67%); -webkit-mask-position: -70vw 0; mask-position: -70vw 0; -webkit-mask-size: 210vw 100%; mask-size: 210vw 100%; animation: authGridHighlightSweep 14s ease-in-out infinite alternate; }
.auth-grid-wave::after { background-image: linear-gradient(rgba(142,178,250,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(142,178,250,.09) 1px, transparent 1px); background-position: 0 0; background-size: 46px 46px; opacity: .14; -webkit-mask-image: radial-gradient(circle at 18% 28%, #000 0%, transparent 12%), radial-gradient(circle at 76% 34%, #000 0%, transparent 10%), radial-gradient(circle at 64% 78%, #000 0%, transparent 13%); mask-image: radial-gradient(circle at 18% 28%, #000 0%, transparent 12%), radial-gradient(circle at 76% 34%, #000 0%, transparent 10%), radial-gradient(circle at 64% 78%, #000 0%, transparent 13%); animation: authGridHighlightPulse 7.5s ease-in-out infinite alternate; }
.auth-card { position: relative; z-index: 2; width: min(400px, 100%); padding: 38px 36px 30px; border: 1px solid rgba(255,255,255,.7); border-radius: 20px; background: rgba(248,250,255,.95); box-shadow: 0 30px 90px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.auth-brand { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; margin-bottom: 26px; text-align: center; }
.auth-brand .brand-mark { width: 82px; height: 82px; display: grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: 24px; background: color-mix(in srgb, var(--brand-blue) 7%, transparent); color: var(--brand-blue); line-height: 0; box-shadow: 0 12px 28px rgba(33,84,137,.08); transition: transform .24s cubic-bezier(.22, 1, .36, 1), background-color .2s ease, box-shadow .24s ease, filter .24s ease; }
.auth-brand .brand-mark .brand-icon { width: 66px; height: 66px; display: block; margin: 0; transform: none; }
.auth-brand:hover .brand-mark { background: color-mix(in srgb, var(--brand-blue) 11%, transparent); box-shadow: 0 17px 34px rgba(33,84,137,.16); filter: saturate(1.08); transform: translateY(-4px) rotate(-3deg) scale(1.04); }
.auth-brand:active .brand-mark { transform: translateY(-1px) rotate(0) scale(.99); }
.auth-brand strong, .auth-brand > div > span { display: block; }
.auth-brand strong { color: #17233b; font-size: 20px; line-height: 1.1; letter-spacing: -.025em; transition: color .2s ease; }
.auth-brand:hover strong { color: #315d96; }
.auth-brand > div > span { margin-top: 7px; color: #718098; font-size: 12px; line-height: 1.35; }
.auth-copy { text-align: center; }
.auth-card[data-auth-mode="login"] .auth-copy { display: none; }
.auth-copy h1 { color: #111d34; font-size: 27px; letter-spacing: -.035em; }
.auth-copy > p { margin: 8px 0 0; color: #718098; font-size: var(--text-sm); }
.auth-form { display: grid; gap: 15px; margin-top: 28px; }
.auth-card[data-auth-mode="login"] .auth-form { margin-top: 30px; }
.auth-card[data-auth-mode="login"] .auth-name-field { display: none; }
.auth-form .field { gap: 8px; }
.auth-form .field > span { color: #4f5e76; font-size: 12px; font-weight: 600; }
.auth-form input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid #d8e1ef; border-radius: 11px; background: #f1f4f9; color: #17233b; outline: none; }
.auth-form input::placeholder { color: #97a2b5; }
.auth-form input:focus { border-color: rgba(72,132,244,.82); background: #fff; box-shadow: 0 0 0 4px rgba(50,113,239,.12); }
.auth-remember { width: max-content; display: inline-flex; align-items: center; gap: 8px; margin: -1px 0 -2px; color: #60708a; font-size: 12px; line-height: 1.2; cursor: pointer; user-select: none; }
.auth-remember input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.auth-remember > span { width: 17px; height: 17px; display: grid; place-items: center; flex: none; border: 1px solid #c6d2e4; border-radius: 5px; background: #f5f7fb; box-shadow: inset 0 1px 1px rgba(36,61,96,.04); transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease; }
.auth-remember > span::after { width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; content: ""; opacity: 0; transform: translateY(-1px) rotate(-45deg) scale(.7); transition: opacity .14s ease, transform .16s ease; }
.auth-remember strong { font-weight: 550; }
.auth-remember:hover > span { border-color: #8ea6cf; background: #fff; }
.auth-remember input:checked + span { border-color: #6476bd; background: linear-gradient(135deg, #5d83c2, #6f69b8); box-shadow: 0 3px 8px rgba(79,94,170,.2); }
.auth-remember input:checked + span::after { opacity: 1; transform: translateY(-1px) rotate(-45deg) scale(1); }
.auth-remember input:focus-visible + span { outline: 3px solid rgba(86,113,190,.18); outline-offset: 2px; }
.auth-card[data-auth-mode="register"] .auth-remember { display: none; }
body.auth-pending .auth-submit.button.primary { width: 100%; min-height: 43px; margin-top: 1px; border-radius: 9px; border-color: transparent; background: linear-gradient(135deg, #527fbe, #6966b5); color: #fff; font-size: 13px; font-weight: 650; box-shadow: 0 7px 18px rgba(73,91,166,.2); }
body.auth-pending .auth-submit.button.primary:hover { background: linear-gradient(135deg, #618dcc, #7773c3); box-shadow: 0 10px 22px rgba(73,91,166,.27); }
body.auth-pending .auth-submit.button.primary:active { background: linear-gradient(135deg, #4d77b2, #625faa); box-shadow: 0 4px 12px rgba(73,91,166,.2); }
.auth-error { min-height: 17px; margin: -3px 0; color: var(--danger); font-size: var(--text-xs); text-align: center; }
.auth-error:empty { min-height: 0; }
.auth-switch { width: 100%; margin-top: 14px; padding: 6px; border: 0; background: transparent; color: #72a3ff; font: inherit; font-size: 12px; cursor: pointer; }
.auth-switch:hover { color: #a4c2ff; }
.auth-privacy { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; }
.auth-privacy .status-dot { width: 6px; height: 6px; margin-top: 0; background: #5d91f2; box-shadow: 0 0 0 3px rgba(75,137,255,.1); }
.auth-privacy p { margin: 0; color: #8792a5; font-size: 11px; line-height: 1.4; }
@keyframes authGlowOne {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .75; }
  to { transform: translate3d(-116px, 118px, 0) scale(1.14); opacity: 1; }
}
@keyframes authGlowTwo {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .72; }
  to { transform: translate3d(124px, -96px, 0) scale(1.13); opacity: .98; }
}
@keyframes authBackdropDrift {
  from { background-position: 0 0, 0 0, 0% 0%, 100% 100%, 0% 100%, 72% 0%, 0% 50%; }
  to { background-position: 0 0, 0 0, 32% 22%, 66% 72%, 26% 66%, 44% 24%, 100% 50%; }
}
@keyframes authGridBaseBreath { from { opacity: .16; } to { opacity: .4; } }
@keyframes authGridHighlightSweep {
  from { opacity: .08; -webkit-mask-position: -70vw 0; mask-position: -70vw 0; }
  48% { opacity: .55; }
  to { opacity: .16; -webkit-mask-position: 18vw 0; mask-position: 18vw 0; }
}
@keyframes authGridHighlightPulse { from { opacity: .04; } to { opacity: .38; } }
@media (prefers-reduced-motion: reduce) {
  .auth-gate, .auth-gate::before, .auth-gate::after, .auth-grid-wave, .auth-grid-wave::before, .auth-grid-wave::after { animation: none; }
  .auth-grid-wave { opacity: .34; }
  .auth-brand .brand-mark { transition: none; }
  .auth-brand:hover .brand-mark, .auth-brand:active .brand-mark { transform: none; }
  .brand-mark { animation: none; }
  .brand:hover, .brand:active, .brand:hover .brand-mark, .brand:hover > div { transform: none; }
}
@media (max-width: 560px) {
  .auth-gate { align-items: start; padding: 52px 18px 24px; }
  .auth-card { padding: 32px 24px 26px; border-radius: 18px; }
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-icon, .button-icon, .empty-icon, .selection-check { display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ui-icon { width: 18px; height: 18px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.button-icon { width: 14px; height: 14px; stroke-width: 1.6; flex: none; }
.empty-icon { width: 30px; height: 30px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 224px minmax(0, 1fr); transition: grid-template-columns .26s cubic-bezier(.2, .8, .2, 1); }
.sidebar { position: sticky; top: 0; z-index: 20; height: 100vh; display: flex; flex-direction: column; padding: 22px 13px 17px; background: var(--sidebar); color: #fff; box-shadow: 1px 0 0 var(--sidebar-border); transition: padding .26s cubic-bezier(.2, .8, .2, 1), background-color .22s ease; }
.sidebar-brand-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 9px 24px; transition: gap .26s cubic-bezier(.2, .8, .2, 1), padding .26s cubic-bezier(.2, .8, .2, 1); }
body.sidebar-transitioning .sidebar { pointer-events: none; }
.brand { appearance: none; min-width: 0; flex: 1; border: 0; display: flex; align-items: center; gap: 11px; margin: -6px -4px -6px -8px; padding: 6px 12px 6px 8px; border-radius: 12px; background: linear-gradient(105deg, rgba(77,157,207,.13), rgba(112,95,190,.08), transparent 68%); background-position: 100% 50%; background-size: 220% 100%; color: #fff; text-align: left; cursor: pointer; transition: width .26s cubic-bezier(.2, .8, .2, 1), height .26s cubic-bezier(.2, .8, .2, 1), margin .26s cubic-bezier(.2, .8, .2, 1), padding .26s cubic-bezier(.2, .8, .2, 1), gap .26s cubic-bezier(.2, .8, .2, 1), background-position .32s ease, box-shadow .24s ease, transform .22s ease; }
.brand:hover { background-position: 0 50%; box-shadow: inset 0 0 0 1px rgba(130,192,226,.09), 0 8px 20px rgba(4,14,24,.1); transform: translateY(-1px); }
.brand:active { box-shadow: inset 0 0 0 1px rgba(130,192,226,.12); transform: translateY(0) scale(.985); }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 0; background: transparent; color: var(--brand-blue-on-dark); filter: drop-shadow(0 4px 10px rgba(53,141,196,.12)); box-shadow: none; animation: sidebarBrandTone 100s ease-in-out infinite; transition: width .26s cubic-bezier(.2, .8, .2, 1), height .26s cubic-bezier(.2, .8, .2, 1), filter .24s ease, transform .26s cubic-bezier(.22, 1, .36, 1); }
.brand-mark .brand-icon { width: 34px; height: 34px; display: block; flex: none; background: currentColor; -webkit-mask: url("/assets/brand/reachflow-mark.svg") center / contain no-repeat; mask: url("/assets/brand/reachflow-mark.svg") center / contain no-repeat; }
.brand:hover .brand-mark { filter: drop-shadow(0 7px 14px rgba(89,184,222,.25)) saturate(1.12); transform: translateY(-2px) rotate(-4deg) scale(1.055); }
.brand > div { line-height: 1.12; transition: transform .24s cubic-bezier(.22, 1, .36, 1); }
.brand:hover > div { transform: translateX(2px); }
.brand strong { display: block; font-size: var(--text-lg); line-height: 1.12; letter-spacing: -.02em; transition: color .22s ease; }
.brand:hover strong { color: #f2fbff; }
.brand > div > span { display: block; margin-top: 3px; color: var(--sidebar-muted); font-size: var(--text-xs); line-height: 1.12; white-space: nowrap; }
@keyframes sidebarBrandTone {
  0%, 100% { color: #58a6d5; }
  18% { color: #63bec8; }
  38% { color: #74b7df; }
  58% { color: #839fd5; }
  78% { color: #9a91cd; }
  90% { color: #70b8cc; }
}
.sidebar-campaigns { min-height: 0; display: flex; flex: 1; flex-direction: column; }
.landscape-nav-item { flex: none; margin: 0 2px 6px; padding: 10px; border: 1px solid var(--sidebar-border); background: rgba(255,255,255,.035); }
.landscape-nav-item:hover { border-color: color-mix(in srgb, var(--lime) 18%, var(--sidebar-border)); }
.landscape-nav-item.active { border-color: color-mix(in srgb, var(--lime) 28%, var(--sidebar-border)); }
.mail-nav-item { margin-top: 0; }
.company-library-nav-item { margin-bottom: 13px; }
.landscape-nav-copy { min-width: 0; flex: 1; }
.landscape-nav-copy strong, .landscape-nav-copy small { display: block; }
.landscape-nav-copy strong { font-size: var(--text-label); }
.landscape-nav-copy small { margin-top: 2px; color: var(--sidebar-muted); font-size: var(--text-xs); }
.sidebar-create-button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: var(--control-radius-compact); background: transparent; color: var(--sidebar-muted); opacity: .55; cursor: pointer; flex: none; transition: opacity .16s ease, color .16s ease, background-color .16s ease; }
.sidebar-create-button:hover, .sidebar-create-button:focus-visible { opacity: 1; }
.sidebar-create-button:hover, .sidebar-create-button:focus-visible { background: var(--sidebar-hover); color: #fff; outline: none; }
.sidebar-transitioning .sidebar-create-button, .sidebar-transitioning .sidebar-create-button:hover, .sidebar-transitioning .sidebar-create-button:focus-visible { background: transparent; color: var(--sidebar-muted); opacity: .55; pointer-events: none; }
.sidebar-create-button .ui-icon { width: 16px; height: 16px; }
.sidebar-collapse-toggle { position: absolute; z-index: 25; top: 143px; right: -29px; width: 29px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-left: 0; border-radius: 0 10px 10px 0; background: var(--surface-raised); color: var(--ink-faint); box-shadow: 5px 5px 14px rgba(10,24,17,.08); cursor: pointer; transition: width .18s ease, color .18s ease, background-color .18s ease; }
.sidebar-collapse-toggle:hover { width: 32px; color: var(--green-2); background: var(--surface-soft); }
.sidebar-collapse-toggle .ui-icon { width: 14px; height: 14px; stroke-width: 1.75; }
.sidebar-appearance-menu { position: absolute; z-index: 130; top: 38px; right: 8px; width: 144px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); color: var(--ink); box-shadow: 0 16px 38px rgba(8,18,13,.22); }
.sidebar-appearance-menu[hidden] { display: none; }
.sidebar-appearance-menu button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 9px; border: 0; border-radius: 7px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.sidebar-appearance-menu button:hover { background: var(--surface-soft); }
.sidebar-appearance-menu button.is-active { background: var(--green-soft); color: var(--green); font-weight: 700; }
.sidebar-appearance-menu button .ui-icon { width: 16px; height: 16px; }
.sidebar-list-heading { padding: 2px 10px 8px; color: var(--sidebar-muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.side-nav { display: grid; align-content: start; gap: 5px; min-height: 0; overflow-y: auto; padding-right: 2px; }
.nav-item { width: 100%; border: 0; background: transparent; color: var(--sidebar-text); display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 9px; cursor: pointer; text-align: left; transition: .2s ease; }
.nav-item:hover { color: #fff; background: var(--sidebar-hover); }
.nav-item.active { background: var(--sidebar-active); color: var(--lime); }
.nav-icon { width: 22px; height: 22px; display: grid; place-items: center; }
.nav-icon .ui-icon { width: 17px; height: 17px; }
.campaign-nav-row { position: relative; min-width: 0; }
.campaign-nav-item { min-height: 46px; padding: 7px 38px 7px 10px; }
.campaign-nav-copy { min-width: 0; flex: 1; }
.campaign-nav-monogram { width: 24px; height: 24px; display: grid; place-items: center; flex: none; overflow: hidden; border-radius: 7px; background: rgba(255,255,255,.06); color: inherit; font-size: 10px; font-weight: 700; transition: width .26s cubic-bezier(.2, .8, .2, 1), height .26s cubic-bezier(.2, .8, .2, 1), border-radius .2s ease; }
.campaign-nav-logo { width: 100%; height: 100%; display: block; object-fit: contain; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; background: #f3f5f2; }
.campaign-nav-logo-fallback { width: 100%; height: 100%; display: grid; place-items: center; }
.campaign-nav-logo-fallback[hidden] { display: none; }
.campaign-nav-copy strong, .campaign-nav-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-nav-copy strong { color: inherit; font-size: var(--text-label); font-weight: 600; }
.campaign-nav-copy small { margin-top: 2px; color: var(--sidebar-muted); font-size: var(--text-xs); }
.campaign-menu-trigger { position: absolute; top: 50%; right: 5px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--sidebar-muted); cursor: pointer; transform: translateY(-50%); }
.campaign-menu-trigger:hover, .campaign-menu-trigger[aria-expanded="true"] { background: rgba(255,255,255,.09); color: #fff; }
.campaign-menu-trigger .ui-icon { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.campaign-nav-item.active ~ .campaign-menu-trigger { color: var(--lime); }
.campaign-nav-row.is-archived { opacity: .78; }
.campaign-reorder-toolbar { position: sticky; z-index: 4; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; margin: 0 2px 2px 0; padding: 6px 6px 7px 9px; border: 1px solid rgba(126,205,230,.18); border-radius: 9px; background: color-mix(in srgb, var(--sidebar-bg) 92%, #fff 8%); box-shadow: 0 8px 18px rgba(4,18,28,.12); color: var(--sidebar-text); }
.campaign-reorder-toolbar span { min-width: 0; overflow: hidden; color: var(--sidebar-muted); font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.campaign-reorder-done { flex: none; padding: 5px 8px; border: 1px solid rgba(126,205,230,.2); border-radius: 7px; background: rgba(126,205,230,.1); color: var(--lime); font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; transition: background-color .16s ease, border-color .16s ease, transform .16s ease; }
.campaign-reorder-done:hover { border-color: rgba(126,205,230,.38); background: rgba(126,205,230,.18); transform: translateY(-1px); }
.campaign-reorder-handle { display: none; }
.side-nav.is-reordering { gap: 6px; overflow-x: hidden; }
.side-nav.is-reordering .campaign-nav-row { z-index: 1; cursor: grab; user-select: none; will-change: transform; }
.side-nav.is-reordering .campaign-nav-row:active { cursor: grabbing; }
.side-nav.is-reordering .campaign-nav-item { padding-right: 39px; pointer-events: none; transition: background-color .16s ease, color .16s ease, box-shadow .16s ease; }
.side-nav.is-reordering .campaign-nav-row:hover .campaign-nav-item { background: rgba(255,255,255,.055); box-shadow: inset 0 0 0 1px rgba(126,205,230,.12); }
.side-nav.is-reordering .campaign-menu-trigger { display: none; }
.side-nav.is-reordering .campaign-reorder-handle { position: absolute; z-index: 2; top: 50%; right: 10px; width: 20px; height: 28px; display: grid; grid-template-columns: repeat(2, 3px); grid-auto-rows: 3px; place-content: center; gap: 3px; color: var(--sidebar-muted); pointer-events: none; transform: translateY(-50%); transition: color .16s ease, transform .16s ease; }
.side-nav.is-reordering .campaign-reorder-handle::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: currentColor; box-shadow: 6px 0 currentColor, 0 -6px currentColor, 6px -6px currentColor, 0 6px currentColor, 6px 6px currentColor; }
.side-nav.is-reordering .campaign-nav-row:hover .campaign-reorder-handle { color: var(--lime); transform: translateY(-50%) scale(1.06); }
.side-nav.is-reordering .campaign-nav-row.is-dragging { z-index: 3; opacity: 0; }
.side-nav.is-reordering.is-drag-active .campaign-nav-row:not(.is-dragging) .campaign-nav-item { transition: background-color .16s ease, color .16s ease, box-shadow .16s ease; }
.campaign-archive-toggle { min-height: 40px; padding: 7px 9px; }
.campaign-archive-toggle .nav-icon { width: 24px; height: 24px; }
.campaign-archive-toggle .nav-icon .ui-icon { width: 15px; height: 15px; }
.campaign-archive-count { min-width: 20px; padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--sidebar-muted); font-size: 10px; line-height: 16px; text-align: center; }
.sidebar-project-manager-button { width: 100%; flex: none; }
.sidebar-project-manager-button .campaign-archive-count { margin-left: auto; }
.campaign-context-menu { position: fixed; z-index: 120; width: max-content; padding: 5px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-raised); color: var(--ink); box-shadow: 0 16px 40px rgba(8,18,13,.24); }
.campaign-context-menu button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: inherit; font: inherit; font-size: var(--text-sm); text-align: left; white-space: nowrap; cursor: pointer; }
.campaign-context-menu button:hover { background: var(--surface-soft); }
.campaign-context-menu .ui-icon { width: 16px; height: 16px; }
.sidebar-bottom { position: relative; margin-top: auto; display: grid; gap: 4px; padding-top: 13px; border-top: 1px solid var(--sidebar-border); }
.storage-card { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 7px; padding: 10px 11px; border: 1px solid var(--sidebar-border); background: rgba(255,255,255,.04); border-radius: 10px; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #7dda9e; box-shadow: 0 0 0 4px rgba(125,218,158,.12); margin-top: 5px; flex: none; }
.storage-card .status-dot { margin-top: 4px; }
.storage-card strong { display: block; font-size: var(--text-sm); }
.storage-card p { color: var(--sidebar-muted); margin: 2px 0 0; font-size: var(--text-xs); }
.account-sidebar-card { min-width: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 8px; margin: 0; padding: 9px; border: 1px solid var(--sidebar-border); border-radius: 10px; background: rgba(255,255,255,.04); cursor: pointer; transition: width .26s cubic-bezier(.2, .8, .2, 1), margin .26s cubic-bezier(.2, .8, .2, 1), padding .26s cubic-bezier(.2, .8, .2, 1), border-color .18s ease, background-color .18s ease; }
.account-sidebar-card:hover, .account-sidebar-card:focus-visible { border-color: color-mix(in srgb, var(--lime) 28%, var(--sidebar-border)); background: rgba(255,255,255,.07); outline: none; }
.account-sidebar-card[aria-expanded="true"] { border-color: color-mix(in srgb, var(--lime) 34%, var(--sidebar-border)); background: rgba(255,255,255,.08); }
.account-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--sidebar-active); color: var(--lime); font-size: var(--text-sm); font-weight: 800; }
.account-avatar:has(.profile-avatar-svg), .account-settings-avatar:has(.profile-avatar-svg) { overflow: hidden; padding: 0; background: transparent; }
.profile-avatar-svg { display: block; width: 100%; height: 100%; }
.account-sidebar-copy { min-width: 0; }
.account-sidebar-copy strong, .account-sidebar-copy p { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-sidebar-copy strong { font-size: var(--text-xs); }
.account-sidebar-copy p { margin: 1px 0 0; color: var(--sidebar-muted); font-size: 10px; }
.account-sidebar-cluster { position: relative; min-width: 0; }
.account-sidebar-menu { position: absolute; z-index: 140; left: 0; right: 0; bottom: calc(100% + 7px); padding: 5px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-raised); color: var(--ink); box-shadow: 0 16px 40px rgba(8,18,13,.24); }
.account-sidebar-menu[hidden] { display: none; }
.account-sidebar-menu button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: inherit; font: inherit; font-size: var(--text-sm); text-align: left; white-space: nowrap; cursor: pointer; }
.account-sidebar-menu button:hover { background: var(--surface-soft); }
.account-sidebar-menu button.danger-text { color: var(--danger); }
.account-sidebar-menu .ui-icon { width: 16px; height: 16px; }
.account-theme-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-bottom: 4px; padding: 0 0 5px; border-bottom: 1px solid var(--line); }
.account-sidebar-menu .account-theme-switch button { width: auto; min-width: 0; min-height: 34px; display: flex; align-items: center; justify-content: center; padding: 5px 2px; border-radius: 7px; color: var(--ink-faint); text-align: center; }
.account-sidebar-menu .account-theme-switch button .ui-icon { width: 16px; height: 16px; }
.account-sidebar-menu .account-theme-switch button.is-active { background: var(--green-soft); color: var(--green-2); font-weight: 700; }
.account-font-size-switch { display: grid; gap: 5px; margin-bottom: 4px; padding: 4px 3px 7px; border-bottom: 1px solid var(--line); }
.account-font-size-switch > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.account-sidebar-menu .account-font-size-switch button { width: auto; min-width: 0; min-height: 28px; justify-content: center; padding: 4px 2px; color: var(--ink-faint); font-size: 10px; text-align: center; }
.account-sidebar-menu .account-font-size-switch button.is-active { background: var(--green-soft); color: var(--green-2); font-weight: 800; }
.side-tool { padding-top: 8px; padding-bottom: 8px; }

.campaign-project-manager-modal { width: min(760px, calc(100vw - 32px)); }
.campaign-project-manager-body { display: grid; align-content: start; gap: 18px; }
.campaign-project-manager-group { display: grid; gap: 8px; }
.campaign-project-manager-group > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.campaign-project-manager-group > header strong { font-size: var(--text-sm); }
.campaign-project-manager-group > header span { color: var(--ink-faint); font-size: var(--text-xs); }
.campaign-project-manager-list { display: grid; gap: 7px; }
.campaign-project-manager-row { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); }
.campaign-project-manager-row.is-archived { background: var(--surface-soft); }
.campaign-project-manager-logo { width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-soft); font-size: var(--text-xs); font-weight: 800; }
.campaign-project-manager-logo img { width: 100%; height: 100%; object-fit: contain; }
.campaign-project-manager-copy { min-width: 0; }
.campaign-project-manager-copy strong, .campaign-project-manager-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-project-manager-copy strong { font-size: var(--text-sm); }
.campaign-project-manager-copy small { margin-top: 2px; color: var(--ink-faint); font-size: var(--text-xs); }
.campaign-project-manager-actions { display: flex; align-items: center; gap: 6px; }
.campaign-project-manager-actions .button { min-height: 30px; height: 30px; padding: 0 9px; }
.campaign-project-manager-empty { padding: 24px 12px; border: 1px dashed var(--line); border-radius: 10px; color: var(--ink-faint); font-size: var(--text-xs); text-align: center; }

.main-content { min-width: 0; padding: 20px 34px 18px; }
.topbar { max-width: 1440px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.topbar-title-row { display: flex; align-items: center; gap: 8px; }
.mail-read-status { min-height: 26px; display: inline-flex; align-items: center; gap: 6px; padding: 0 3px 0 8px; border-radius: 999px; background: var(--surface-soft); color: var(--ink-faint); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.mail-read-status[hidden] { display: none; }
.mail-read-status > i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--ink-faint); }
.mail-read-status.is-loading { background: var(--green-soft); color: var(--green-2); }
.mail-read-status.is-loading > i { background: currentColor; animation: mailLoadPulse 1s ease-in-out infinite; }
.mail-read-status.is-ready > i { background: var(--green-2); }
.mail-read-status.is-error { background: color-mix(in srgb, var(--danger) 9%, var(--surface)); color: var(--danger); }
.mail-read-refresh { width: 21px; height: 21px; display: grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: 50%; background: transparent; color: currentColor; cursor: pointer; }
.mail-read-refresh:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.mail-read-refresh:disabled { opacity: .55; cursor: default; }
.mail-read-refresh .ui-icon { width: 12px; height: 12px; }
.mail-read-status.is-loading .mail-read-refresh .ui-icon { animation: spin .8s linear infinite; }
.topbar-company-actions { display: inline-flex; align-items: center; gap: 7px; flex: none; margin-left: auto; }
.topbar-company-actions[hidden] { display: none; }
.topbar-company-actions .ai-action-compact { color: var(--green); }
body.company-route-active .topbar > div:first-child { min-width: 0; }
.topbar-mail-compose { flex: none; }
.topbar-mail-summary { flex: none; }
.topbar-mail-summary.is-active { border-color: color-mix(in srgb, var(--green-2) 42%, var(--line)); background: var(--green-soft); color: var(--green-2); }
.topbar-mail-template { flex: none; }
.topbar-mail-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.topbar-mail-actions[hidden] { display: none; }
.topbar-mail-search { width: 208px; height: var(--control-height-compact); min-height: var(--control-height-compact); border-radius: var(--control-radius-compact); }
.topbar-mail-search input { height: calc(var(--control-height-compact) - 2px); }
.topbar-library-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.topbar-library-actions[hidden] { display: none; }
.eyebrow, .section-kicker, .mini-label { margin: 0 0 2px; color: var(--green-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; }
.eyebrow:empty { display: none; }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: var(--title-md); line-height: 1.2; letter-spacing: -.03em; }
h2 { margin: 0; font-size: var(--title-md); line-height: 1.25; letter-spacing: -.02em; }
h3 { margin: 0 0 4px; font-size: var(--title-sm); line-height: 1.3; letter-spacing: -.015em; }
h4 { margin: 0; font-size: var(--text-lg); line-height: 1.35; }
.page-subtitle { display: none; }

.button { height: var(--control-height); min-height: var(--control-height); border: 1px solid transparent; padding: 0 12px; border-radius: var(--control-radius); cursor: pointer; font-size: var(--text-sm); font-weight: 500; line-height: 1; transition: .2s ease; white-space: nowrap; }
.button:hover { transform: none; }
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.button.primary { background: var(--green); color: var(--accent-contrast); box-shadow: 0 4px 11px color-mix(in srgb, var(--green) 20%, transparent); }
.button.primary:hover { background: color-mix(in srgb, var(--green) 86%, #000); }
.button.secondary { background: var(--surface-raised); border-color: var(--line); color: var(--ink-soft); font-weight: 500; }
.button.secondary:hover { border-color: var(--line-strong); background: var(--surface-soft); color: var(--ink); }
.button.secondary .button-icon { color: var(--ink-faint); }
.button.secondary:hover .button-icon { color: currentColor; }
.button.ghost { background: transparent; color: var(--ink-soft); }
.button.compact { height: var(--control-height-compact); min-height: var(--control-height-compact); padding: 0 11px; border-radius: var(--control-radius-compact); font-size: var(--text-xs); }
.button.secondary.compact { gap: 6px; padding: 0 11px; font-size: var(--text-xs); font-weight: 500; }
.button.secondary.compact .button-icon { width: 14px; height: 14px; stroke-width: 1.6; }
.button.full-button { width: 100%; }
.topbar-mail-actions > .button.compact,
.topbar-library-actions > .button.compact,
.topbar-contacts-actions > .button.compact {
  height: var(--control-height-compact);
  min-height: var(--control-height-compact);
  padding: 0 10px;
  border-radius: var(--control-radius-compact);
  font-size: var(--text-xs);
}
.danger-text { color: var(--danger) !important; }

.app-view { display: none; }
.app-view.active { display: block; animation: fadeIn .22s ease; }
.privacy-banner, .stats-grid, .workflow-card, .overview-workspace { max-width: 1440px; margin-left: auto; margin-right: auto; }
.privacy-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 15px; border: 1px solid var(--privacy-line); background: var(--privacy-bg); border-radius: 13px; }
.banner-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green-2); font-weight: 700; }
.banner-icon .ui-icon { width: 15px; height: 15px; }
.privacy-banner strong { display: block; font-size: var(--text-md); }
.privacy-banner p { margin: 2px 0 0; color: var(--ink-soft); font-size: var(--text-sm); }
.banner-pill { margin-left: auto; padding: 6px 9px; border-radius: 999px; color: var(--green-2); background: var(--green-soft); font-size: var(--text-xs); font-weight: 700; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-card { position: relative; min-height: 112px; padding: 17px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.stat-card::after { content: ""; position: absolute; width: 70px; height: 70px; border-radius: 50%; background: var(--soft-decor); right: -25px; bottom: -32px; }
.stat-label { display: block; color: var(--ink-soft); font-size: var(--text-sm); }
.stat-card strong { display: block; margin: 8px 0 2px; font-size: var(--metric-size); line-height: 1.15; letter-spacing: -.035em; }
.stat-card small { color: #909891; font-size: var(--text-xs); }
.accent-stat { background: var(--green); color: var(--accent-contrast); border-color: var(--green); }
.accent-stat .stat-label, .accent-stat small { color: color-mix(in srgb, var(--accent-contrast) 75%, transparent); }
.accent-stat::after { background: rgba(223,242,119,.15); }

.overview-workspace { margin-top: 16px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.overview-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.overview-heading p:not(.section-kicker) { margin: 6px 0 0; color: var(--ink-soft); font-size: var(--text-sm); }
.overview-heading-actions { display: flex; align-items: center; gap: 8px; }
.overview-page { max-width: 1440px; margin: 0 auto; }
.overview-dashboard { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(300px, .78fr); align-items: stretch; gap: 16px; min-height: clamp(610px, calc(100dvh - 150px), 790px); }
.overview-ai-card, .overview-progress-card { min-width: 0; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.overview-ai-card { min-height: 0; display: grid; grid-template-rows: auto minmax(310px, 1fr) auto auto; overflow: hidden; border-radius: var(--radius); }
.overview-card-head { min-width: 0; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.overview-card-heading { min-width: 0; display: flex; align-items: center; gap: 12px; }
.overview-card-heading > div { min-width: 0; }
.overview-card-icon { width: 24px; height: 24px; display: grid; place-items: center; flex: none; color: var(--green-2); }
.overview-card-icon .ui-icon { width: 20px; height: 20px; }
.overview-card-kicker { margin: 0 0 2px; color: var(--green-2); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.overview-card-heading h2 { font-size: 17px; }
.overview-clear-button, .overview-refresh-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-raised); color: var(--ink-faint); font-size: 10px; cursor: pointer; transition: .18s ease; }
.overview-clear-button:hover, .overview-refresh-button:hover { border-color: color-mix(in srgb, var(--green-2) 38%, var(--line)); background: var(--green-soft); color: var(--green-2); }
.overview-clear-button .ui-icon, .overview-refresh-button .ui-icon { width: 15px; height: 15px; }
.overview-refresh-button.is-loading .ui-icon { animation: spin .8s linear infinite; }
.ai-message-viewport { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.ai-message-viewport > .ai-messages, .ai-message-viewport > .mail-ai-results { width: 100%; height: 100%; }
.overview-ai-messages { min-height: 0; padding: 24px 22px; background: radial-gradient(circle at 96% 4%, color-mix(in srgb, var(--green-soft) 62%, transparent), transparent 28%), var(--surface); }
.overview-ai-messages .ai-message { max-width: 82%; padding: 13px 14px; border-radius: 14px; }
.overview-ai-messages .ai-message { font-size: 12px; }
.overview-ai-messages .ai-message-meta { font-size: 10px; }
.overview-ai-messages .ai-message-sources > span, .overview-ai-messages .ai-message-sources a { font-size: 9px; }
.overview-ai-messages .ai-message-sources a b { font-size: 8px; }
.overview-ai-messages .ai-message.user { max-width: 74%; }
.overview-ai-messages .ai-message.assistant { width: 100%; max-width: none; padding: 2px 0 8px; border: 0; border-radius: 0; background: transparent; }
.overview-ai-prompt-bar { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; padding: 10px 12px 0 20px; border-top: 1px solid var(--line); }
.overview-ai-prompt-bar::after { content: ""; position: absolute; z-index: 1; top: 1px; right: 0; bottom: 0; width: 64px; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--surface) 78%, transparent) 44%, var(--surface) 76%); pointer-events: none; }
.overview-ai-prompt-bar[hidden] { display: none; }
.overview-ai-prompts { min-width: 0; display: flex; flex-wrap: nowrap; gap: 7px; padding-right: 10px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.overview-ai-prompts button { flex: none; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--ink-soft); font-size: 11px; white-space: nowrap; cursor: pointer; transition: .18s ease; }
.overview-ai-prompts button:hover { border-color: color-mix(in srgb, var(--green-2) 36%, var(--line)); background: var(--green-soft); color: var(--green-2); }
.overview-ai-prompts-dismiss { position: relative; z-index: 2; width: 24px; height: 24px; display: grid; place-items: center; align-self: center; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink-faint); cursor: pointer; transition: color .16s ease, opacity .16s ease, transform .16s ease; }
.overview-ai-prompts-dismiss:hover { background: transparent; color: var(--ink); transform: scale(1.08); }
.overview-ai-prompts-dismiss:active { transform: scale(.94); }
.overview-ai-prompts-dismiss .ui-icon { width: 13px; height: 13px; }
.overview-ai-form { padding: 10px 20px 18px; }
.overview-ai-input-wrap { position: relative; }
.overview-ai-form textarea { width: 100%; min-height: 86px; max-height: 170px; display: block; padding: 13px 90px 13px 14px; resize: none; border-color: var(--line); background: var(--surface-soft); font-size: 13px; }
.overview-ai-form textarea:focus { background: var(--surface-raised); }
.overview-ai-voice { position: absolute; right: 50px; bottom: 10px; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-raised); color: var(--ink-soft); cursor: pointer; }
.overview-ai-voice:hover { border-color: var(--green-2); color: var(--green-2); }
.overview-ai-voice .ui-icon { width: 16px; height: 16px; }
.overview-ai-send { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--green); color: var(--accent-contrast); box-shadow: 0 5px 14px color-mix(in srgb, var(--green) 24%, transparent); cursor: pointer; }
.overview-ai-send:hover { background: color-mix(in srgb, var(--green) 86%, #000); }
.overview-ai-send:disabled { opacity: .45; cursor: not-allowed; }
.overview-ai-send .ui-icon { width: 16px; height: 16px; }
.overview-tracking { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; }
.overview-tracking-head { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px; }
.overview-tracking-head h2 { font-size: var(--title-sm); }
.overview-refresh-button { width: 34px; height: 34px; padding: 0; border-radius: 10px; }
.overview-progress-card { padding: 16px; border-radius: 14px; box-shadow: 0 10px 30px rgba(35,49,40,.055); }
.overview-progress-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.overview-progress-head > div > span { display: block; margin-bottom: 2px; color: var(--ink-faint); font-size: var(--text-xs); }
.overview-progress-head h2 { font-size: var(--text-lg); }
.overview-card-link { display: inline-flex; align-items: center; gap: 3px; padding: 4px 0; border: 0; background: transparent; color: var(--green-2); font-size: var(--text-xs); font-weight: 700; cursor: pointer; }
.overview-card-link .ui-icon { width: 13px; height: 13px; }
.overview-mail-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 14px; }
.overview-mail-metrics > button { width: 100%; min-height: 66px; display: flex; flex-direction: column; justify-content: space-between; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: .18s ease; }
.overview-mail-metrics > button:hover { border-color: color-mix(in srgb, var(--green-2) 36%, var(--line)); background: var(--surface-raised); }
.overview-mail-metrics > button:focus-visible { outline: 2px solid color-mix(in srgb, var(--green-2) 52%, transparent); outline-offset: 2px; }
.overview-mail-metrics span { color: var(--ink-soft); font-size: var(--text-xs); }
.overview-mail-metrics strong { font-size: var(--title-sm); line-height: 1; }
.overview-mail-status { margin: 9px 1px 0; overflow: hidden; color: var(--ink-faint); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.overview-company-progress-card { min-height: 0; display: flex; flex-direction: column; }
.overview-progress-count { min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--green-soft); color: var(--green-2); font-size: var(--text-sm); }
.overview-campaign-progress-list { min-height: 0; display: grid; align-content: start; gap: 7px; margin-top: 13px; overflow-y: auto; }
.overview-campaign-progress-item { width: 100%; display: block; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: .18s ease; }
.overview-campaign-progress-item:hover { border-color: color-mix(in srgb, var(--green-2) 36%, var(--line)); background: var(--surface-raised); }
.overview-campaign-progress-item.is-active { border-color: color-mix(in srgb, var(--green-2) 46%, var(--line)); background: var(--green-soft); }
.overview-campaign-row, .overview-campaign-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.overview-campaign-row strong { min-width: 0; overflow: hidden; font-size: var(--text-label); text-overflow: ellipsis; white-space: nowrap; }
.overview-campaign-stage { flex: none; color: var(--green-2); font-size: 10px; font-weight: 700; }
.overview-campaign-track { display: block; height: 4px; margin: 8px 0 7px; overflow: hidden; border-radius: 999px; background: var(--line); }
.overview-campaign-track > span { display: block; height: 100%; border-radius: inherit; background: var(--green-2); }
.overview-campaign-meta { color: var(--ink-faint); font-size: 10px; }
.overview-campaign-empty { padding: 20px 10px; color: var(--ink-faint); font-size: var(--text-xs); text-align: center; }
.overview-continue-button { min-width: 0; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--green-2) 35%, var(--line)); border-radius: 13px; background: var(--green); color: var(--accent-contrast); text-align: left; cursor: pointer; box-shadow: 0 9px 22px color-mix(in srgb, var(--green) 18%, transparent); }
.overview-continue-button > span:first-child { min-width: 0; }
.overview-continue-button small, .overview-continue-button strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-continue-button small { opacity: .7; font-size: 10px; }
.overview-continue-button strong { margin-top: 2px; font-size: var(--text-label); }
.overview-continue-button > span:last-child { display: flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.overview-continue-button .ui-icon { width: 14px; height: 14px; }
body.overview-route-active .ai-launcher { display: none; }
body.overview-route-active .back-to-top { bottom: 24px; }
body.overview-route-active .topbar { display: none; }

@media (min-width: 821px) {
  body.overview-route-active { height: 100dvh; overflow: hidden; }
  body.overview-route-active .app-shell { height: 100dvh; min-height: 0; }
  body.overview-route-active .main-content { height: 100dvh; min-height: 0; display: flex; flex-direction: column; padding-top: 18px; padding-bottom: 18px; overflow: hidden; }
  body.overview-route-active .overview-page.active { width: 100%; min-height: 0; display: flex; flex: 1; }
  body.overview-route-active .overview-dashboard { width: 100%; height: 100%; min-height: 0; flex: 1; }
}
.workflow-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.workflow-route-card { position: relative; display: grid; grid-template-columns: 34px 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 76px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); color: var(--ink); text-align: left; cursor: pointer; transition: .18s ease; }
.workflow-route-card:hover { border-color: var(--line-strong); background: var(--surface-raised); }
.workflow-route-card.current { border-color: color-mix(in srgb, var(--green-2) 58%, var(--line)); background: var(--green-soft); }
.workflow-route-card.completed .route-card-icon { background: var(--green); color: var(--accent-contrast); }
.route-number { color: var(--ink-faint); font-size: var(--text-xs); font-weight: 700; letter-spacing: .07em; }
.route-card-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--surface); color: var(--green-2); border: 1px solid var(--line); }
.route-card-icon .ui-icon { width: 19px; height: 19px; }
.route-card-copy strong, .route-card-copy small { display: block; }
.route-card-copy strong { font-size: var(--text-label); }
.route-card-copy small { margin-top: 4px; color: var(--ink-soft); font-size: var(--text-xs); }
.route-status { padding: 5px 8px; border-radius: 999px; background: var(--surface); color: var(--ink-soft); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.workflow-route-card.current .route-status { background: var(--green); color: var(--accent-contrast); }
.workflow-route-card.completed .route-status { color: var(--green-2); background: color-mix(in srgb, var(--green-soft) 75%, var(--surface)); }

.landscape-page { max-width: 1440px; margin: 0 auto; }
.landscape-page.active.has-research { display: block; }
.landscape-workspace { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.landscape-research-drawer { position: fixed; z-index: 55; top: 78px; right: 18px; bottom: 18px; width: min(380px, calc(100vw - 36px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 24px 68px rgba(20, 31, 25, .18); }
.landscape-research-drawer[hidden] { display: none; }
.landscape-research-head { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.landscape-research-head span { display: block; color: var(--green-2); font-size: var(--text-xs); font-weight: 800; letter-spacing: .08em; }
.landscape-research-head h2 { margin: 3px 0 0; font-size: var(--text-lg); line-height: 1.25; }
.landscape-research-head button { width: 32px; height: 32px; display: grid; place-items: center; flex: none; border: 1px solid transparent; border-radius: 8px; color: var(--ink-soft); background: transparent; cursor: pointer; }
.landscape-research-head button:hover { border-color: var(--line); background: var(--surface-soft); color: var(--ink); }
.landscape-research-progress { min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 9px 14px; border-bottom: 1px solid var(--line); color: var(--ink-soft); background: var(--surface-soft); font-size: var(--text-xs); }
.landscape-research-progress .status-dot { margin: 0; flex: none; }
.landscape-research-progress.is-complete .status-dot { background: var(--green-2); }
.landscape-research-progress.is-error .status-dot { background: var(--danger); }
.landscape-research-content { min-height: 180px; padding: 12px; overflow-y: auto; }
.landscape-research-empty { min-height: 180px; display: grid; place-items: center; padding: 24px; color: var(--ink-faint); text-align: center; font-size: var(--text-sm); line-height: 1.65; }
.landscape-research-card { margin-bottom: 9px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-raised); }
.landscape-research-card:last-child { margin-bottom: 0; }
.landscape-research-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.landscape-research-card-head strong { font-size: var(--text-sm); }
.landscape-research-card-head span { padding: 3px 6px; border-radius: 999px; color: var(--green); background: var(--green-soft); font-size: var(--text-xs); font-weight: 750; }
.landscape-research-card p { margin: 0; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.6; }
.landscape-research-card p + p { margin-top: 5px; }
.landscape-research-card a { color: var(--green); text-decoration: none; }
.landscape-research-card a:hover { text-decoration: underline; }
.landscape-research-contact-list, .landscape-research-entity-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.landscape-research-contact-list li, .landscape-research-entity-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; padding-top: 6px; border-top: 1px solid var(--line-soft); color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.45; }
.landscape-research-contact-list li:first-child, .landscape-research-entity-list li:first-child { padding-top: 0; border-top: 0; }
.landscape-research-contact-list strong, .landscape-research-entity-list strong { min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.landscape-research-contact-list strong span { color: var(--green); font-weight: 650; }
.landscape-research-contact-list small, .landscape-research-entity-list small { flex: none; color: var(--ink-faint); }
.landscape-prospect-list { display: grid; gap: 6px; }
.landscape-prospect-candidate { display: grid; grid-template-columns: 16px minmax(0, 1fr) 24px; align-items: start; gap: 8px; padding: 8px; border: 1px solid var(--line-soft); border-radius: 8px; cursor: pointer; }
.landscape-prospect-candidate:hover { border-color: var(--line-strong); background: var(--surface-soft); }
.landscape-prospect-candidate input { width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--green); }
.landscape-prospect-candidate span { min-width: 0; }
.landscape-prospect-candidate strong, .landscape-prospect-candidate small { display: block; }
.landscape-prospect-candidate strong { overflow: hidden; color: var(--ink); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.landscape-prospect-candidate small { margin-top: 2px; color: var(--ink-faint); font-size: var(--text-xs); line-height: 1.4; }
.landscape-prospect-candidate a { width: 24px; height: 24px; display: grid; place-items: center; color: var(--ink-faint); }
.landscape-prospect-candidate a .ui-icon { width: 14px; height: 14px; }
.landscape-research-actions { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 9px; }
.research-inline-button { height: var(--control-height-compact); min-height: var(--control-height-compact); padding: 0 9px; border: 1px solid var(--line); border-radius: var(--control-radius-compact); color: var(--ink-soft); background: var(--surface); cursor: pointer; font: inherit; font-size: var(--text-xs); font-weight: 700; }
.research-inline-button:hover { border-color: var(--green-2); color: var(--green); background: var(--green-soft); }
.research-inline-button.primary { border-color: var(--green); color: #fff; background: var(--green); }
.research-inline-button:disabled { opacity: .6; cursor: wait; }
.landscape-research-note { margin-top: 8px; padding: 7px 8px; border-radius: 8px; color: var(--ink-faint); background: var(--surface-soft); font-size: var(--text-xs); line-height: 1.5; }
.landscape-research-footer { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--surface-soft); }
.landscape-research-footer > span { color: var(--ink-faint); font-size: var(--text-xs); }
.landscape-toolbar { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.landscape-toolbar #landscape-category { width: 176px; min-width: 144px; }
.landscape-toolbar #landscape-scale { width: 128px; min-width: 112px; }
.landscape-toolbar #landscape-sort { width: 184px; min-width: 160px; }
.landscape-toolbar #landscape-reset { flex: none; }
.landscape-toolbar #landscape-manage { flex: none; margin-left: auto; }
.landscape-toolbar #landscape-manage[hidden] { display: none; }
.landscape-toolbar .button { height: var(--control-height-compact); min-height: var(--control-height-compact); padding: 0 9px; border-radius: var(--control-radius-compact); font-size: var(--text-xs); font-weight: 500; }
.landscape-toolbar .button:hover { transform: none; }
.landscape-favorites-icon { width: 16px; height: 16px; stroke-width: 1.75; flex: none; transform: translateY(.5px); }
.landscape-favorites-toggle.is-active { border-color: color-mix(in srgb, var(--warning-ink) 40%, var(--line)); background: color-mix(in srgb, var(--warning) 55%, var(--surface-raised)); color: var(--warning-ink); }
.landscape-favorites-toggle.is-active .button-icon { fill: currentColor; }
.landscape-toolbar input, .landscape-toolbar select { height: var(--control-height-compact); min-height: var(--control-height-compact); padding-top: 0; padding-bottom: 0; border-radius: var(--control-radius-compact); background: var(--surface-raised); font-size: var(--text-xs); font-weight: 400; }
.landscape-batch-bar { position: sticky; z-index: 14; top: 0; min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 7px 12px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--green-soft) 82%, var(--surface)); box-shadow: 0 8px 18px color-mix(in srgb, var(--ink) 8%, transparent); }
.landscape-batch-bar[hidden] { display: none; }
.landscape-batch-bar label { display: inline-flex; align-items: center; cursor: pointer; }
.landscape-batch-bar > span { margin-right: auto; color: var(--ink-soft); font-size: var(--text-xs); }
.landscape-search { display: flex; align-items: center; min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); transition: .18s ease; }
.landscape-search:focus-within { border-color: var(--green-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-2) 13%, transparent); }
.landscape-search .ui-icon { width: 14px; height: 14px; margin-left: 9px; color: var(--ink-faint); flex: none; }
.landscape-search input { border: 0; box-shadow: none; background: transparent; }
.topbar-library-actions { flex-wrap: nowrap; }
.topbar-landscape-search { width: clamp(190px, 24vw, 280px); height: var(--control-height-compact); min-height: var(--control-height-compact); border-radius: var(--control-radius-compact); }
.topbar-landscape-search input { min-width: 0; height: 100%; padding-top: 0; padding-bottom: 0; font-size: var(--text-xs); }
.company-directory { container-name: company-directory; container-type: inline-size; display: grid; }

.mail-page { max-width: 1440px; margin: 0 auto; }
.mail-workspace { min-height: calc(100vh - 150px); overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow); }
.mail-shell { position: relative; display: grid; grid-template-columns: clamp(258px, 28%, 280px) minmax(0, 1fr); min-height: 650px; transition: grid-template-columns .22s ease; }
.mail-list-pane, .mail-reader-pane, .mail-ai-sidebar { min-width: 0; }
.mail-pane-heading, .mail-list-toolbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.mail-pane-heading span, .mail-list-toolbar strong { font-size: var(--text-sm); font-weight: 700; }
.mail-pane-heading small, .mail-list-toolbar small { color: var(--ink-faint); font-size: var(--text-xs); }
.mail-folder-list { padding: 8px; }
.mail-folder-button { width: 100%; min-height: 40px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 9px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-soft); font: inherit; text-align: left; cursor: pointer; }
.mail-folder-button:hover { background: var(--surface-raised); color: var(--ink); }
.mail-folder-button.active { background: var(--green-soft); color: var(--green); font-weight: 700; }
.mail-folder-button .ui-icon { width: 17px; height: 17px; }
.mail-folder-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); }
.mail-folder-badge { min-width: 22px; padding: 2px 6px; border-radius: 999px; background: var(--surface-raised); color: var(--ink-faint); font-size: 11px; text-align: center; }
.mail-folder-button.active .mail-folder-badge { background: color-mix(in srgb, var(--green) 12%, var(--surface)); color: var(--green); }
.mail-pane-loading { display: flex; align-items: center; gap: 9px; padding: 14px 10px; color: var(--ink-faint); font-size: var(--text-xs); }
.mail-list-pane { display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface)); opacity: 1; transform: translateX(0); transition: opacity .16s ease, transform .22s ease, border-color .16s ease; }
.mail-list-toolbar { --mail-list-control-height: 34px; justify-content: space-between; padding: 8px 12px; }
.mail-list-collapse-button { width: var(--mail-list-control-height); height: var(--mail-list-control-height); flex: none; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-raised); color: var(--ink-faint); cursor: pointer; }
.mail-list-collapse-button:hover { border-color: color-mix(in srgb, var(--green-2) 35%, var(--line)); color: var(--green-2); background: var(--surface-soft); }
.mail-list-collapse-button .ui-icon, .mail-list-expand-tab .ui-icon { width: 17px; height: 17px; stroke-width: 1.55; }
.mail-list-expand-tab { position: absolute; z-index: 25; top: 11px; left: -1px; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-left: 0; border-radius: 0 9px 9px 0; background: var(--surface-raised); color: var(--ink-faint); box-shadow: none; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-8px); transition: opacity .15s ease, transform .2s ease, visibility 0s linear .2s, color .15s ease, background-color .15s ease; cursor: pointer; }
.mail-shell.mail-list-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.mail-shell.mail-list-collapsed .mail-list-pane { opacity: 0; transform: translateX(-12px); border-right-color: transparent; pointer-events: none; }
.mail-shell.mail-list-collapsed .mail-list-expand-tab { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); transition-delay: .08s, .08s, 0s, 0s, 0s; }
.mail-shell.mail-list-collapsed .mail-list-expand-tab:hover { color: var(--green-2); background: var(--surface-soft); }
.mail-shell.mail-ai-open { grid-template-columns: clamp(248px, 25%, 280px) minmax(0, 1fr) clamp(300px, 29%, 360px); }
.mail-shell.mail-ai-open.mail-list-collapsed { grid-template-columns: 0 minmax(0, 1fr) clamp(310px, 31%, 360px); }
.mail-folder-select-wrap { min-width: 0; display: flex; align-items: center; flex: 1; gap: 8px; }
.mail-folder-select-wrap select { min-width: 0; width: 100%; height: var(--mail-list-control-height); min-height: var(--mail-list-control-height); padding: 0 28px 0 9px; border-radius: 9px; background-color: var(--surface-raised); font-size: var(--text-sm); font-weight: 400; }
.mail-folder-select-wrap small { white-space: nowrap; }
.mail-search { width: min(190px, 58%); height: var(--control-height); min-height: var(--control-height); display: flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface-raised); }
.mail-search:focus-within { border-color: var(--green-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-2) 12%, transparent); }
.mail-search .ui-icon { width: 14px; height: 14px; stroke-width: 1.6; color: var(--ink-faint); flex: none; }
.mail-search input { min-width: 0; height: calc(var(--control-height) - 2px); min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: var(--text-sm); }
.mail-message-list { flex: 1; }
.mail-message-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; padding: 13px 14px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.mail-message-row:hover { background: var(--surface-soft); }
.mail-message-row.active { box-shadow: inset 3px 0 0 var(--green-2); background: var(--green-soft); }
.mail-message-row.unread .mail-message-sender, .mail-message-row.unread .mail-message-subject { font-weight: 700; }
.mail-message-sender, .mail-message-subject, .mail-message-preview { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-message-sender { font-size: var(--text-sm); }
.mail-contact-group { min-width: 0; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; }
.mail-contact-pill { min-width: 0; max-width: 100%; display: inline-flex; align-items: center; gap: 5px; overflow: hidden; padding: 2px 8px 2px 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--ink-soft); font-size: var(--text-xs); font-weight: 500; line-height: 1.25; white-space: nowrap; vertical-align: middle; }
.mail-contact-avatar { width: 18px; height: 18px; display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--green-soft); color: var(--green-2); font-size: 7px; font-weight: 800; }
.mail-contact-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-contact-pill:hover { border-color: color-mix(in srgb, var(--green-2) 35%, var(--line)); background: var(--green-soft); color: var(--green-2); }
.mail-contact-pill.is-empty { color: var(--ink-faint); }
.mail-message-row.active .mail-contact-pill { background: var(--surface-raised); }
.mail-contact-tooltip { position: fixed; z-index: 220; width: max-content; min-width: min(260px, calc(100vw - 20px)); max-width: min(400px, calc(100vw - 20px)); padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-raised); color: var(--ink); box-shadow: 0 14px 38px rgba(8,18,13,.22); pointer-events: auto; }
.mail-contact-tooltip[hidden] { display: none; }
.mail-contact-tooltip-head { display: flex; align-items: center; gap: 9px; }
.mail-contact-tooltip-avatar { width: 32px; height: 32px; display: grid; place-items: center; flex: none; border-radius: 9px; background: var(--green-soft); color: var(--green-2); font-size: var(--text-xs); font-weight: 800; }
.mail-contact-tooltip-copy { min-width: 0; flex: 1 1 auto; }
.mail-contact-tooltip-copy > div { display: flex; align-items: center; gap: 7px; }
.mail-contact-tooltip strong { min-width: 0; overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.mail-contact-tooltip-role { flex: none; padding: 2px 6px; border-radius: 999px; background: var(--green-soft); color: var(--green-2); font-size: 10px; }
.mail-contact-tooltip p { min-width: 0; width: max-content; max-width: 100%; display: flex; align-items: center; gap: 3px; margin: 3px 0 0; color: var(--ink-faint); font-size: var(--text-xs); line-height: 19px; }
.mail-contact-tooltip p > span { min-width: 0; max-width: calc(100% - 21px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-contact-tooltip-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line); }
.mail-contact-tooltip-action { width: auto; height: 25px; display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0 7px; border: 1px solid color-mix(in srgb, var(--green-2) 25%, var(--line)); border-radius: 6px; background: var(--surface-soft); color: var(--green-2); font: inherit; font-size: 11px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.mail-contact-tooltip-action:hover { border-color: color-mix(in srgb, var(--green-2) 52%, var(--line)); background: color-mix(in srgb, var(--green-soft) 72%, var(--surface)); }
.mail-contact-tooltip-action:disabled { opacity: .45; cursor: not-allowed; }
.mail-contact-tooltip-copy-button { width: 18px; height: 18px; display: inline-grid; place-items: center; flex: none; align-self: center; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--ink-faint); cursor: pointer; }
.mail-contact-tooltip-copy-button:hover { background: var(--surface-soft); color: var(--green-2); }
.mail-contact-tooltip-copy-button .ui-icon { width: 11px; height: 11px; }
.mail-message-date { color: var(--ink-faint); font-size: 11px; white-space: nowrap; }
.mail-message-subject { grid-column: 1 / -1; font-size: var(--text-sm); }
.mail-message-preview { grid-column: 1 / -1; color: var(--ink-faint); font-size: var(--text-xs); }
.mail-load-sentinel { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 9px; border-top: 1px solid var(--line); background: var(--surface-soft); color: var(--ink-faint); font-size: var(--text-xs); }
.mail-load-sentinel .status-dot { width: 6px; height: 6px; margin: 0; background: var(--ink-faint); box-shadow: none; opacity: .45; }
.mail-load-sentinel.is-loading { color: var(--green-2); }
.mail-load-sentinel.is-loading .status-dot { background: var(--green-2); opacity: 1; animation: mailLoadPulse 1s ease-in-out infinite; }
@keyframes mailLoadPulse { 50% { transform: scale(1.35); opacity: .45; } }
.mail-reader-pane { container: mail-reader / inline-size; display: flex; flex-direction: column; overflow: hidden; background: var(--surface-raised); }
.mail-shell.mail-list-collapsed .mail-reader-head,
.mail-shell.mail-list-collapsed .mail-reader-message-info { padding-left: 42px; }
.mail-reader-head { min-height: 58px; display: flex; flex: none; flex-direction: column; justify-content: center; padding: 11px 24px; border-bottom: 1px solid var(--line); background: var(--surface-raised); }
.mail-reader-head h2 { margin: 0; font-size: var(--title-sm); line-height: 1.45; }
.mail-reader-title-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 18px; }
.mail-reader-title-row h2 { min-width: 0; overflow-wrap: anywhere; }
.mail-reader-actions { width: auto; display: flex; align-items: center; flex: none; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; }
.mail-reader-actions button, .mail-html-controls button { height: var(--control-height-compact); min-height: var(--control-height-compact); padding: 0 9px; border: 1px solid var(--line); border-radius: var(--control-radius-compact); background: var(--surface); color: var(--ink-soft); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.mail-reader-actions button:hover, .mail-html-controls button:hover { border-color: color-mix(in srgb, var(--green-2) 45%, var(--line)); color: var(--green-2); }
.mail-reader-actions button.danger:hover { border-color: color-mix(in srgb, #b64242 50%, var(--line)); color: #b64242; }
.mail-reader-primary-action { height: var(--control-height-compact); min-height: var(--control-height-compact) !important; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px !important; border-color: var(--line) !important; background: var(--surface) !important; color: var(--ink-soft) !important; font-weight: 500 !important; white-space: nowrap; }
.mail-reader-primary-action:hover { border-color: color-mix(in srgb, var(--green-2) 40%, var(--line)) !important; background: var(--surface-soft) !important; color: var(--green-2) !important; }
.mail-reader-primary-action .ui-icon { width: 14px; height: 14px; }
.mail-reader-ai-action { height: var(--control-height-compact); min-height: var(--control-height-compact) !important; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px !important; border-color: color-mix(in srgb, var(--green-2) 28%, var(--line)) !important; background: var(--green-soft) !important; color: var(--green-2) !important; font-weight: 600 !important; white-space: nowrap; }
.mail-reader-ai-action .ui-icon { width: 14px; height: 14px; }
.mail-shell.mail-ai-open .mail-reader-ai-action { background: var(--green-2) !important; color: var(--accent-contrast) !important; }
.mail-reader-ai-menu-wrap { position: relative; }
.mail-reader-ai-menu { position: absolute; z-index: 42; top: calc(100% + 6px); right: 0; min-width: 142px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); box-shadow: 0 14px 34px rgba(10,24,17,.16); }
.mail-reader-ai-menu[hidden] { display: none; }
.mail-reader-ai-menu button { width: 100%; min-height: 33px; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-soft); font: inherit; font-size: var(--text-xs); text-align: left; white-space: nowrap; cursor: pointer; }
.mail-reader-ai-menu button:hover { background: var(--surface-soft); color: var(--green-2); }
.mail-reader-ai-menu button .ui-icon { width: 14px; height: 14px; }
.mail-reader-ai-menu > div { height: 1px; margin: 4px 3px; background: var(--line); }
.mail-reader-more { position: relative; }
.mail-reader-more-toggle { width: 30px; min-height: 30px !important; display: grid; place-items: center; padding: 0 !important; }
.mail-reader-more-toggle .ui-icon { width: 16px; height: 16px; }
.mail-reader-more-menu { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; min-width: 132px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); box-shadow: 0 14px 34px rgba(10,24,17,.16); }
.mail-reader-more-menu[hidden] { display: none; }
.mail-reader-more-menu button { width: 100%; min-height: 34px; display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-soft); text-align: left; white-space: nowrap; }
.mail-reader-more-menu button .ui-icon { width: 15px; height: 15px; flex: none; stroke-width: 1.7; }
.mail-reader-more-menu button:hover { border-color: transparent; background: var(--surface-soft); color: var(--ink); }
.mail-reader-more-menu button.danger { color: var(--danger); }
.mail-reader-more-menu .mail-reader-compact-only { display: none; }
.mail-reader-menu-divider { height: 1px; margin: 4px 3px; background: var(--line); }

@container mail-reader (max-width: 440px) {
  .mail-reader-head, .mail-shell.mail-list-collapsed .mail-reader-head { padding-left: 14px; padding-right: 14px; }
  .mail-reader-title-row { grid-template-columns: minmax(0, 1fr) 30px; gap: 10px; }
  .mail-reader-title-row h2 { overflow-wrap: break-word; word-break: normal; }
  .mail-reader-primary-action, .mail-reader-ai-menu-wrap { display: none; }
  .mail-reader-more-menu { min-width: 154px; }
  .mail-reader-more-menu .mail-reader-compact-only { display: flex; }
  .mail-reader-more-menu .mail-reader-menu-divider { display: block; }
}
.mail-reader-address { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; color: var(--ink-soft); font-size: var(--text-xs); }
.mail-reader-address-item { min-width: 0; display: flex; align-items: center; gap: 8px; }
.mail-reader-address-item > span { display: flex; align-items: center; min-height: 22px; flex: none; color: var(--ink-faint); line-height: 1.25; }
.mail-reader-address strong { min-width: 0; display: flex; align-items: center; min-height: 22px; font-weight: 500; }
.mail-reader-address .mail-contact-group { display: flex; flex-wrap: wrap; }
.mail-reader-address .mail-contact-pill { color: var(--ink-soft); }
.mail-reader-message-info { padding: 14px 24px; border-bottom: 1px solid var(--line); background: var(--surface-raised); }
.mail-reader-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 14px; margin-top: 12px; color: var(--ink-faint); font-size: var(--text-xs); }
.mail-reader-meta span { display: inline-flex; align-items: center; gap: 5px; }
.mail-reader-meta .ui-icon { width: 14px; height: 14px; }
.mail-reader-body { padding: 24px; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.75; overflow-wrap: anywhere; }
.mail-plain-body pre { margin: 0; white-space: pre-wrap; word-break: break-word; color: inherit; font: inherit; }
.mail-body-email-link { display: inline; margin: 0; padding: 0; border: 0; background: transparent; color: var(--green-2); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.mail-body-email-link:hover { color: var(--green); }
.mail-markdown-body { color: var(--ink); }
.mail-html-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--surface-soft); color: var(--ink-faint); font-size: var(--text-xs); }
.mail-reader-scroll-content { min-height: 0; flex: 1; overflow-y: auto; }
.mail-reader-scroll-content.has-html-frame { display: block; overflow-y: auto; }
.mail-reader-scroll-content.has-html-frame .mail-attachments { max-height: none; overflow: visible; }
.mail-html-frame { display: block; width: 100%; min-height: 160px; height: 160px; border: 0; overflow: hidden; background: #fff; }
.mail-attachments { padding: 10px 24px 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
.mail-attachments-head { min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.mail-attachments-head span { color: var(--ink-faint); font-size: var(--text-xs); }
.mail-attachments-download-all { display: inline-flex; align-items: center; gap: 5px; color: var(--green-2); font-size: 11px; font-weight: 500; text-decoration: none; }
.mail-attachments-download-all:hover { text-decoration: underline; }
.mail-attachments-download-all .ui-icon { width: 13px; height: 13px; }
.mail-attachments-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 8px; }
.mail-attachment-item { width: 100%; min-width: 0; max-width: none; box-sizing: border-box; display: grid; grid-template-columns: 30px minmax(0, 1fr) 28px; align-items: center; gap: 8px; padding: 7px 7px 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-raised); color: var(--ink); }
.mail-attachment-item:hover { border-color: color-mix(in srgb, var(--green-2) 40%, var(--line)); background: var(--green-soft); }
.mail-attachment-open { min-width: 0; display: contents; color: inherit; text-align: left; cursor: pointer; }
.mail-attachment-open:disabled { cursor: default; }
.mail-attachment-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-soft); color: var(--green-2); }
.mail-attachments .ui-icon { width: 15px; height: 15px; }
.mail-attachment-copy { min-width: 0; }
.mail-attachments strong, .mail-attachments small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-attachments strong { font-size: var(--text-xs); }
.mail-attachments small { margin-top: 2px; color: var(--ink-faint); font-size: 10px; }
.mail-attachment-download { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; color: var(--ink-faint); text-decoration: none; }
.mail-attachment-download:hover { background: var(--surface-raised); color: var(--green-2); }
.mail-attachment-preview-modal { width: min(980px, calc(100vw - 32px)); height: min(760px, calc(100dvh - 32px)); padding: 0; overflow: hidden; }
.mail-attachment-preview-shell { height: 100%; display: flex; flex-direction: column; background: var(--surface-raised); }
.mail-attachment-preview-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 14px 8px 16px; border-bottom: 1px solid var(--line); }
.mail-attachment-preview-head > div:first-child { min-width: 0; }
.mail-attachment-preview-head span, .mail-attachment-preview-head strong { display: block; }
.mail-attachment-preview-head span { display: none; }
.mail-attachment-preview-head strong { margin: 0; overflow: hidden; font-size: 15px; font-weight: 500; line-height: 28px; text-overflow: ellipsis; white-space: nowrap; }
.mail-attachment-preview-head > div:last-child { display: flex; align-items: center; gap: 7px; }
.mail-attachment-preview-head a { text-decoration: none; }
.mail-attachment-preview-content { min-height: 0; flex: 1; display: grid; place-items: center; overflow: auto; background: var(--surface-soft); }
.mail-attachment-preview-content img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.mail-attachment-preview-content iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.mail-reader-warning { margin: 0 24px 22px; padding: 9px 11px; border-radius: 9px; background: var(--warning); color: var(--warning-ink); font-size: var(--text-xs); }
.mail-ai-sidebar { display: none; flex-direction: column; overflow: hidden; border-left: 1px solid var(--line); background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface)); }
.mail-shell.mail-ai-open .mail-ai-sidebar { display: flex; }
.mail-ai-head { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--line); }
.mail-ai-head > div { min-width: 0; display: flex; align-items: center; gap: 9px; }
.mail-ai-head strong { font-size: var(--text-sm); }
.mail-ai-mark { width: 30px; height: 30px; display: grid; place-items: center; flex: none; border-radius: 9px; background: var(--green-soft); color: var(--green-2); }
.mail-ai-mark .ui-icon { width: 16px; height: 16px; }
.mail-ai-head > button { width: 30px; height: 30px; display: grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink-faint); cursor: pointer; }
.mail-ai-head > button:hover { background: var(--surface-soft); color: var(--ink); }
.mail-ai-head > button .ui-icon { width: 15px; height: 15px; }
.mail-ai-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: transparent; }
.mail-ai-actions button { height: var(--control-height-compact); min-height: var(--control-height-compact); padding: 0 8px; border: 1px solid var(--line); border-radius: var(--control-radius-compact); background: var(--surface-raised); color: var(--ink-soft); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.mail-ai-actions button:hover { border-color: color-mix(in srgb, var(--green-2) 40%, var(--line)); color: var(--green-2); }
.mail-ai-actions button:disabled { opacity: .5; cursor: wait; }
.mail-ai-results { min-height: 0; flex: 1; overflow-y: auto; padding: 12px; }
.mail-ai-viewport { display: flex; flex: 1; }
.mail-ai-empty { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; color: var(--ink-faint); text-align: center; }
.mail-ai-empty > span { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 10px; border-radius: 12px; background: var(--green-soft); color: var(--green-2); }
.mail-ai-empty .ui-icon { width: 19px; height: 19px; }
.mail-ai-empty strong { color: var(--ink-soft); font-size: var(--text-sm); }
.mail-ai-empty p { max-width: 250px; margin: 6px 0 0; font-size: var(--text-xs); line-height: 1.55; }
.mail-ai-message { margin-bottom: 10px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); }
.mail-ai-message.user { width: fit-content; max-width: calc(100% - 28px); margin-left: auto; background: var(--green-soft); overflow-wrap: anywhere; }
.mail-ai-message.assistant { padding: 2px 0 10px; border: 0; border-radius: 0; background: transparent; }
.mail-ai-message-label { display: block; margin-bottom: 6px; color: var(--ink-faint); font-size: 10px; font-weight: 700; }
.mail-ai-message-content { color: var(--ink); font-size: var(--text-xs); line-height: 1.65; }
.mail-ai-message-content > :first-child { margin-top: 0; }
.mail-ai-message-content > :last-child { margin-bottom: 0; }
.mail-ai-use-reply { margin-top: 9px; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--green-2) 30%, var(--line)); border-radius: 7px; background: var(--green-soft); color: var(--green-2); font: inherit; font-size: 11px; cursor: pointer; }
.mail-ai-custom { padding: 10px 12px 12px; border-top: 1px solid var(--line); background: transparent; }
.mail-ai-input-wrap { position: relative; }
.mail-ai-custom textarea { width: 100%; min-height: 84px; max-height: 160px; display: block; padding: 12px 86px 12px 12px; resize: none; border-radius: 10px; background: var(--surface-raised); font-size: var(--text-xs); line-height: 1.5; }
.mail-ai-custom textarea:focus { background: var(--surface); }
.mail-ai-custom button { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--green-2); color: var(--accent-contrast); box-shadow: 0 4px 12px color-mix(in srgb, var(--green-2) 20%, transparent); cursor: pointer; }
.mail-ai-custom .mail-ai-voice { right: 48px; border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink-soft); box-shadow: none; }
.mail-ai-custom .mail-ai-voice:hover { border-color: var(--green-2); color: var(--green-2); }
.mail-ai-custom button:disabled { opacity: .5; cursor: wait; }
.mail-ai-custom .ui-icon { width: 14px; height: 14px; }
body.mail-route-active:has(.mail-shell.mail-ai-open) #open-ai-chat { display: none; }
.mail-composer { min-height: 100%; display: flex; flex-direction: column; background: var(--surface); }
.mail-composer-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 14px 8px 16px; border-bottom: 1px solid var(--line); }
.mail-composer-head div { display: flex; align-items: baseline; gap: 9px; }
.mail-composer-head span { color: var(--ink); font-size: 15px; font-weight: 500; }
.mail-composer-head strong { display: none; }
.mail-composer-head > button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface-soft); color: var(--ink-faint); cursor: pointer; }
.mail-composer-head > button:hover { color: var(--ink); }
.mail-composer-head .ui-icon { width: 16px; height: 16px; }
.mail-compose-fields { padding: 6px 18px 0; }
.mail-compose-fields label, .mail-compose-subject-field { min-height: 42px; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; border-bottom: 1px solid var(--line); }
.mail-compose-fields label > span, .mail-compose-subject-field > span { color: var(--ink-faint); font-size: var(--text-xs); }
.mail-compose-fields input { min-width: 0; min-height: 40px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--ink); font-size: var(--text-sm); }
.mail-compose-fields label .mail-template-token-editor, .mail-compose-subject-field .mail-template-token-editor { min-height: 40px; padding: 8px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.mail-compose-copy-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mail-compose-copy-fields > label:first-child { padding-right: 12px; }
.mail-compose-copy-fields > label:last-child { padding-left: 12px; border-left: 1px solid var(--line); }
.mail-compose-address-control { min-width: 0; display: flex; align-items: center; gap: 6px; }
.mail-compose-address-field { height: 42px; min-height: 42px; }
.mail-compose-address-editor { min-width: 0; height: 40px; min-height: 40px; display: flex; align-items: center; flex: 1; flex-wrap: nowrap; gap: 4px; padding: 3px 0; overflow-x: auto; scrollbar-width: none; cursor: text; }
.mail-compose-address-editor::-webkit-scrollbar { display: none; }
.mail-compose-address-chips { min-width: 0; display: flex; align-items: center; flex: none; flex-wrap: nowrap; gap: 4px; }
.mail-compose-address-editor > input { min-width: 96px; min-height: 28px; flex: 1 0 96px; padding: 0; }
.mail-compose-address-chip { min-width: 0; max-width: 220px; display: inline-flex; align-items: center; gap: 2px; padding: 2px 3px 2px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--ink-soft); line-height: 1.2; }
.mail-compose-address-chip:hover, .mail-compose-address-chip:focus-within { border-color: color-mix(in srgb, var(--green-2) 34%, var(--line)); background: var(--green-soft); color: var(--ink); outline: 0; }
.mail-compose-address-chip-main { min-width: 0; display: inline-flex; align-items: center; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mail-compose-address-chip-main:focus { outline: 0; }
.mail-compose-address-chip-copy { min-width: 0; display: inline-flex; align-items: baseline; gap: 4px; overflow: hidden; }
.mail-compose-address-chip-copy strong, .mail-compose-address-chip-copy small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-compose-address-chip-copy strong { color: inherit; font-size: 11px; font-weight: 600; }
.mail-compose-address-chip-copy small { max-width: 78px; color: var(--ink-faint); font-size: 9px; }
.mail-compose-address-chip-copy small::before { content: "· "; }
.mail-compose-address-chip-remove { width: 18px; height: 18px; display: grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-faint); cursor: pointer; }
.mail-compose-address-chip-remove .material-symbols-rounded { display: block; font-size: 13px; line-height: 1; font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 18; }
.mail-compose-address-chip-remove:hover { background: color-mix(in srgb, var(--ink-faint) 12%, transparent); color: var(--ink); }
.mail-compose-address-control > button { width: 26px; height: 26px; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-raised); color: var(--ink-faint); cursor: pointer; }
.mail-compose-address-control > button .material-symbols-rounded { display: block; font-size: 18px; line-height: 1; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20; }
.mail-compose-address-control > button:hover { border-color: color-mix(in srgb, var(--green-2) 36%, var(--line)); background: var(--surface-soft); color: var(--green-2); }
.mail-compose-subject-control { min-width: 0; display: flex; align-items: center; gap: 8px; }
.mail-compose-subject-control > input, .mail-compose-subject-control > .mail-template-token-editor { min-width: 0; flex: 1; }
.mail-subject-rewrite-trigger { min-height: 30px; flex: none; padding-inline: 9px; white-space: nowrap; }
.mail-compose-batch-panel { margin: 6px 0 7px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.mail-compose-batch-overview { min-width: 0; display: grid; grid-template-columns: minmax(190px, .75fr) minmax(300px, 1.25fr); align-items: center; gap: 10px; padding: 10px 11px; }
.mail-compose-batch-metric, .mail-compose-batch-variable-state { min-width: 0; display: flex; align-items: center; gap: 9px; }
.mail-compose-batch-metric > span { width: 32px; height: 32px; display: grid; place-items: center; flex: none; border-radius: 9px; background: var(--surface-raised); color: var(--green-2); }
.mail-compose-batch-metric > span .ui-icon { width: 16px; height: 16px; }
.mail-compose-batch-metric > div, .mail-compose-batch-variable-state > div { min-width: 0; }
.mail-compose-batch-metric strong, .mail-compose-batch-metric small, .mail-compose-batch-variable-state strong, .mail-compose-batch-variable-state small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-compose-batch-metric strong, .mail-compose-batch-variable-state strong { color: var(--ink); font-size: var(--text-xs); }
.mail-compose-batch-metric small, .mail-compose-batch-variable-state small { margin-top: 2px; color: var(--ink-faint); font-size: 9px; }
.mail-compose-batch-variable-state { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; padding-left: 10px; border-left: 1px solid var(--line); }
.mail-compose-batch-variable-state > .status-dot { margin: 0; background: var(--ink-faint); box-shadow: none; opacity: .55; }
.mail-compose-batch-variable-state.is-pending > .status-dot { background: var(--warning-ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning-ink) 10%, transparent); opacity: 1; }
.mail-compose-batch-variable-state.is-ready > .status-dot { background: var(--green-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green-2) 11%, transparent); opacity: 1; }
.mail-compose-batch-variable-state .button { min-height: 28px; padding-inline: 8px; }
.mail-compose-batch-recipient-strip { min-width: 0; display: flex; align-items: center; gap: 5px; padding: 7px 10px; overflow-x: auto; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface-raised) 72%, var(--surface-soft)); scrollbar-width: thin; }
.mail-compose-batch-recipient-strip > span { min-width: 0; max-width: 220px; display: inline-flex; align-items: baseline; flex: none; gap: 4px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-raised); color: var(--ink-soft); }
.mail-compose-batch-recipient-strip strong, .mail-compose-batch-recipient-strip small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-compose-batch-recipient-strip strong { font-size: 10px; }
.mail-compose-batch-recipient-strip small { color: var(--ink-faint); font-size: 8px; }
.mail-compose-formatbar { min-height: 46px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 6px 18px; border-bottom: 1px solid var(--line); }
.mail-compose-formatbar.is-batch { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding-block: 7px; }
.mail-compose-formatbar.is-batch .mail-rich-tools { grid-column: 1; grid-row: 1; padding-left: 0; border-left: 0; }
.mail-compose-formatbar.is-batch .mail-compose-side-actions { grid-column: 2; grid-row: 1; margin-left: 0; }
.mail-compose-formatbar.is-batch .mail-compose-variable-tools { grid-column: 1 / -1; grid-row: 2; padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent); }
.mail-compose-formatbar select { width: 96px; min-height: 32px; padding: 4px 26px 4px 8px; border-radius: 8px; background-color: var(--surface-soft); font-size: var(--text-xs); }
.mail-compose-format-switch { height: 28px; display: inline-flex; align-items: center; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.mail-compose-format-switch button { height: 22px; min-width: 34px; padding: 0 7px; border: 0; border-radius: 5px; background: transparent; color: var(--ink-faint); font: inherit; font-size: 10px; font-weight: 650; cursor: pointer; }
.mail-compose-format-switch button:hover { color: var(--ink); }
.mail-compose-format-switch button.is-active { background: var(--surface-raised); color: var(--ink); box-shadow: 0 1px 3px rgba(10, 24, 17, .12); }
.mail-compose-format-switch button:disabled { color: var(--ink-faint); cursor: not-allowed; opacity: .38; }
.mail-compose-format-switch button:disabled:hover { color: var(--ink-faint); }
.mail-rich-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 0; padding-left: 3px; border-left: 1px solid var(--line); }
.mail-rich-tools[hidden] { display: none; }
.mail-rich-tools button { width: 25px; height: 26px; min-width: 25px; min-height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.mail-rich-tools button .material-symbols-rounded { font-size: 17px; line-height: 1; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 18; }
.mail-rich-tools button:hover { background: var(--surface-soft); color: var(--green-2); }
.mail-rich-tools .mail-compose-variable-menu-trigger { width: auto; min-width: 0; display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-soft); }
.mail-rich-tools .mail-compose-variable-menu-trigger:hover, .mail-rich-tools .mail-compose-variable-menu-trigger[aria-expanded="true"] { border-color: color-mix(in srgb, var(--green-2) 38%, var(--line)); background: var(--green-soft); color: var(--green-2); }
.mail-rich-tools .mail-compose-variable-menu-trigger > .ui-icon { width: 11px; height: 11px; }
.mail-rich-tools .mail-compose-variable-menu-trigger > span:not(.material-symbols-rounded) { font-size: 10px; font-weight: 650; line-height: 1; }
.mail-rich-tools .mail-compose-variable-menu-trigger > .material-symbols-rounded { margin-right: -3px; font-size: 14px; }
.mail-compose-variable-tools { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.mail-compose-variable-tools > span { margin-right: 2px; color: var(--ink-faint); font-size: 10px; white-space: nowrap; }
.mail-compose-variable-tools button { min-height: 24px; padding: 2px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-raised); color: var(--ink-soft); font: inherit; font-size: 9px; cursor: pointer; }
.mail-compose-variable-tools button:hover { border-color: var(--line-strong); background: var(--surface-soft); color: var(--ink); }
.mail-compose-side-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.mail-ai-rewrite-trigger, .mail-compose-template-trigger { white-space: nowrap; }
.mail-compose-editor-wrap { position: relative; min-height: 280px; display: flex; flex: 1; padding: 16px 18px; }
.mail-compose-rich-editor, .mail-compose-text-editor { width: 100%; min-height: 300px; padding: 0; border: 0; outline: 0; resize: none; background: transparent; color: var(--ink); font: inherit; font-size: var(--text-sm); line-height: 1.7; overflow-wrap: anywhere; }
.mail-compose-rich-editor:empty::before { content: attr(data-placeholder); color: var(--ink-faint); }
.mail-compose-rich-editor img { max-width: 100%; height: auto; box-sizing: border-box; border-radius: 7px; cursor: pointer; }
.mail-compose-rich-editor.is-pretty-template table { width: auto; min-width: 0; }
.mail-compose-rich-editor.is-pretty-template table[width="100%"] { width: 100%; }
.mail-compose-rich-editor.is-pretty-template th { padding: 0; border: 0; color: inherit; font-size: inherit; letter-spacing: normal; text-align: inherit; }
.mail-compose-rich-editor.is-pretty-template td { padding: 0; border: 0; font-size: inherit; }
.mail-compose-rich-editor.is-pretty-template img { border-radius: 0; }
.mail-compose-rich-editor img.is-selected { outline: 2px solid var(--green-2); outline-offset: 3px; }
.mail-compose-image-resize-overlay { position: absolute; z-index: 6; box-sizing: border-box; border: 1px solid color-mix(in srgb, var(--green-2) 68%, transparent); border-radius: 7px; pointer-events: none; }
.mail-compose-image-resize-handle { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; padding: 0; border: 2px solid var(--surface-raised); border-radius: 4px; background: var(--green-2); box-shadow: 0 1px 4px rgba(10, 24, 17, .24); cursor: nwse-resize; pointer-events: auto; touch-action: none; }
body.is-resizing-mail-compose-image, body.is-resizing-mail-compose-image * { cursor: nwse-resize !important; user-select: none !important; }
.mail-compose-rich-editor.is-image-dragover { border-radius: 9px; background: color-mix(in srgb, var(--green-soft) 72%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--green-2) 52%, transparent); }
.mail-compose-text-editor { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.mail-compose-attachments { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 6px 18px; border-top: 1px solid var(--line); }
.mail-attach-button { display: inline-flex; align-items: center; gap: 6px; color: var(--green-2); font-size: var(--text-xs); font-weight: 700; cursor: pointer; white-space: nowrap; }
.mail-attach-button .ui-icon { width: 15px; height: 15px; }
#compose-attachment-list { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
#compose-attachment-list > span { max-width: 190px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 7px; background: var(--surface-soft); color: var(--ink-soft); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#compose-attachment-list button { border: 0; background: transparent; color: var(--ink-faint); cursor: pointer; }
.mail-composer-footer { min-height: 48px; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 8px 16px; border-top: 1px solid var(--line); }
.mail-composer-footer > span { display: none; }
.mail-composer-footer > span.is-visible { min-width: 0; display: block; margin-right: auto; color: var(--ink-faint); font-size: var(--text-xs); line-height: 1.4; }
.mail-composer-footer > div { display: flex; gap: 7px; }
.mail-compose-delete-draft.button.secondary { border-color: color-mix(in srgb, var(--danger) 28%, var(--line)); color: var(--danger); }
.mail-compose-delete-draft.button.secondary:hover { border-color: color-mix(in srgb, var(--danger) 48%, var(--line)); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); color: var(--danger); }
.mail-compose-exit-confirm { position: absolute; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: transparent; pointer-events: none; }
.mail-compose-exit-confirm[hidden] { display: none; }
.mail-compose-exit-confirm-card { width: min(330px, 100%); display: grid; gap: 5px; padding: 18px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface-raised); box-shadow: 0 20px 54px rgba(8, 22, 16, .24); pointer-events: auto; }
.mail-compose-exit-confirm-card > strong { color: var(--ink); font-size: var(--text-md); }
.mail-compose-exit-confirm-card > span { color: var(--ink-faint); font-size: var(--text-xs); }
.mail-compose-exit-confirm-card > footer { display: flex; justify-content: flex-end; gap: 7px; margin-top: 12px; }
.mail-compose-discard-draft.button.secondary { color: var(--danger); }
.mail-compose-send-choice { background: color-mix(in srgb, var(--ink) 12%, transparent); pointer-events: auto; }
.mail-compose-send-choice-card { width: min(420px, 100%); gap: 7px; }
.mail-compose-send-choice-options { display: grid; gap: 8px; margin-top: 10px; }
.mail-compose-send-choice-options > button { width: 100%; min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-soft); font: inherit; text-align: left; cursor: pointer; transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease; }
.mail-compose-send-choice-options > button:hover, .mail-compose-send-choice-options > button:focus-visible { border-color: color-mix(in srgb, var(--green-2) 42%, var(--line)); background: var(--green-soft); outline: 0; transform: translateY(-1px); }
.mail-compose-send-choice-options > button:first-child { border-color: color-mix(in srgb, var(--green-2) 28%, var(--line)); }
.mail-compose-send-choice-options .ui-icon { width: 20px; height: 20px; justify-self: center; color: var(--green-2); }
.mail-compose-send-choice-options span, .mail-compose-send-choice-options strong, .mail-compose-send-choice-options small { min-width: 0; display: block; }
.mail-compose-send-choice-options strong { color: var(--ink); font-size: var(--text-sm); }
.mail-compose-send-choice-options small { margin-top: 2px; color: var(--ink-faint); font-size: 10px; line-height: 1.4; }
.mail-compose-variable-token { display: inline-block; margin: 0 .14em; padding: 0 5px; border: 1px solid color-mix(in srgb, var(--ink-faint) 22%, transparent); border-radius: 5px; background: color-mix(in srgb, var(--ink-faint) 15%, transparent); color: var(--ink-soft); font-size: inherit; font-weight: 500; line-height: 1.45; vertical-align: baseline; white-space: nowrap; cursor: pointer; }
.mail-compose-variable-token:hover, .mail-compose-variable-token:focus { border-color: color-mix(in srgb, var(--green-2) 34%, var(--line)); background: color-mix(in srgb, var(--green-soft) 68%, var(--surface)); color: var(--ink); outline: 0; }
.mail-compose-variable-token.has-suggestion::before { content: ""; width: 4px; height: 4px; display: inline-block; margin-right: 3px; border-radius: 50%; background: var(--green-2); opacity: .7; vertical-align: .14em; }
.mail-compose-variable-token .ui-icon { width: 10px; height: 10px; display: inline-block; margin-left: 3px; color: var(--ink-faint); stroke-width: 1.7; vertical-align: -.1em; }
.mail-compose-popover { position: fixed; z-index: 80; width: min(340px, calc(100vw - 20px)); overflow: hidden; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--surface-raised); box-shadow: 0 18px 45px rgba(10,24,17,.2); }
.mail-compose-popover[hidden] { display: none; }
.mail-subject-suggestions-popover { width: min(540px, calc(100% - 32px)); }
.mail-recipient-picker-popover { width: min(410px, calc(100vw - 20px)); }
.mail-recipient-picker { display: grid; gap: 9px; padding: 11px; }
.mail-recipient-picker > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mail-recipient-picker > header strong, .mail-recipient-picker > header span { display: block; }
.mail-recipient-picker > header strong { color: var(--ink); font-size: var(--text-sm); }
.mail-recipient-picker > header span { margin-top: 2px; color: var(--ink-faint); font-size: 10px; }
.mail-recipient-picker > header > button { width: 24px; height: 24px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--surface-soft); color: var(--ink-faint); cursor: pointer; }
.mail-recipient-picker > header > button .ui-icon { width: 13px; height: 13px; }
.mail-recipient-picker-search { min-height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.mail-recipient-picker-search:focus-within { border-color: var(--green-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-2) 12%, transparent); }
.mail-recipient-picker-search .ui-icon { width: 13px; height: 13px; flex: none; color: var(--ink-faint); }
.mail-recipient-picker-search input { min-width: 0; min-height: 32px; flex: 1; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: var(--text-xs); }
.mail-recipient-picker-list { max-height: 270px; display: grid; gap: 3px; overflow-y: auto; }
.mail-recipient-picker-list > button { width: 100%; min-width: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.mail-recipient-picker-list > button:hover { background: var(--surface-soft); }
.mail-recipient-picker-list > button:disabled { opacity: 1; cursor: default; }
.mail-recipient-picker-list > button:disabled:hover { background: transparent; }
.mail-recipient-picker-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--green-soft); color: var(--green-2); font-size: 10px; font-weight: 800; }
.mail-recipient-picker-copy { min-width: 0; }
.mail-recipient-picker-copy strong, .mail-recipient-picker-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-recipient-picker-copy strong { font-size: var(--text-xs); }
.mail-recipient-picker-copy small { margin-top: 2px; color: var(--ink-faint); font-size: 9px; }
.mail-recipient-picker-state { color: var(--green-2); font-size: 10px; white-space: nowrap; }
.mail-recipient-picker-list > button:disabled .mail-recipient-picker-state { color: var(--ink-faint); }
.mail-recipient-picker-empty { padding: 24px 12px; color: var(--ink-faint); font-size: var(--text-xs); text-align: center; }
.mail-compose-contact-popover { width: min(286px, calc(100vw - 20px)); min-width: 0; max-width: calc(100vw - 20px); padding: 10px; }
.mail-compose-contact-popover .mail-contact-tooltip-head { align-items: flex-start; }
.mail-compose-contact-popover .mail-contact-tooltip-copy > div { min-width: 0; flex-wrap: wrap; gap: 4px 6px; }
.mail-compose-contact-popover strong,
.mail-compose-contact-popover .mail-contact-tooltip-role { max-width: 100%; }
.mail-compose-contact-popover .mail-contact-tooltip-role { white-space: normal; overflow-wrap: anywhere; }
.mail-compose-contact-title { display: block; margin-top: 3px; color: var(--ink-faint); font-size: 12px; line-height: 1.35; }
.mail-compose-contact-popover .mail-contact-tooltip-copy p { width: 100%; align-items: flex-start; line-height: 1.35; }
.mail-compose-contact-popover .mail-contact-tooltip-copy p > span { flex: 1; max-width: none; overflow: visible; text-overflow: clip; white-space: normal; word-break: break-all; }
.mail-compose-contact-popover .mail-contact-tooltip-copy-button { flex: 0 0 auto; margin-top: -1px; }
.mail-compose-contact-popover .mail-contact-tooltip-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mail-compose-contact-popover .mail-contact-tooltip-action { width: 100%; }
.mail-compose-image-popover { width: min(320px, calc(100vw - 20px)); padding: 10px; }
.mail-compose-image-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mail-compose-image-controls > span { color: var(--ink-soft); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.mail-compose-image-controls > span b { color: var(--green-2); font: inherit; }
.mail-compose-image-controls > span small { display: block; margin-top: 2px; color: var(--ink-faint); font-size: 9px; font-weight: 500; }
.mail-compose-image-controls > div { display: flex; align-items: center; gap: 4px; }
.mail-compose-image-controls button { min-width: 34px; height: 28px; padding: 0 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-raised); color: var(--ink-soft); font: inherit; font-size: 10px; cursor: pointer; }
.mail-compose-image-controls button:hover, .mail-compose-image-controls button.is-active { border-color: color-mix(in srgb, var(--green-2) 45%, var(--line)); background: var(--green-soft); color: var(--green-2); }
.mail-compose-image-controls button.is-danger { color: var(--danger); }
.mail-compose-image-controls button.is-danger:hover { border-color: color-mix(in srgb, var(--danger) 36%, var(--line)); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); color: var(--danger); }
.mail-compose-template-popover { width: min(390px, calc(100vw - 20px)); }
.mail-compose-variable-menu-popover { width: min(318px, calc(100vw - 20px)); }
.mail-compose-template-picker { display: grid; gap: 8px; padding: 11px; }
.mail-compose-template-picker > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mail-compose-template-picker > header strong, .mail-compose-template-picker > header span { display: block; }
.mail-compose-template-picker > header strong { color: var(--ink); font-size: var(--text-sm); }
.mail-compose-template-picker > header span { margin-top: 2px; color: var(--ink-faint); font-size: 10px; }
.mail-compose-template-picker > header > button { width: 24px; height: 24px; display: grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: 50%; background: var(--surface-soft); color: var(--ink-faint); cursor: pointer; }
.mail-compose-template-picker > header > button .ui-icon { width: 13px; height: 13px; }
.mail-compose-template-options { max-height: 285px; display: grid; gap: 4px; overflow-y: auto; }
.mail-compose-template-options > button { width: 100%; min-width: 0; display: grid; gap: 3px; padding: 8px 9px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink-soft); font: inherit; text-align: left; cursor: pointer; }
.mail-compose-template-options > button:hover, .mail-compose-template-options > button.is-active { border-color: var(--line); background: var(--surface-soft); color: var(--ink); }
.mail-compose-template-options > button > span { min-width: 0; display: flex; align-items: center; gap: 6px; }
.mail-compose-template-options strong, .mail-compose-template-options small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-compose-template-options strong { font-size: var(--text-xs); }
.mail-compose-template-options em { padding: 1px 5px; border-radius: 999px; background: var(--green-soft); color: var(--green-2); font-size: 9px; font-style: normal; }
.mail-compose-template-options small { color: var(--ink-faint); font-size: 10px; }
.mail-compose-variable-menu-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.mail-compose-variable-menu-options > button { width: 100%; min-width: 0; min-height: 50px; display: grid; grid-template-columns: minmax(0, 1fr) 13px; align-items: center; gap: 7px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-soft); font: inherit; text-align: left; cursor: pointer; }
.mail-compose-variable-menu-options > button:hover { border-color: color-mix(in srgb, var(--green-2) 36%, var(--line)); background: var(--green-soft); color: var(--ink); }
.mail-compose-variable-menu-options > button > span { min-width: 0; }
.mail-compose-variable-menu-options strong, .mail-compose-variable-menu-options small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-compose-variable-menu-options strong { font-size: var(--text-xs); }
.mail-compose-variable-menu-options small { margin-top: 3px; color: var(--ink-faint); font-size: 9px; }
.mail-compose-variable-menu-options .ui-icon { width: 13px; height: 13px; color: var(--green-2); }
.mail-compose-popover-form { display: grid; gap: 10px; padding: 11px; }
.mail-compose-popover-form > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mail-compose-popover-form > header strong, .mail-compose-popover-form > header span { display: block; }
.mail-compose-popover-form > header strong { color: var(--ink); font-size: var(--text-sm); }
.mail-compose-popover-form > header span { margin-top: 2px; color: var(--ink-faint); font-size: 10px; line-height: 1.4; }
.mail-compose-popover-form > header > button { width: 24px; height: 24px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--surface-soft); color: var(--ink-faint); cursor: pointer; }
.mail-compose-popover-form > header > button .ui-icon { width: 13px; height: 13px; }
.mail-compose-popover-form > label > span { display: block; margin-bottom: 5px; color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.mail-compose-popover-form > label > input { width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: none; font-size: var(--text-xs); }
.mail-compose-popover-form > footer { display: flex; justify-content: flex-end; gap: 6px; padding-top: 1px; }
.mail-compose-suggestion { width: 100%; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); color: var(--ink-soft); font: inherit; text-align: left; cursor: pointer; }
.mail-compose-suggestion:hover { border-color: var(--line-strong); background: var(--green-soft); }
.mail-compose-suggestion > span { padding: 2px 5px; border-radius: 999px; background: var(--surface-raised); color: var(--green-2); font-size: 9px; font-weight: 700; }
.mail-compose-suggestion > strong { min-width: 0; overflow: hidden; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.mail-compose-popover-note { margin: 0; color: var(--ink-faint); font-size: var(--text-xs); line-height: 1.45; }
.mail-compose-variable-popover { width: min(330px, calc(100vw - 20px)); border-color: color-mix(in srgb, var(--line-strong) 82%, transparent); border-radius: 12px; box-shadow: 0 16px 38px rgba(10, 24, 17, .16); }
.mail-compose-variable-form { gap: 0; padding: 0; }
.mail-compose-variable-form > header { align-items: center; padding: 12px 12px 8px; }
.mail-compose-variable-form > header > strong { font-size: var(--text-sm); }
.mail-compose-variable-form > header > button { background: transparent; }
.mail-compose-variable-form > header > button:hover { background: var(--surface-soft); color: var(--ink); }
.mail-compose-variable-field { margin: 0 12px; }
.mail-compose-variable-field > input { width: 100%; min-height: 38px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-raised); box-shadow: none; color: var(--ink); font: inherit; font-size: var(--text-sm); }
.mail-compose-variable-field > input:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-2) 12%, transparent); outline: 0; }
.mail-compose-variable-form > .mail-compose-suggestion { width: auto; grid-template-columns: auto minmax(0, 1fr) auto; margin: 8px 12px 0; padding: 7px 10px; border: 0; background: transparent; }
.mail-compose-variable-form > .mail-compose-suggestion:hover { background: var(--green-soft); }
.mail-compose-variable-form > .mail-compose-suggestion > span { margin: 0; }
.mail-compose-variable-form > .mail-compose-suggestion > strong { color: var(--ink); font-size: var(--text-xs); }
.mail-compose-variable-form > .mail-compose-suggestion > em { color: var(--green-2); font-size: 10px; font-style: normal; font-weight: 700; }
.mail-compose-variable-form > .mail-compose-popover-note { display: grid; gap: 2px; margin: 8px 12px 0; padding: 8px 10px; border-radius: 8px; background: var(--surface-soft); }
.mail-compose-variable-form > .mail-compose-popover-note strong { color: var(--ink-soft); font-size: 10px; }
.mail-compose-variable-form > .mail-compose-popover-note span { font-size: 10px; }
.mail-compose-variable-form > footer { align-items: center; justify-content: flex-end; gap: 6px; margin-top: 10px; padding: 9px 12px 11px; }
.mail-compose-variable-token.is-batch.is-confirmed { border-color: color-mix(in srgb, var(--green-2) 30%, var(--line)); background: color-mix(in srgb, var(--green-soft) 72%, var(--surface)); color: var(--ink); }
.mail-compose-variable-popover:has(.mail-compose-batch-variable-form) { width: min(640px, calc(100vw - 20px)); }
.mail-compose-variable-popover:has(.mail-compose-batch-variable-shared) { width: min(420px, calc(100vw - 20px)); }
.mail-compose-batch-variable-form { gap: 0; padding: 0; }
.mail-compose-batch-variable-form > header { align-items: center; padding: 12px; }
.mail-compose-batch-variable-form > header > strong { font-size: var(--text-sm); }
.mail-compose-batch-variable-shared { display: flex; align-items: center; gap: 8px; padding: 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mail-compose-batch-variable-shared > input { width: 100%; min-width: 0; min-height: 36px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: none; color: var(--ink); font: inherit; font-size: var(--text-xs); }
.mail-compose-batch-variable-shared > input:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-2) 11%, transparent); outline: 0; }
.mail-compose-batch-variable-shared > button { flex: none; white-space: nowrap; }
.mail-compose-batch-variable-list { max-height: min(430px, calc(100dvh - 260px)); display: grid; overflow-y: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mail-compose-batch-variable-row { min-width: 0; display: grid; grid-template-columns: minmax(150px, .72fr) minmax(220px, 1.28fr); align-items: center; gap: 12px; padding: 9px 12px; background: var(--surface-raised); }
.mail-compose-batch-variable-row + .mail-compose-batch-variable-row { border-top: 1px solid var(--line); }
.mail-compose-batch-variable-row:hover { background: var(--surface-soft); }
.mail-compose-batch-variable-person, .mail-compose-batch-variable-input { min-width: 0; }
.mail-compose-batch-variable-person b, .mail-compose-batch-variable-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-compose-batch-variable-person b { color: var(--ink); font-size: var(--text-xs); }
.mail-compose-batch-variable-person small { margin-top: 3px; color: var(--ink-faint); font-size: 9px; }
.mail-compose-batch-variable-input > input { width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: none; color: var(--ink); font: inherit; font-size: var(--text-xs); }
.mail-compose-batch-variable-input > input:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-2) 11%, transparent); outline: 0; }
.mail-compose-batch-variable-row.is-missing .mail-compose-batch-variable-input > input { border-color: color-mix(in srgb, var(--warning-ink) 38%, var(--line)); background: color-mix(in srgb, var(--warning) 36%, var(--surface)); }
.mail-compose-batch-variable-form > footer { min-height: 50px; align-items: center; justify-content: flex-end; gap: 6px; padding: 9px 12px 10px; }
@media (max-width: 720px) {
  .mail-compose-batch-overview, .mail-compose-batch-variable-row { grid-template-columns: 1fr; }
  .mail-compose-batch-variable-state { padding: 9px 0 0; border-top: 1px solid var(--line); border-left: 0; }
}
.mail-subject-suggestions-form { gap: 0; padding: 0; }
.mail-subject-suggestions-form > header { align-items: center; padding: 14px 15px 12px; border-bottom: 1px solid var(--line); }
.mail-subject-suggestions-form > header strong { font-size: var(--text-label); }
.mail-subject-suggestions-form > header span { margin-top: 3px; font-size: var(--text-xs); }
.mail-subject-suggestion-list { height: 270px; max-height: calc(100dvh - 210px); display: grid; align-content: start; gap: 6px; padding: 10px 12px; overflow-y: auto; }
.mail-subject-suggestion-list.is-state { place-items: center; align-content: center; }
.mail-subject-suggestion-list.is-state > .mail-compose-popover-loading, .mail-subject-suggestion-list.is-state > .mail-compose-popover-error { max-width: 300px; justify-items: center; padding: 18px; text-align: center; }
.mail-subject-suggestion-list label { position: relative; min-width: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 44px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.45; cursor: pointer; }
.mail-subject-suggestion-list label:hover { border-color: var(--line-strong); background: var(--surface-soft); color: var(--ink); }
.mail-subject-suggestion-list input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mail-subject-suggestion-index { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-soft); color: var(--ink-faint); font-size: 10px; font-weight: 750; }
.mail-subject-suggestion-text { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.mail-subject-suggestion-list label:has(input:checked) { border-color: color-mix(in srgb, var(--green-2) 42%, var(--line)); background: var(--green-soft); color: var(--ink); }
.mail-subject-suggestion-list label:has(input:checked) .mail-subject-suggestion-index { background: var(--green-2); color: white; }
.mail-subject-suggestions-form > footer { min-height: 52px; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface-soft) 60%, var(--surface-raised)); }
.mail-subject-suggestions-form > footer > span { min-width: 0; color: var(--ink-faint); font-size: 10px; }
.mail-subject-suggestions-form > footer > div { display: flex; align-items: center; gap: 6px; }
.mail-compose-popover-loading, .mail-compose-popover-error { display: grid; justify-items: start; gap: 4px; padding: 14px; color: var(--ink-soft); }
.mail-compose-popover-loading > span { width: 8px; height: 8px; margin-bottom: 3px; border-radius: 50%; background: var(--green-2); animation: mailLoadPulse 1s ease-in-out infinite; }
.mail-compose-popover-loading strong, .mail-compose-popover-error strong { color: var(--ink); font-size: var(--text-sm); }
.mail-compose-popover-loading small, .mail-compose-popover-error span { color: var(--ink-faint); font-size: var(--text-xs); line-height: 1.45; }
.mail-compose-popover-error .button { margin-top: 7px; }
@media (max-width: 620px) {
  .mail-compose-copy-fields { grid-template-columns: 1fr; }
  .mail-compose-copy-fields > label:first-child { padding-right: 0; }
  .mail-compose-copy-fields > label:last-child { padding-left: 0; border-left: 0; }
}
.outreach-batch-ai-summary { display: grid; gap: 3px; padding: 10px 11px; border-radius: 9px; background: var(--surface-soft); }
.outreach-batch-ai-summary strong { font-size: var(--text-sm); }
.outreach-batch-ai-summary span { color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.5; }
.mail-ai-rewrite-modal { width: min(620px, calc(100vw - 32px)); }
.mail-ai-rewrite-body { display: grid; align-content: start; gap: 10px; }
.mail-ai-rewrite-body textarea { min-height: 112px; resize: vertical; line-height: 1.6; }
.mail-ai-rewrite-body > p { margin: 0; color: var(--ink-faint); font-size: var(--text-xs); line-height: 1.55; }
.mail-ai-rewrite-preview { display: grid; gap: 9px; max-height: 330px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); overflow-y: auto; }
.mail-ai-rewrite-preview[hidden] { display: none; }
.mail-ai-rewrite-preview > div { display: grid; gap: 5px; }
.mail-ai-rewrite-preview span { color: var(--ink-faint); font-size: 10px; font-weight: 700; }
.mail-ai-rewrite-preview strong { color: var(--ink); font-size: var(--text-sm); line-height: 1.5; }
#mail-ai-rewrite-preview-body { padding: 9px 10px; border-radius: 8px; background: var(--surface-raised); color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.65; white-space: normal; }
.mail-empty-state { min-height: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; color: var(--ink-faint); text-align: center; }
.mail-empty-state.compact { min-height: 260px; }
.mail-empty-state strong { margin-top: 11px; color: var(--ink-soft); font-size: var(--text-sm); }
.mail-empty-state p { max-width: 290px; margin: 5px 0 0; font-size: var(--text-xs); line-height: 1.6; }
.mail-empty-state .button { margin-top: 14px; }
.mail-empty-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--green-2); }
.mail-empty-icon .ui-icon { width: 20px; height: 20px; }
.mail-today-summary-view { min-height: 0; display: flex; flex: 1; overflow: hidden; }
.mail-today-summary-view > .ai-decision-guide { width: 100%; }
.mail-summary-guide-result > header > div:nth-child(2) { min-width: 0; }
.mail-summary-guide-result-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.mail-summary-guide-result-actions > small { color: var(--ink-faint); font-size: 10px; white-space: nowrap; }
.mail-summary-guide-answer .mail-summary-reference { color: var(--green-2); font-weight: 400; text-decoration: none; cursor: pointer; }
.mail-summary-guide-answer .mail-summary-reference:hover { color: var(--green); text-decoration: none; }
.mail-summary-guide-result.is-streaming .mail-summary-guide-answer::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 3px; border-radius: 1px; background: var(--green-2); vertical-align: -2px; animation: markdown-stream-cursor .85s steps(1, end) infinite; }
.mail-summary-guide-result.is-error .mail-summary-guide-answer { display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; }
.mail-summary-guide .contact-decision-history-list > button.is-active { background: var(--green-soft); color: var(--green-2); }
@media (max-width: 820px) {
  .mail-summary-guide-result-actions > small { display: none; }
}

.contacts-page { max-width: 1440px; margin: 0 auto; }
.topbar-contacts-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.topbar-contacts-actions[hidden] { display: none; }
.contacts-search { width: 220px; height: var(--control-height-compact); display: flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--control-radius-compact); background: var(--surface-raised); }
.contacts-search:focus-within { border-color: var(--green-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-2) 12%, transparent); }
.contacts-search .ui-icon { width: 14px; height: 14px; flex: none; color: var(--ink-faint); }
.contacts-search input { min-width: 0; min-height: 0; height: calc(var(--control-height-compact) - 2px); padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: var(--text-xs); }
.topbar-mail-search,
.topbar-landscape-search,
.topbar-contacts-actions .contacts-search,
.mail-recipient-picker-search {
  height: var(--control-height-compact);
  min-height: var(--control-height-compact);
  gap: 5px;
  padding: 0 8px;
  border-radius: var(--control-radius-compact);
}
.topbar-mail-search,
.topbar-landscape-search,
.topbar-contacts-actions .contacts-search {
  width: 190px;
  flex: 0 0 190px;
}
.topbar-mail-search input,
.topbar-landscape-search input,
.topbar-contacts-actions .contacts-search input,
.mail-recipient-picker-search input {
  height: calc(var(--control-height-compact) - 2px);
  min-height: 0;
  padding: 0;
  font-size: var(--text-xs);
}
.topbar-mail-search .ui-icon,
.topbar-landscape-search .ui-icon,
.topbar-contacts-actions .contacts-search .ui-icon,
.mail-recipient-picker-search .ui-icon {
  width: 13px;
  height: 13px;
  margin-left: 0;
}
.contacts-workspace { position: relative; min-height: calc(100vh - 150px); display: grid; grid-template-columns: clamp(245px, 26%, 300px) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); transition: grid-template-columns .22s ease; }
.contacts-list-pane { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface)); opacity: 1; transform: translateX(0); transition: opacity .16s ease, transform .22s ease, border-color .16s ease; }
.contacts-list-head { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; border-bottom: 1px solid var(--line); }
.contacts-list-head span, .contacts-list-head strong { display: block; }
.contacts-list-head span { color: var(--ink-faint); font-size: var(--text-xs); }
.contacts-list-head strong { margin-top: 1px; font-size: var(--text-sm); }
.outreach-library-head .button { flex: none; }
.outreach-library-head .button.active { border-color: var(--line-strong); background: var(--surface-soft); color: var(--ink); }
.outreach-batch-bar { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px 6px 13px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--green-soft) 42%, var(--surface)); }
.outreach-batch-bar[hidden] { display: none; }
.outreach-batch-select-all { min-width: 0; display: grid; grid-template-columns: 15px auto; align-items: center; gap: 2px 6px; color: var(--ink-soft); font-size: var(--text-xs); cursor: pointer; }
.outreach-batch-select-all input { width: 15px; height: 15px; margin: 0; accent-color: var(--green-2); }
.outreach-batch-select-all small { grid-column: 2; color: var(--ink-faint); font-size: 9px; }
.outreach-batch-actions { display: flex; align-items: center; gap: 5px; }
.outreach-batch-actions .button { min-width: 56px; justify-content: center; padding-inline: 10px; }
.outreach-batch-mail-wrap { position: relative; }
.outreach-batch-mail-menu { z-index: 48; width: 218px; }
.contacts-list-tools { display: flex; align-items: center; gap: 6px; }
.contacts-list-tool { width: 34px; height: 34px; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-raised); color: var(--ink-faint); cursor: pointer; }
.contacts-list-tool:hover { border-color: color-mix(in srgb, var(--green-2) 35%, var(--line)); color: var(--green-2); background: var(--surface-soft); }
.contacts-list-tool .ui-icon, .contacts-list-expand-tab .ui-icon { width: 17px; height: 17px; stroke-width: 1.55; }
.contacts-sort-wrap { position: relative; }
.contacts-sort-menu { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; min-width: 154px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); box-shadow: 0 14px 34px rgba(10,24,17,.16); }
.contacts-sort-menu[hidden] { display: none; }
.contacts-sort-menu button { width: 100%; min-height: 34px; display: grid; grid-template-columns: 16px minmax(0, 1fr) 14px; align-items: center; gap: 9px; padding: 7px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-soft); font: inherit; font-size: var(--text-xs); text-align: left; white-space: nowrap; cursor: pointer; }
.contacts-sort-menu button:hover, .contacts-sort-menu button.active { background: var(--surface-soft); color: var(--ink); }
.contacts-sort-menu button .ui-icon { width: 14px; height: 14px; }
.contacts-sort-menu .contact-sort-option-icon { width: 16px; height: 16px; color: var(--ink-faint); }
.contacts-sort-menu button:hover .contact-sort-option-icon, .contacts-sort-menu button.active .contact-sort-option-icon { color: var(--green-2); }
.contacts-sort-menu .contact-sort-check { color: var(--green-2); opacity: 0; }
.contacts-sort-menu button.active .contact-sort-check { opacity: 1; }
.contacts-list-expand-tab { position: absolute; z-index: 25; top: 13px; left: -1px; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-left: 0; border-radius: 0 9px 9px 0; background: var(--surface-raised); color: var(--ink-faint); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-8px); transition: opacity .15s ease, transform .2s ease, visibility 0s linear .2s, color .15s ease, background-color .15s ease; cursor: pointer; }
.contacts-workspace.contacts-list-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.contacts-workspace.contacts-list-collapsed .contacts-list-pane { opacity: 0; transform: translateX(-12px); border-right-color: transparent; pointer-events: none; }
.contacts-workspace.contacts-list-collapsed .contacts-list-expand-tab { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); transition-delay: .08s, .08s, 0s, 0s, 0s; }
.contacts-workspace.contacts-list-collapsed .contacts-list-expand-tab:hover { color: var(--green-2); background: var(--surface-soft); }
.contacts-workspace.contacts-list-collapsed .contact-profile-head { padding-left: 54px; }
.contacts-list { min-height: 0; overflow-y: auto; }
.contact-list-item { width: 100%; min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 12px 13px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.contact-list-item:hover { background: var(--surface-soft); }
.contact-list-item.active { box-shadow: inset 3px 0 0 var(--green-2); background: var(--green-soft); }
.outreach-batch-contact-item { grid-template-columns: 16px minmax(0, 1fr) auto; cursor: pointer; }
.outreach-batch-contact-item > input { width: 15px; height: 15px; margin: 0; accent-color: var(--green-2); }
.outreach-batch-contact-item.is-selected { background: var(--green-soft); box-shadow: inset 3px 0 0 var(--green-2); }
.contact-list-avatar, .contact-profile-avatar { display: grid; place-items: center; border-radius: 11px; background: var(--green-soft); color: var(--green-2); font-weight: 800; }
.contact-list-avatar { width: 34px; height: 34px; border-radius: 10px; font-size: 11px; }
.contact-list-copy { min-width: 0; }
.contact-list-copy strong, .contact-list-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-list-copy strong { font-size: var(--text-label); }
.contact-list-copy span { margin-top: 2px; color: var(--ink-faint); font-size: var(--text-xs); }
.contact-list-mail-count { min-width: 23px; padding: 3px 6px; border-radius: 999px; background: var(--surface-raised); color: var(--ink-faint); font-size: 10px; text-align: center; }
.contact-detail-pane { min-width: 0; background: var(--surface-raised); }
.contacts-empty-state { min-height: 480px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; color: var(--ink-faint); text-align: center; }
.contacts-empty-state > span { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--green-2); }
.contacts-empty-state > span .ui-icon { width: 23px; height: 23px; }
.contacts-empty-state > strong { margin-top: 13px; color: var(--ink); font-size: var(--text-lg); }
.contacts-empty-state > p { max-width: 330px; margin: 5px 0 15px; font-size: var(--text-xs); line-height: 1.6; }
.contacts-decision-empty { min-height: 100%; justify-content: center; overflow: hidden; padding-block: 34px; transform: translateY(-42px); transition: padding .48s cubic-bezier(.22, 1, .36, 1), transform .48s cubic-bezier(.22, 1, .36, 1); }
.contacts-decision-empty.is-engaged { height: 100%; justify-content: flex-start; padding-block: 18px 28px; transform: translateY(0); }
.contact-decision-intro { width: min(650px, 100%); max-height: 112px; display: flex; flex-direction: column; align-items: center; gap: 0; overflow: hidden; margin-bottom: 22px; opacity: 1; text-align: center; transform: translateY(0); transition: max-height .42s cubic-bezier(.22, 1, .36, 1), margin .42s cubic-bezier(.22, 1, .36, 1), opacity .28s ease, transform .34s ease; }
.contacts-decision-empty.is-engaged .contact-decision-intro { max-height: 0; margin-bottom: 0; opacity: 0; pointer-events: none; transform: translateY(-10px); }
.contact-decision-intro > .contacts-empty-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: none; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--green-2); }
.contact-decision-intro > .contacts-empty-icon .ui-icon { width: 20px; height: 20px; }
.contact-decision-intro > div { min-width: 0; }
.contact-decision-intro strong { display: block; margin: 11px 0 0; color: var(--ink); font-size: var(--text-lg); }
.contact-decision-panel { width: min(650px, 100%); color: var(--ink); text-align: left; }
.contacts-decision-empty.is-engaged .contact-decision-panel { min-height: 0; display: flex; flex: 1; flex-direction: column; }
.contacts-decision-empty.is-preparing .contact-decision-result { display: none; }
.contacts-decision-empty.is-entering .contact-decision-panel { animation: contactDecisionPanelRise .56s cubic-bezier(.22, 1, .36, 1) both; }
.contacts-decision-empty.is-entering .contact-decision-result { animation: contactDecisionResultReveal .7s cubic-bezier(.22, 1, .36, 1) .22s both; }
.contact-decision-panel > header { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 9px; }
.contact-decision-heading { min-width: 0; }
.contact-decision-heading span, .contact-decision-heading strong { display: inline; }
.contact-decision-heading span { margin-left: 8px; color: var(--ink-faint); font-size: 10px; font-weight: 500; letter-spacing: 0; }
.contact-decision-heading strong { margin: 0; color: var(--ink); font-size: var(--text-sm); }
.contact-decision-tools { display: flex; align-items: center; gap: 2px; flex: none; }
.contact-decision-tool-button { width: 30px; height: 30px; display: grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink-faint); cursor: pointer; transition: color .16s ease, background .16s ease, transform .16s ease; }
.contact-decision-tool-button:hover { background: var(--surface-soft); color: var(--green-2); }
.contact-decision-tool-button:active { transform: scale(.94); }
[data-contact-decision-refresh]:active { transform: rotate(18deg) scale(.94); }
.contact-decision-tool-button:disabled { opacity: .42; cursor: wait; }
.contact-decision-tool-button .ui-icon { width: 15px; height: 15px; }
.contact-decision-history-wrap { position: relative; }
.contact-decision-history-menu { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; width: min(310px, calc(100vw - 38px)); overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-raised); box-shadow: var(--shadow); }
.contact-decision-history-menu[hidden] { display: none; }
.contact-decision-history-menu > header { min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-bottom: 1px solid var(--line); }
.contact-decision-history-menu > header strong { color: var(--ink); font-size: var(--text-xs); }
.contact-decision-history-menu > header span { color: var(--ink-faint); font-size: 10px; }
.contact-decision-history-menu > header > div { display: flex; align-items: center; gap: 7px; }
.contact-decision-history-clear { padding: 2px 0 2px 7px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--ink-faint); font: inherit; font-size: 10px; cursor: pointer; }
.contact-decision-history-clear:hover { color: var(--danger); }
.contact-decision-history-clear:disabled { opacity: .42; cursor: default; }
.contact-decision-history-list { max-height: 280px; overflow-y: auto; }
.contact-decision-history-list > button { width: 100%; min-height: 46px; display: grid; gap: 3px; padding: 8px 11px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink-soft); font: inherit; text-align: left; cursor: pointer; }
.contact-decision-history-list > button:last-child { border-bottom: 0; }
.contact-decision-history-list > button:hover { background: var(--surface-soft); color: var(--ink); }
.contact-decision-history-list span { overflow: hidden; font-size: var(--text-xs); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.contact-decision-history-list small { color: var(--ink-faint); font-size: 10px; }
.contact-decision-history-empty { min-height: 92px; display: grid; place-content: center; gap: 4px; padding: 16px; color: var(--ink-faint); text-align: center; }
.contact-decision-history-empty span { color: var(--ink-soft); font-size: var(--text-xs); font-weight: 600; }
.contact-decision-history-empty small { font-size: 10px; }
.contact-decision-questions { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; }
.contact-decision-questions button { max-width: 100%; padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--ink-soft); font: inherit; font-size: var(--text-xs); line-height: 1.35; text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.contact-decision-questions button:hover, .contact-decision-questions button.is-active { border-color: color-mix(in srgb, var(--green-2) 42%, var(--line)); background: var(--green-soft); color: var(--green-2); }
.contact-decision-questions button:disabled { cursor: wait; }
.contact-decision-result { margin-top: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.contacts-decision-empty.is-engaged .contact-decision-result { min-height: 0; display: flex; flex: 1; flex-direction: column; }
.contact-decision-result > header { display: flex; align-items: center; gap: 9px; padding: 11px 13px 4px; }
.contact-decision-result > header > span { width: 28px; height: 28px; display: grid; place-items: center; flex: none; border-radius: 8px; background: var(--green-soft); color: var(--green-2); }
.contact-decision-result > header > span .ui-icon { width: 15px; height: 15px; }
.contact-decision-result > header small, .contact-decision-result > header strong { display: block; }
.contact-decision-result > header small { color: var(--ink-faint); font-size: 9px; }
.contact-decision-result > header strong { margin: 1px 0 0; color: var(--ink); font-size: var(--text-xs); }
.ai-guide-result > header > div:nth-child(2) > strong { margin: 0; font-size: var(--text-sm); line-height: 1.4; }
.contact-decision-answer { max-height: 360px; overflow: auto; padding: 10px 14px 15px; color: var(--ink); font-size: var(--text-xs); line-height: 1.65; }
.contacts-decision-empty.is-engaged .contact-decision-answer { min-height: 0; max-height: none; flex: 1; }
.contact-decision-answer strong { display: inline; margin: 0; color: inherit; font-size: inherit; }
.contact-decision-answer p { max-width: none; margin: 0 0 8px; font-size: inherit; line-height: inherit; }
.contact-decision-answer h1, .contact-decision-answer h2, .contact-decision-answer h3, .contact-decision-answer h4 { margin: 11px 0 6px; font-size: 1em; line-height: 1.5; }
.contact-decision-answer .markdown-table-wrap { margin-block: 8px; }
.contact-decision-answer table { font-size: 11px; }
.contact-decision-answer th, .contact-decision-answer td { min-width: 68px; padding: 6px 7px; }
.contact-decision-answer .contact-decision-reference { color: var(--green-2); font-weight: 400; text-decoration: none; cursor: pointer; }
.contact-decision-answer .contact-decision-reference:hover { color: var(--green); text-decoration: none; }
.contact-decision-result > .ai-message-sources { margin: 0 14px 13px; }
.contact-decision-loading { min-height: 44px; display: flex; align-items: center; gap: 10px; }
.contact-decision-loading > span { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--green-2); animation: mailLoadPulse 1s ease-in-out infinite; }
.contact-decision-answer .contact-decision-loading > p { min-height: 18px; display: flex; align-items: center; max-width: none; margin: 0; color: var(--ink-faint); font-size: var(--text-xs); line-height: 1.4; }
.contacts-empty-state .contact-decision-error { max-width: none; margin: 0; color: var(--ink-faint); font-size: var(--text-xs); }
@keyframes contactDecisionPanelRise {
  from { transform: translateY(clamp(76px, 12vh, 126px)); }
  to { transform: translateY(0); }
}
@keyframes contactDecisionResultReveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .contacts-decision-empty, .contact-decision-intro { transition: none; }
  .contacts-decision-empty.is-entering .contact-decision-panel,
  .contacts-decision-empty.is-entering .contact-decision-result { animation: none; }
}
.contact-profile-head { container-name: contact-profile-head; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.contact-profile-identity { min-width: 0; display: flex; align-items: center; gap: 11px; }
.contact-profile-identity-toggle { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.contact-profile-identity-toggle:hover h2 { color: var(--green-2); }
.contact-profile-identity > div { min-width: 0; }
.contact-profile-avatar { width: 40px; height: 40px; flex: none; border-radius: 10px; font-size: var(--text-sm); }
.contact-profile-identity h2 { overflow: hidden; font-size: var(--title-sm); text-overflow: ellipsis; white-space: nowrap; }
.contact-profile-identity p { margin: 2px 0 0; overflow: hidden; color: var(--ink-soft); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.contact-profile-head.is-expanded .contact-profile-identity { align-items: flex-start; }
.contact-profile-head.is-expanded .contact-profile-identity p { overflow: visible; line-height: 1.5; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
.contact-profile-expand-icon { width: 15px; height: 15px; flex: none; margin-left: auto; color: var(--ink-faint); transition: transform .18s ease, color .18s ease; }
.contact-profile-identity-toggle:hover .contact-profile-expand-icon { color: var(--green-2); }
.contact-profile-identity-toggle[aria-expanded="true"] .contact-profile-expand-icon { transform: rotate(180deg); }
.contact-profile-details { grid-column: 1 / -1; min-width: 0; padding-top: 13px; border-top: 1px solid var(--line); }
.contact-profile-details-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.contact-profile-details-head > div { min-width: 0; }
.contact-profile-details-head strong, .contact-profile-details-head span { display: block; }
.contact-profile-details-head strong { font-size: var(--text-label); }
.contact-profile-details-head span { margin-top: 2px; color: var(--ink-faint); font-size: 10px; }
.contact-profile-details-title { position: relative; }
.contact-profile-source-tooltip { position: relative; margin-top: 2px; }
.contact-profile-source-tooltip summary { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-faint); font-size: 10px; list-style: none; cursor: pointer; }
.contact-profile-source-tooltip summary::-webkit-details-marker { display: none; }
.contact-profile-source-tooltip summary span { margin: 0; }
.contact-profile-source-tooltip summary .ui-icon { width: 10px; height: 10px; transition: transform .16s ease; }
.contact-profile-source-tooltip[open] summary .ui-icon { transform: rotate(180deg); }
.contact-profile-source-tooltip > div { position: absolute; z-index: 44; top: calc(100% + 6px); left: 0; width: min(380px, 72vw); max-height: 220px; display: grid; gap: 2px; padding: 6px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); box-shadow: 0 14px 34px rgba(10,24,17,.16); }
.contact-profile-source-tooltip a { min-width: 0; display: flex; align-items: center; gap: 5px; padding: 7px 8px; border-radius: 7px; color: var(--green-2); font-size: 10px; line-height: 1.35; text-decoration: none; }
.contact-profile-source-tooltip a:hover { background: var(--surface-soft); }
.contact-profile-source-tooltip a .ui-icon { width: 11px; height: 11px; flex: none; }
.contact-profile-details-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.contact-profile-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 11px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.contact-profile-facts > div { min-width: 0; padding: 9px 10px; background: var(--surface-soft); }
.contact-profile-facts > div + div { border-left: 1px solid var(--line); }
.contact-profile-facts span, .contact-profile-facts strong { display: block; }
.contact-profile-facts span { color: var(--ink-faint); font-size: 9px; }
.contact-profile-facts strong { margin-top: 3px; overflow: hidden; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.contact-profile-facts strong.is-empty { color: var(--ink-faint); font-weight: 500; }
.contact-profile-research-copy { display: grid; gap: 8px; margin-top: 10px; }
.contact-profile-research-copy p { margin: 0; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.55; }
.contact-profile-research-copy ul { display: grid; gap: 3px; margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.45; }
.contact-profile-research-copy > div { display: flex; flex-wrap: wrap; gap: 5px; }
.contact-profile-research-copy > div span { padding: 4px 7px; border-radius: 999px; background: var(--green-soft); color: var(--green-2); font-size: 9px; font-weight: 650; }
.contact-profile-details-empty { margin: 10px 0 0; color: var(--ink-faint); font-size: var(--text-xs); line-height: 1.55; }
.contact-profile-research-error { display: flex; align-items: flex-start; gap: 6px; margin-top: 9px; padding: 7px 9px; border-radius: 8px; background: color-mix(in srgb, var(--danger) 7%, var(--surface)); color: var(--danger); font-size: 10px; }
.contact-profile-research-error .ui-icon { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.contact-profile-collapse { display: flex; align-items: center; gap: 4px; margin: 10px auto -3px; padding: 4px 8px; border: 0; background: transparent; color: var(--ink-faint); font: inherit; font-size: 10px; cursor: pointer; }
.contact-profile-collapse:hover { color: var(--green-2); }
.contact-profile-collapse .ui-icon { width: 11px; height: 11px; transform: rotate(180deg); }
.contact-profile-email-list { min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.contact-profile-email-list > span { min-width: 0; display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-soft); color: var(--ink-soft); font-size: 9px; line-height: 1; }
.contact-profile-email-list b { color: var(--ink-faint); font-size: 8px; }
.contact-profile-email-list em { padding: 1px 4px; border-radius: 4px; background: var(--warning); color: var(--warning-ink); font-size: 7px; font-style: normal; font-weight: 700; }
.contact-profile-email-list.is-empty > span { color: var(--ink-faint); }
.contact-profile-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 7px; }
.contact-profile-more { position: relative; display: none; flex: none; }
.contact-profile-more-toggle { width: var(--control-height-compact); height: var(--control-height-compact); display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: var(--control-radius-compact); background: var(--surface-raised); color: var(--ink-soft); cursor: pointer; }
.contact-profile-more-toggle:hover, .contact-profile-more-toggle[aria-expanded="true"] { border-color: var(--line-strong); background: var(--surface-soft); color: var(--ink); }
.contact-profile-more-toggle .ui-icon { width: 16px; height: 16px; }
.contact-profile-more-menu { position: absolute; z-index: 42; top: calc(100% + 6px); right: 0; width: 132px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); box-shadow: 0 14px 34px rgba(10,24,17,.16); }
.contact-profile-more-menu[hidden] { display: none; }
.contact-profile-more-menu button { width: 100%; min-height: 34px; display: flex; align-items: center; padding: 7px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-soft); font: inherit; font-size: var(--text-xs); text-align: left; white-space: nowrap; cursor: pointer; }
.contact-profile-more-menu button:hover { background: var(--surface-soft); color: var(--ink); }
.outreach-compose-wrap { position: relative; flex: none; }
.outreach-compose-trigger { white-space: nowrap; }
.outreach-compose-menu { z-index: 46; width: 204px; }
@container contact-profile-head (max-width: 720px) {
  .contact-profile-actions .button-icon { display: none; }
  .contact-profile-actions .button { gap: 0; padding-inline: 11px; }
  .contact-profile-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-profile-facts > div + div { border-left: 0; }
  .contact-profile-facts > div:nth-child(even) { border-left: 1px solid var(--line); }
  .contact-profile-facts > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@container contact-profile-head (max-width: 620px) {
  .contact-profile-actions > .contact-profile-direct-action { display: none; }
  .contact-profile-more { display: block; }
}
.contact-profile-body { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(360px, 1.22fr); }
.contact-profile-card { min-width: 0; padding: 20px 22px; }
.contact-profile-card + .contact-profile-card { border-left: 1px solid var(--line); }
.contact-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.contact-section-head h3 { font-size: var(--text-lg); }
.contact-section-head p { margin: 3px 0 0; color: var(--ink-faint); font-size: var(--text-xs); }
.contact-profile-form { display: grid; gap: 11px; }
.contact-profile-form .field span { font-size: var(--text-xs); }
.contact-profile-form textarea { min-height: 108px; }
.contact-profile-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 3px; }
.contact-mail-history { position: relative; display: grid; gap: 7px; }
.contact-history-entry { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.contact-history-entry:hover, .contact-history-entry.is-expanded { border-color: color-mix(in srgb, var(--green-2) 38%, var(--line)); background: var(--surface-raised); }
.contact-history-entry.is-draft { border-style: dashed; background: color-mix(in srgb, var(--green-soft) 38%, var(--surface-soft)); }
.contact-history-entry.is-draft:hover { border-color: color-mix(in srgb, var(--green-2) 42%, var(--line)); background: color-mix(in srgb, var(--green-soft) 58%, var(--surface-raised)); }
.contact-history-item { width: 100%; min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.contact-history-item:hover { background: color-mix(in srgb, var(--green-soft) 32%, transparent); }
.contact-history-direction { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--green-soft); color: var(--green-2); }
.contact-history-direction .ui-icon { width: 15px; height: 15px; }
.contact-history-copy { min-width: 0; }
.contact-history-copy strong, .contact-history-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-history-copy strong { font-size: var(--text-label); }
.contact-history-draft-badge { display: inline-flex; align-items: center; margin-right: 7px; padding: 1px 6px; border-radius: 999px; background: var(--surface-raised); color: var(--green-2); font-size: 10px; font-style: normal; font-weight: 700; vertical-align: 1px; }
.contact-history-copy span { margin-top: 2px; color: var(--ink-faint); font-size: var(--text-xs); }
.contact-history-tail { display: flex; align-items: center; gap: 7px; color: var(--ink-faint); }
.contact-history-tail time { font-size: 10px; white-space: nowrap; }
.contact-history-tail .ui-icon { width: 13px; height: 13px; transition: transform .18s ease; }
.contact-history-entry.is-expanded .contact-history-tail .ui-icon { transform: rotate(180deg); }
.contact-history-inline { padding: 0 10px 12px 53px; }
.contact-history-inline[hidden] { display: none; }
.contact-history-inline-body { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.7; }
.contact-history-inline-body pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: inherit; font: inherit; }
.contact-history-html-frame { display: block; width: 100%; min-height: 80px; border: 0; background: transparent; }
.contact-history-inline-loading { min-height: 72px; display: flex; align-items: center; justify-content: flex-start; gap: 8px; color: var(--ink-faint); font-size: var(--text-xs); }
.contact-history-inline-loading .status-dot { margin: 0; }
.contact-history-state { padding: 24px 12px; color: var(--ink-faint); font-size: var(--text-xs); text-align: center; }
.contact-history-more { position: relative; z-index: 3; min-height: 78px; display: flex; align-items: flex-end; justify-content: center; margin-top: -78px; padding: 0 12px 9px; background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--surface-raised) 82%, transparent) 48%, var(--surface-raised) 78%); pointer-events: none; }
.button.compact.contact-history-expand-button { min-width: 0; justify-content: center; gap: 5px; padding-inline: 9px; border-radius: 999px; box-shadow: 0 6px 18px rgba(10,24,17,.1); pointer-events: auto; }
.contact-history-collapse { display: flex; justify-content: center; padding-top: 5px; }
.button.compact.contact-history-collapse-button { min-width: 0; justify-content: center; gap: 5px; padding-inline: 9px; border-radius: 999px; }
.contact-history-collapse-button .button-icon { transform: rotate(180deg); }
.contact-analysis-button.is-loading .button-icon { animation: spin .8s linear infinite; }
.contact-analysis-card { container-name: contact-analysis; container-type: inline-size; }
.contact-analysis-empty { min-height: 142px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; border: 1px dashed var(--line-strong); border-radius: 11px; background: var(--surface-soft); color: var(--ink-faint); text-align: center; }
.contact-analysis-empty > span:not(.status-dot) { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 9px; border-radius: 10px; background: var(--green-soft); color: var(--green-2); }
.contact-analysis-empty > span .ui-icon { width: 18px; height: 18px; }
.contact-analysis-empty > .status-dot { margin: 0 0 12px; }
.contact-analysis-empty strong { color: var(--ink); font-size: var(--text-label); }
.contact-analysis-empty p { max-width: 440px; margin: 5px 0 0; font-size: var(--text-xs); line-height: 1.55; }
.contact-analysis-empty.is-error > span { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--danger); }
.contact-analysis-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.contact-analysis-progress > .status-dot { flex: none; margin: 0; }
.contact-analysis-progress strong { display: block; color: var(--ink); font-size: var(--text-xs); }
.contact-analysis-progress p { margin: 2px 0 0; color: var(--ink-faint); font-size: 10px; }
.contact-analysis-result { display: grid; gap: 10px; }
.contact-analysis-empty + .contact-public-research, .contact-analysis-result + .contact-public-research { margin-top: 10px; }
.contact-analysis-overview { padding: 14px 15px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.contact-analysis-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.contact-analysis-stage, .contact-analysis-confidence { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 8px; border-radius: 999px; font-size: var(--text-xs); font-weight: 700; }
.contact-analysis-stage { background: var(--green-soft); color: var(--green); }
.contact-analysis-confidence { background: var(--surface-raised); color: var(--ink-faint); }
.contact-analysis-overview-title { margin: 0; font-size: var(--text-label); }
.contact-analysis-overview > p { margin: 11px 0 0; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.65; }
.contact-analysis-overview > .contact-analysis-overview-title + p { margin-top: 8px; }
.contact-analysis-pattern { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; margin-top: 10px; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.55; }
.contact-analysis-pattern strong { color: var(--ink); white-space: nowrap; }
.contact-analysis-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.contact-analysis-block { min-width: 0; padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.contact-analysis-block h4 { margin: 0 0 8px; font-size: var(--text-label); }
.contact-analysis-block ul { display: grid; gap: 6px; margin: 0; padding-left: 16px; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.5; }
.contact-analysis-block li::marker { color: var(--green-2); }
.contact-analysis-block p { margin: 0; color: var(--ink-faint); font-size: var(--text-xs); }
.contact-analysis-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink-faint); font-size: 10px; }
.contact-analysis-footer time { flex: none; white-space: nowrap; }
@container contact-analysis (max-width: 680px) {
  .contact-analysis-grid { grid-template-columns: 1fr; }
}
.contact-modal { width: min(720px, calc(100vw - 28px)); }
.contact-modal-body { display: grid; align-content: start; gap: 14px; }
.contact-modal-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 11px 14px; }
.contact-modal-grid > .field { grid-column: span 3; }
.contact-modal-grid > .contact-modal-phone-field, .contact-modal-grid > .contact-modal-website-field { grid-column: span 3; }
.contact-modal-grid > .full-width { grid-column: 1 / -1; }
.contact-modal-grid textarea { min-height: 76px; resize: vertical; }
.contact-modal-inference { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.contact-modal-inference > div { min-width: 0; }
.contact-modal-inference strong { display: block; font-size: var(--text-label); }
.contact-modal-inference p { margin: 3px 0 0; color: var(--ink-faint); font-size: var(--text-xs); line-height: 1.45; }
.contact-modal-inference .button { flex: none; }
.contact-modal-actions #contact-modal-delete { margin-right: auto; }
.prospect-edit-modal { width: min(680px, calc(100vw - 28px)); }
.prospect-edit-modal .modal-body { padding-bottom: 16px; }
.contact-profile-body.contact-history-only { display: block; }
.contact-profile-body.contact-history-only .contact-profile-card { border-left: 0; }
.contact-profile-body.contact-history-only .contact-profile-card + .contact-profile-card { border-top: 0; }

@media (min-width: 561px) {
  body.mail-route-active, body.contacts-route-active, body.outreach-route-active { overflow: hidden; }
  body.mail-route-active .app-shell, body.contacts-route-active .app-shell, body.outreach-route-active .app-shell { height: 100dvh; min-height: 0; }
  body.mail-route-active .main-content, body.contacts-route-active .main-content, body.outreach-route-active .main-content { height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; }
  body.mail-route-active .topbar, body.contacts-route-active .topbar, body.outreach-route-active .topbar { width: 100%; flex: none; }
  body.mail-route-active .mail-page.active { width: 100%; min-height: 0; display: flex; flex: 1; }
  body.mail-route-active .mail-workspace { width: 100%; min-height: 0; display: flex; flex: 1; }
  body.mail-route-active .mail-shell { width: 100%; min-height: 0; height: 100%; flex: 1; }
  body.mail-route-active .mail-list-pane { min-height: 0; overflow: hidden; }
  body.mail-route-active .mail-reader-pane { min-height: 0; overflow: hidden; }
  body.mail-route-active .mail-message-list { min-height: 0; overflow-y: auto; }
  body.contacts-route-active .contacts-page.active { width: 100%; min-height: 0; display: flex; flex: 1; }
  body.contacts-route-active .contacts-workspace { width: 100%; min-height: 0; height: 100%; flex: 1; }
  body.contacts-route-active .contacts-list-pane, body.contacts-route-active .contact-detail-pane { min-height: 0; overflow: hidden; }
  body.contacts-route-active .contacts-list { min-height: 0; flex: 1; overflow-y: auto; }
  body.contacts-route-active .contact-detail-pane { overflow-y: auto; }
  body.outreach-route-active .workflow-card.active { width: 100%; min-height: 0; display: flex; flex: 1; flex-direction: column; }
  body.outreach-route-active .company-workspace-nav { flex: none; }
  body.outreach-route-active .step-panels { min-height: 0; display: flex; flex: 1; }
  body.outreach-route-active .outreach-flat-panel.active { width: 100%; min-height: 0; display: flex; flex: 1; }
  body.outreach-route-active .outreach-contacts-workspace { width: 100%; min-height: 0; height: 100%; flex: 1; }
  body.outreach-route-active .outreach-contacts-workspace .contacts-list-pane,
  body.outreach-route-active .outreach-contacts-workspace .contact-detail-pane { min-height: 0; overflow: hidden; }
  body.outreach-route-active .outreach-contacts-workspace .contacts-list { min-height: 0; flex: 1; overflow-y: auto; }
  body.outreach-route-active .outreach-contacts-workspace .contact-detail-pane { overflow-y: auto; }
}
.company-entry { display: grid; grid-template-columns: minmax(190px, .95fr) minmax(280px, 1.5fr) minmax(110px, .52fr) minmax(220px, 1fr); gap: 18px; align-items: center; min-height: 94px; padding: 11px 16px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background-color .18s ease; }
.company-entry.is-managing { grid-template-columns: 28px minmax(190px, .95fr) minmax(280px, 1.5fr) minmax(110px, .52fr) minmax(220px, 1fr); gap: 12px; }
.company-entry.is-selected { background: color-mix(in srgb, var(--green-soft) 58%, var(--surface)); }
.company-select-control { width: 28px; height: 42px; display: grid; place-items: center; cursor: pointer; }
.company-select-control input { width: 17px; height: 17px; accent-color: var(--green); }
.company-entry:last-child { border-bottom: 0; }
.company-entry:hover { background: color-mix(in srgb, var(--green-soft) 23%, var(--surface)); }
.company-identity { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.company-monogram { width: 44px; height: 42px; display: grid; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 64%, transparent); border-radius: 10px; background: var(--surface-raised); color: var(--green); font-size: var(--text-label); font-weight: 800; flex: none; }
.company-monogram img { width: 100%; height: 100%; padding: 4px; object-fit: contain; }
.company-logo-fallback { display: grid; width: 100%; height: 100%; place-items: center; background: var(--green-soft); }
.company-logo-fallback[hidden] { display: none; }
.company-identity-copy { min-width: 0; }
.company-identity h3 { display: -webkit-box; overflow: hidden; margin: 0; font-size: var(--text-label); line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.company-category { display: inline-flex; max-width: 100%; margin-top: 5px; padding: 3px 7px; border: 0; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: var(--text-xs); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-product { min-width: 0; }
.company-product strong { display: block; margin-bottom: 4px; font-size: var(--text-label); }
.company-product p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.company-product small { display: block; overflow: hidden; margin-top: 5px; color: var(--ink-faint); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.company-download strong { display: block; font-size: var(--text-md); letter-spacing: -.02em; }
.company-download-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.company-scale { display: inline-flex; align-items: center; padding: 4px 7px; border-radius: 999px; font-size: var(--text-xs); font-weight: 700; }
.company-scale { background: var(--green-soft); color: var(--green); }
.company-scale[data-scale="中型"] { background: var(--warning); color: var(--warning-ink); }
.company-scale[data-scale="小型"], .company-scale[data-scale="早期"] { background: color-mix(in srgb, #a94b51 12%, var(--surface)); color: var(--danger); }
.company-scale[data-scale="组合型"], .company-scale[data-scale="未公开"], .company-scale[data-scale="不适用"] { background: var(--surface-soft); color: var(--ink-faint); }
.company-research-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.research-link { height: var(--control-height-micro); min-height: var(--control-height-micro); display: flex; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 0 6px; border: 1px solid var(--line); border-radius: var(--control-radius-micro); background: var(--surface-raised); color: var(--ink-soft); text-align: center; text-decoration: none; font-size: 10px; font-weight: 650; cursor: pointer; transition: .18s ease; }
.research-link .research-icon { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transform: translateY(.5px); }
.research-link span { overflow: hidden; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.company-favorite-button, .company-case-button { gap: 4px; }
.research-link:hover { border-color: color-mix(in srgb, var(--green-2) 45%, var(--line)); background: var(--green-soft); color: var(--green); }
.company-case-button { width: auto; border-color: color-mix(in srgb, var(--green-2) 24%, var(--line)); background: var(--green-soft); color: var(--green); }
.company-favorite-button.is-favorited { border-color: color-mix(in srgb, var(--warning-ink) 42%, var(--line)); background: color-mix(in srgb, var(--warning) 55%, var(--surface-raised)); color: var(--warning-ink); }
.company-favorite-button.is-favorited .research-icon { fill: currentColor; }
@container company-directory (max-width: 930px) {
  .company-entry { grid-template-columns: minmax(160px, .9fr) minmax(210px, 1.3fr) minmax(85px, .45fr) minmax(198px, .9fr); gap: 12px; }
  .company-entry.is-managing { grid-template-columns: 28px minmax(150px, .9fr) minmax(200px, 1.3fr) minmax(82px, .45fr) minmax(192px, .9fr); gap: 9px; }
  .company-research-links .research-icon { display: none; }
  .company-research-links .research-link { gap: 0; padding-inline: 6px; }
  .company-research-links .research-link span { overflow: visible; text-overflow: clip; }
}
.landscape-loading, .landscape-empty { min-height: 180px; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--ink-soft); font-size: var(--text-sm); }
.landscape-loading .status-dot { margin: 0; background: var(--green-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green-2) 13%, transparent); }
.company-library-modal { width: min(780px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: hidden; }
.company-library-modal-body { display: grid; gap: 12px; }
.company-library-mode-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.company-library-mode-switch[hidden] { display: none; }
.company-library-mode-switch > button { min-width: 0; min-height: 54px; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); color: var(--ink-soft); font: inherit; text-align: left; cursor: pointer; }
.company-library-mode-switch > button:hover { border-color: color-mix(in srgb, var(--green-2) 34%, var(--line)); background: var(--surface-soft); color: var(--ink); }
.company-library-mode-switch > button.is-active { border-color: color-mix(in srgb, var(--green-2) 56%, var(--line)); background: var(--green-soft); color: var(--green); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green-2) 10%, transparent); }
.company-library-mode-switch > button > .ui-icon { width: 30px; height: 30px; padding: 7px; border-radius: 8px; background: var(--surface-soft); }
.company-library-mode-switch > button.is-active > .ui-icon { background: var(--surface-raised); }
.company-library-mode-switch strong, .company-library-mode-switch small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-library-mode-switch strong { font-size: var(--text-xs); }
.company-library-mode-switch small { margin-top: 2px; color: var(--ink-faint); font-size: 10px; font-weight: 400; }
.company-library-ai-panel { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.company-library-ai-panel[hidden], #company-library-manual-panel[hidden] { display: none; }
.company-library-ai-panel textarea { min-height: 116px; background: var(--surface-raised); }
.company-library-ai-action { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.company-library-ai-action p { max-width: 480px; margin: 0; color: var(--ink-faint); font-size: 10px; line-height: 1.55; }
.company-library-ai-action .button { flex: none; }
.company-library-ai-status { min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; background: var(--surface-raised); color: var(--ink-soft); font-size: var(--text-xs); }
.company-library-ai-status[hidden] { display: none; }
.company-library-ai-status.is-running::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--green-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green-2) 12%, transparent); animation: researchPulse 1.2s ease-in-out infinite; }
.company-library-ai-status.is-error { background: color-mix(in srgb, var(--danger) 7%, var(--surface-raised)); color: var(--danger); }
.company-library-ai-prefill { min-height: 42px; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-bottom: 11px; padding: 7px 9px; border-radius: 9px; background: var(--green-soft); color: var(--green); }
.company-library-ai-prefill[hidden] { display: none; }
.company-library-ai-prefill > .ui-icon { width: 26px; height: 26px; padding: 6px; border-radius: 7px; background: var(--surface-raised); }
.company-library-ai-prefill strong, .company-library-ai-prefill small { display: block; }
.company-library-ai-prefill strong { font-size: var(--text-xs); }
.company-library-ai-prefill small { margin-top: 1px; color: var(--ink-soft); font-size: 10px; }
.company-library-ai-prefill button { padding: 4px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--green); font: inherit; font-size: 10px; font-weight: 650; cursor: pointer; }
.company-library-ai-prefill button:hover { background: color-mix(in srgb, var(--green-2) 9%, var(--surface)); }
.company-library-form-grid { gap: 11px 14px; }
.company-library-logo-editor { min-width: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.company-library-logo-preview { width: 58px; height: 58px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); color: var(--ink-faint); font-size: 9px; font-weight: 750; }
.company-library-logo-preview img { width: 100%; height: 100%; padding: 5px; object-fit: contain; }
.company-library-logo-editor > div { min-width: 0; display: grid; gap: 7px; }
.company-library-logo-actions { display: flex; align-items: center; gap: 6px; }
.company-library-logo-actions .button { width: auto; min-height: var(--control-height-micro); margin: 0; cursor: pointer; }

@media (max-width: 620px) {
  .company-library-mode-switch { grid-template-columns: 1fr; }
  .company-library-ai-action { align-items: stretch; flex-direction: column; }
  .company-library-ai-action .button { width: 100%; }
}

.workflow-card { background: transparent; border: 0; box-shadow: none; overflow: visible; }
.company-workspace-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.company-tool-tab { min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; position: relative; padding: 7px 12px 10px; border: 0; background: transparent; color: var(--ink-faint); font: inherit; text-align: center; cursor: pointer; transition: color .18s ease; }
.company-tool-tab strong { overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.company-tool-tab:hover { color: var(--ink); }
.company-tool-tab::after { content: ""; height: 2px; position: absolute; right: 22%; bottom: -1px; left: 22%; border-radius: 2px 2px 0 0; background: transparent; }
.company-tool-tab.active { color: var(--green); }
.company-tool-tab.active::after { background: var(--green); }
.company-intelligence-dashboard { display: grid; gap: 14px; }
.company-intelligence-loading { min-height: 180px; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--ink-faint); font-size: var(--text-sm); }
.company-intelligence-loading .status-dot { margin: 0; }
.company-research-status { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--ink-soft); font-size: var(--text-xs); }
.company-research-status .status-dot { flex: none; margin: 0; }
.company-research-status > span:not(.status-dot) { color: var(--ink); font-weight: 650; }
.company-research-status small { min-width: 0; margin-right: auto; overflow: hidden; color: var(--ink-faint); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.company-research-status button { min-height: 26px; display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 3px 7px; border: 0; border-radius: 7px; background: transparent; color: var(--green); font: inherit; font-weight: 650; cursor: pointer; }
.company-research-status button:hover { background: var(--green-soft); }
.company-research-status button .button-icon { width: 13px; height: 13px; }
.company-research-status.is-running .status-dot { background: var(--green-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green-2) 13%, transparent); animation: researchPulse 1.2s ease-in-out infinite; }
.company-research-status.is-error { border-color: color-mix(in srgb, #bb4b4b 28%, var(--line)); background: color-mix(in srgb, #bb4b4b 6%, var(--surface)); }
.company-research-status.is-error .status-dot { background: #bb4b4b; }
.company-intelligence-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.company-intelligence-detail-card { min-width: 0; display: grid; align-content: start; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-raised); }
.company-intelligence-detail-card > header { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; }
.company-intelligence-detail-card > header > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--green-soft); color: var(--green); }
.company-intelligence-detail-card > header svg { width: 15px; height: 15px; }
.company-intelligence-detail-card > header strong, .company-intelligence-detail-card > header small { display: block; }
.company-intelligence-detail-card > header strong { font-size: var(--text-sm); }
.company-intelligence-detail-card > header small { margin-top: 1px; color: var(--ink-faint); font-size: 10px; }
.company-intelligence-detail-card dl { display: grid; gap: 0; margin: 0; }
.company-intelligence-detail-card dl > div { min-width: 0; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-top: 1px solid color-mix(in srgb, var(--line) 74%, transparent); }
.company-intelligence-detail-card dl > div:first-child { padding-top: 0; border-top: 0; }
.company-intelligence-detail-card dt { color: var(--ink-faint); font-size: 10px; font-weight: 650; }
.company-intelligence-detail-card dd { margin: 0; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.5; }
.company-intelligence-list-block > span { display: block; margin-bottom: 6px; color: var(--ink-faint); font-size: 10px; font-weight: 700; }
.company-intelligence-list-block ul, .company-intelligence-signals > ul { display: grid; gap: 5px; margin: 0; padding-left: 17px; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.5; }
.company-intelligence-list-block.risk { padding: 8px 9px; border-radius: 8px; background: color-mix(in srgb, var(--warning) 52%, var(--surface)); }
.company-intelligence-list-block.risk > span { color: var(--warning-ink); }
.company-intelligence-signals { grid-column: 1 / -1; }
.company-intelligence-signals > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 18px; column-gap: 28px; }
.company-intelligence-signals li { min-width: 0; }
.company-intelligence-signals a { color: var(--green); font-weight: 650; text-decoration: none; }
.company-intelligence-signals a:hover { text-decoration: underline; }
.company-intelligence-signals p { display: -webkit-box; margin: 2px 0 0; overflow: hidden; color: var(--ink-faint); font-size: 10px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.company-intelligence-signals li.is-empty { grid-column: 1 / -1; color: var(--ink-faint); }
@keyframes researchPulse { 50% { opacity: .42; transform: scale(.82); } }
.company-intelligence-hero { display: grid; grid-template-columns: minmax(280px, 1.15fr) minmax(420px, 1fr); gap: 20px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-raised); }
.company-intelligence-identity { min-width: 0; display: grid; gap: 8px; }
.company-intelligence-identity-main { min-width: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 14px; }
.company-intelligence-identity-copy { min-width: 0; }
.company-intelligence-logo { width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-raised); color: var(--green); font-size: var(--title-sm); font-weight: 800; }
.company-intelligence-logo img { width: 100%; height: 100%; object-fit: contain; }
.company-intelligence-identity h2 { margin: 4px 0 5px; font-size: var(--title-md); }
.company-identity-labels { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.company-identity-labels .company-category { margin-top: 0; }
.company-identity-status { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 999px; background: var(--surface-raised); color: var(--ink-faint); font-size: 10px; font-weight: 650; }
.company-identity-status.is-verified { background: var(--green-soft); color: var(--green); }
.company-identity-status.is-probable { background: color-mix(in srgb, var(--green-soft) 58%, var(--surface-raised)); color: var(--green); }
.company-identity-status.is-ambiguous { background: var(--warning); color: var(--warning-ink); }
.company-research-document-status { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.company-research-document-status > span { min-width: 0; display: flex; align-items: center; gap: 7px; }
.company-research-document-status svg { width: 15px; height: 15px; color: var(--green); }
.company-research-document-status strong { flex: none; font-size: var(--text-xs); }
.company-research-document-status small { min-width: 0; overflow: hidden; color: var(--ink-faint); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.company-research-fact-summary { flex: none; }
.company-research-fact-summary b { padding: 3px 6px; border-radius: 999px; background: var(--surface-raised); color: var(--ink-soft); font-size: 9px; font-weight: 650; }
.company-research-fact-summary b.needs-review { background: var(--warning); color: var(--warning-ink); }
.company-fit-decision { display: grid; gap: 16px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--green-2) 22%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--green-soft) 38%, var(--surface-raised)); }
.company-fit-summary { min-width: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 18px; }
.company-fit-score { width: 66px; height: 66px; display: grid; place-items: center; align-content: center; flex: none; border-radius: 18px; background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line); }
.company-fit-summary > .company-fit-score { align-self: center; }
.company-fit-score strong { display: flex; align-items: baseline; gap: 2px; font-size: 22px; line-height: 1; }
.company-fit-score strong small { color: var(--ink-faint); font-size: 8px; font-weight: 700; }
.company-fit-score span { margin-top: 4px; color: var(--green); font-size: 9px; font-weight: 750; }
.company-fit-main { min-width: 0; }
.company-fit-decision h3 { margin: 4px 0 8px; font-size: var(--text-md); line-height: 1.4; }
.company-fit-rubric { min-width: 0; border-top: 1px solid var(--line); }
.company-fit-rubric > summary { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) 16px; align-items: center; gap: 9px; padding: 10px 0 0; color: var(--ink); cursor: pointer; list-style: none; }
.company-fit-rubric > summary::-webkit-details-marker { display: none; }
.company-fit-rubric > summary > span { font-size: 10px; font-weight: 750; }
.company-fit-rubric > summary > small { min-width: 0; overflow: hidden; color: var(--ink-faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.company-fit-rubric > summary svg { width: 14px; height: 14px; color: var(--ink-faint); transition: transform .2s cubic-bezier(.22, 1, .36, 1); }
.company-fit-rubric[open] > summary svg { transform: rotate(180deg); }
.company-fit-rubric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 11px; padding: 11px 0 2px; border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent); }
.company-fit-rubric-grid article { min-width: 0; padding: 0 10px; border-left: 1px solid color-mix(in srgb, var(--line) 72%, transparent); }
.company-fit-rubric-grid article:first-child { padding-left: 0; border-left: 0; }
.company-fit-rubric-grid article:last-child { padding-right: 0; }
.company-fit-rubric-grid article > div { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.company-fit-rubric-grid article span { color: var(--ink); font-size: 10px; font-weight: 700; }
.company-fit-rubric-grid article strong { color: var(--green); font-size: 9px; white-space: nowrap; }
.company-fit-rubric-grid article i { height: 3px; display: block; margin: 6px 0; overflow: hidden; border-radius: 999px; background: var(--line); }
.company-fit-rubric-grid article i b { height: 100%; display: block; border-radius: inherit; background: var(--green-2); }
.company-fit-rubric-grid article p { margin: 5px 0 0; color: var(--ink-faint); font-size: 9px; line-height: 1.45; }
.company-fit-rubric-note { margin: 9px 0 0; color: var(--ink-faint); font-size: 9px; line-height: 1.45; }
.company-fit-evidence { min-width: 0; padding-top: 10px; border-top: 1px solid var(--line); }
.company-fit-evidence .company-fit-details { padding-top: 0; border-top: 0; }
.company-fit-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.company-fit-reasons { min-width: 0; }
.company-fit-reasons > span { color: var(--ink-faint); font-size: 10px; font-weight: 700; }
.company-fit-reasons ul { display: grid; gap: 4px; margin: 6px 0 0; padding-left: 17px; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.55; }
.company-fit-risks { min-width: 0; padding-left: 22px; border-left: 1px solid var(--line); }
.company-fit-risks > span { color: var(--ink-faint); font-size: 10px; font-weight: 700; }
.company-fit-risks ul { display: grid; gap: 3px; margin: 5px 0 0; padding-left: 16px; color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.company-fit-decision.is-low { border-color: color-mix(in srgb, var(--warning-ink) 18%, var(--line)); background: color-mix(in srgb, var(--warning) 30%, var(--surface-raised)); }
.company-fit-decision.is-low .company-fit-score span { color: var(--warning-ink); }
.company-intelligence-workbench { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; }
.company-intelligence-column { min-width: 0; display: grid; align-content: start; gap: 12px; }
.company-intelligence-module { min-width: 0; display: grid; align-content: start; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-raised); }
.company-intelligence-module > header { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; }
.company-intelligence-module > header > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--green-soft); color: var(--green); }
.company-intelligence-module > header svg { width: 15px; height: 15px; }
.company-intelligence-module > header strong, .company-intelligence-module > header small { display: block; }
.company-intelligence-module > header strong { font-size: var(--text-sm); }
.company-intelligence-module > header small { margin-top: 1px; color: var(--ink-faint); font-size: 10px; }
.company-intelligence-module dl { display: grid; margin: 0; }
.company-intelligence-module dl > div { min-width: 0; display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 9px; padding: 6px 0; border-top: 1px solid color-mix(in srgb, var(--line) 74%, transparent); }
.company-intelligence-module dl > div:first-child { padding-top: 0; border-top: 0; }
.company-intelligence-module dt { color: var(--ink-faint); font-size: 10px; font-weight: 650; }
.company-intelligence-module dd { margin: 0; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.5; }
.company-signal-section { min-width: 0; padding-top: 9px; border-top: 1px solid var(--line); }
.company-signal-section:first-of-type { padding-top: 0; border-top: 0; }
.company-signal-section > span, .company-strategy-columns > div > span { display: block; margin-bottom: 6px; color: var(--ink-faint); font-size: 10px; font-weight: 700; }
.company-signal-section ul, .company-strategy-columns ul { display: grid; gap: 4px; margin: 0; padding-left: 17px; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.5; }
.company-channel-list { display: grid; margin: 0; padding: 0; list-style: none; }
.company-channel-list li { min-width: 0; display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 9px; padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent); }
.company-channel-list li:first-child { padding-top: 1px; border-top: 0; }
.company-channel-index { padding-top: 2px; color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.company-channel-list li > div { min-width: 0; }
.company-channel-list strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: var(--text-xs); font-weight: 750; line-height: 1.35; }
.company-channel-list p { margin: 0; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.58; }
.company-channel-list li.is-plain p { color: var(--ink); }
.company-channel-list a { display: inline-block; margin-top: 4px; color: var(--green); font-size: 10px; font-weight: 650; text-decoration: none; }
.company-channel-list a:hover { text-decoration: underline; }
.company-channel-empty { margin: 0; color: var(--ink-faint); font-size: var(--text-xs); }
.company-intelligence-linked-list li > a { display: inline-block; margin-left: 6px; color: var(--green); font-size: 10px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.company-intelligence-linked-list li > a:hover { text-decoration: underline; }
.company-intelligence-module li.is-empty { color: var(--ink-faint); }
.company-strategic-events { grid-column: 1 / -1; }
.company-strategic-events ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
.company-strategic-events li { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 9px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.company-strategic-events li > div strong, .company-strategic-events li > div small { display: block; }
.company-strategic-events li strong { font-size: var(--text-xs); }
.company-strategic-events li small { margin-top: 2px; color: var(--ink-faint); font-size: 9px; }
.company-strategic-events li p { grid-column: 1 / -1; margin: 3px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.company-strategic-events li a { color: var(--green); font-size: 9px; font-weight: 650; text-decoration: none; }
.company-strategic-events li.is-empty { grid-column: 1 / -1; color: var(--ink-faint); font-size: var(--text-xs); }
.company-signal-event-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.company-signal-event-list li { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; padding: 8px 9px; border-left: 2px solid color-mix(in srgb, var(--green-2) 52%, var(--line)); border-radius: 0 8px 8px 0; background: var(--surface-soft); }
.company-signal-event-list li strong, .company-signal-event-list li small { display: block; }
.company-signal-event-list li strong { font-size: var(--text-xs); }
.company-signal-event-list li small { margin-top: 2px; color: var(--ink-faint); font-size: 10px; }
.company-signal-event-list li p { grid-column: 1 / -1; margin: 3px 0 0; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.5; }
.company-signal-event-list li a { color: var(--green); font-size: 10px; font-weight: 650; text-decoration: none; }
.company-signal-event-list li.is-empty { display: block; padding: 7px 0; border: 0; background: transparent; color: var(--ink-faint); font-size: var(--text-xs); }
.company-buyer-map { display: grid; gap: 6px; }
.company-buyer-map article { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.company-buyer-map article > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-raised); color: var(--ink-faint); font-size: 9px; font-weight: 750; }
.company-buyer-map article > span.priority-high { background: var(--green-soft); color: var(--green); }
.company-buyer-map article > span.priority-medium { background: var(--warning); color: var(--warning-ink); }
.company-buyer-map strong, .company-buyer-map p, .company-buyer-map small { display: block; }
.company-buyer-map strong { font-size: var(--text-xs); }
.company-buyer-map p { margin: 2px 0; color: var(--ink-soft); font-size: 10px; }
.company-buyer-map small { color: var(--ink-faint); font-size: 9px; line-height: 1.45; }
.company-proof-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.company-proof-list li { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; gap: 7px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.company-proof-list strong { font-size: var(--text-xs); }
.company-proof-list p { margin: 2px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.company-proof-list li > span { padding: 3px 5px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 9px; font-weight: 700; }
.company-proof-list a { color: var(--green); font-size: 9px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.company-proof-list li.is-empty { display: block; color: var(--ink-faint); font-size: var(--text-xs); }
.company-strategy-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.company-outreach-strategy { grid-column: 1 / -1; }
.company-competitive-set { grid-column: 1 / -1; }
.company-competitive-section { min-width: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.company-competitive-section > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; color: var(--ink-soft); }
.company-competitive-section > summary::-webkit-details-marker { display: none; }
.company-competitive-section > summary span, .company-buyer-outreach-section > span { display: block; color: var(--ink-faint); font-size: var(--text-xs); font-weight: 700; }
.company-competitive-section > summary small { color: var(--ink-faint); font-size: 10px; }
.company-competitive-section[open] > summary { margin-bottom: 8px; }
.company-buyer-outreach-section > span { margin-bottom: 7px; }
.company-business-overview .company-competitive-list { grid-template-columns: 1fr; }
.company-buyer-outreach, .company-personalization-evidence { grid-column: auto; }
.company-buyer-outreach-layout { display: grid; grid-template-columns: 1fr; gap: 12px; }
.company-buyer-outreach-section { min-width: 0; }
.company-buyer-outreach-section + .company-buyer-outreach-section { padding-top: 12px; border-top: 1px solid var(--line); }
.company-personalization-evidence .company-proof-list { grid-template-columns: 1fr; }
.company-competitive-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.company-competitive-list article { min-width: 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.company-competitive-list article > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.company-competitive-list strong { min-width: 0; overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.company-competitive-list span { flex: none; padding: 3px 6px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 10px; font-weight: 650; }
.company-competitive-list p { margin: 6px 0 0; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.55; }
.company-competitive-list a { display: inline-block; margin-top: 7px; color: var(--green); font-size: 10px; font-weight: 650; text-decoration: none; }
.company-competitive-empty { grid-column: 1 / -1; margin: 0; padding: 8px 0; color: var(--ink-faint); font-size: var(--text-xs); }
.company-research-candidates { overflow: hidden; border: 1px solid color-mix(in srgb, var(--warning-ink) 16%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--warning) 32%, var(--surface)); }
.company-research-candidates > summary { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; cursor: pointer; list-style: none; }
.company-research-candidates > summary::-webkit-details-marker { display: none; }
.company-research-candidates > summary > span { display: flex; align-items: center; gap: 7px; }
.company-research-candidates > summary .ui-icon { width: 15px; height: 15px; color: var(--warning-ink); }
.company-research-candidates > summary strong { font-size: var(--text-xs); }
.company-research-candidates > summary small { color: var(--ink-faint); font-size: 10px; }
.company-research-candidates[open] > summary { border-bottom: 1px solid color-mix(in srgb, var(--warning-ink) 12%, var(--line)); }
.company-research-candidates > div { display: grid; gap: 0; padding: 0 10px; background: var(--surface-raised); }
.company-research-candidates article { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.company-research-candidates article:first-child { border-top: 0; }
.company-research-candidates article > div:first-child { min-width: 0; }
.company-research-candidates article span, .company-research-candidates article strong, .company-research-candidates article p { display: block; }
.company-research-candidates article span { color: var(--ink-faint); font-size: 9px; }
.company-research-candidates article strong { margin-top: 2px; font-size: var(--text-xs); }
.company-research-candidates article p { margin: 2px 0 0; overflow: hidden; color: var(--ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.company-research-candidates article > b { padding: 3px 6px; border-radius: 999px; background: var(--warning); color: var(--warning-ink); font-size: 9px; }
.candidate-review-actions { display: flex; align-items: center; gap: 5px; }
.candidate-review-actions button { min-height: 26px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink-soft); font: inherit; font-size: 10px; cursor: pointer; }
.candidate-review-actions button:first-child { border-color: color-mix(in srgb, var(--green) 26%, var(--line)); color: var(--green); }
.candidate-review-actions button:hover { background: var(--surface-soft); }
.candidate-review-actions button:disabled { opacity: .55; cursor: wait; }
.company-intelligence-identity p { display: -webkit-box; max-width: 620px; margin: 0; overflow: hidden; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.company-intelligence-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.company-intelligence-facts article { min-width: 0; display: grid; align-content: center; gap: 4px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); }
.company-intelligence-facts span, .company-intelligence-markets > span { color: var(--ink-faint); font-size: 10px; font-weight: 700; }
.company-intelligence-facts strong { overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.company-intelligence-hero-sources { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--line); }
.company-intelligence-markets { grid-column: 1 / -1; display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.company-intelligence-markets > div, .company-product-markets > div { display: flex; flex-wrap: wrap; gap: 6px; }
.company-intelligence-markets > div > span, .company-product-markets > div > span { padding: 4px 8px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: var(--text-xs); font-weight: 650; }
.company-intelligence-markets .is-empty, .company-product-markets .is-empty { background: var(--surface-raised); color: var(--ink-faint); }
.company-source-dashboard { padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-raised); }
.company-source-dashboard > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.company-source-dashboard h4 { margin: 3px 0 0; font-size: var(--text-lg); }
.company-source-dashboard > header > small { color: var(--ink-faint); font-size: var(--text-xs); }
.company-intelligence-sources { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.company-intelligence-source { min-width: 0; min-height: 64px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 14px; align-items: center; gap: 9px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); color: var(--ink); text-decoration: none; transition: .18s ease; }
.company-intelligence-source:hover { border-color: color-mix(in srgb, var(--green-2) 42%, var(--line)); background: var(--green-soft); }
.company-intelligence-source > .ui-icon { width: 32px; height: 32px; padding: 7px; border-radius: 9px; background: var(--surface-raised); color: var(--green); }
.company-intelligence-source strong, .company-intelligence-source small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-intelligence-source strong { font-size: var(--text-sm); }
.company-intelligence-source small { margin-top: 2px; color: var(--ink-faint); font-size: 10px; }
.company-intelligence-source .source-external { width: 18px; height: 18px; display: inline-grid; place-items: center; color: var(--ink-faint); font-size: 16px; line-height: 1; font-weight: 700; }
.button-external { display: inline-block; margin-left: 2px; font-size: 14px; line-height: 1; font-weight: 700; }
.company-intelligence-source.is-unavailable { opacity: .62; }
.company-market-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.company-market-summary article { min-width: 0; display: grid; gap: 5px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.company-market-summary span { color: var(--ink-faint); font-size: var(--text-xs); }
.company-market-summary strong { overflow: hidden; font-size: var(--text-lg); text-overflow: ellipsis; white-space: nowrap; }
.company-product-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.company-product-list > .empty-state { grid-column: 1 / -1; }
.company-product-card { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }
.company-product-main { min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
.company-product-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--green-soft); color: var(--green); }
.company-product-icon .ui-icon { width: 19px; height: 19px; }
.company-product-main h4 { margin: 1px 0 4px; font-size: var(--text-lg); }
.company-product-main p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.company-product-data { display: grid; grid-template-columns: repeat(2, minmax(76px, auto)); gap: 7px; }
.company-product-data > div { min-width: 0; padding: 7px 9px; border-left: 1px solid var(--line); }
.company-product-data span, .company-product-markets > span { display: block; color: var(--ink-faint); font-size: 10px; }
.company-product-data strong { display: block; margin-top: 4px; font-size: var(--text-sm); white-space: nowrap; }
.company-product-markets { grid-column: 1 / -1; display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.company-product-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.product-link-missing { margin-right: auto; color: var(--ink-faint); font-size: var(--text-xs); }
.company-product-modal, .appmagic-import-modal { width: min(720px, calc(100vw - 32px)); }
.modal.company-research-details-modal { width: min(760px, calc(100vw - 32px)); height: fit-content; max-height: calc(100dvh - 40px); }
.modal.company-research-details-modal form:not(.mail-composer) { height: auto; max-height: calc(100dvh - 40px); grid-template-rows: auto auto minmax(0, auto); }
.company-research-details-modal .modal-head { padding-inline: 18px 14px; }
.company-research-stage-actions { display: grid; gap: 9px; padding: 12px 18px 11px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface)); }
.company-research-stage-actions .button { min-height: var(--control-height-compact); }
.company-research-plan-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.company-research-plan-option { min-width: 0; min-height: 64px; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 7px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); cursor: pointer; transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease; }
.company-research-plan-option:hover { border-color: color-mix(in srgb, var(--green-2) 30%, var(--line)); }
.company-research-plan-option:has(input:checked) { border-color: color-mix(in srgb, var(--green-2) 56%, var(--line)); background: var(--green-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green-2) 15%, transparent); }
.company-research-plan-option input { width: 14px; height: 14px; margin: 2px 0 0; accent-color: var(--green); }
.company-research-plan-option span { min-width: 0; display: grid; gap: 3px; }
.company-research-plan-option strong { font-size: var(--text-xs); line-height: 1.35; }
.company-research-plan-option small { color: var(--ink-faint); font-size: 10px; line-height: 1.4; }
.company-research-module-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 0; border: 0; background: transparent; }
.company-research-module-options[hidden] { display: none; }
.company-research-module-options label { min-width: 0; min-height: 36px; display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-raised); color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.3; white-space: nowrap; cursor: pointer; transition: border-color .16s ease, background-color .16s ease, color .16s ease; }
.company-research-module-options label:hover { border-color: color-mix(in srgb, var(--green-2) 32%, var(--line)); background: var(--surface-soft); color: var(--ink); }
.company-research-module-options label:has(input:checked) { border-color: color-mix(in srgb, var(--green-2) 48%, var(--line)); background: var(--green-soft); color: var(--ink); }
.company-research-module-options input { width: 15px; height: 15px; flex: 0 0 15px; margin: 0; accent-color: var(--green); }
.company-research-start-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 1px; }
.company-research-start-row > span { color: var(--ink-faint); font-size: var(--text-xs); }
.company-research-start-row .button { flex: 0 0 auto; }
.modal.company-research-details-modal .company-research-details-content { min-height: 0; max-height: min(390px, 52dvh); display: grid; align-content: start; gap: 13px; padding: 14px 18px 16px; overflow-y: auto; }
.company-research-details-block { min-width: 0; display: grid; gap: 9px; }
.company-research-details-block > header { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.company-research-details-block > header strong { font-size: var(--text-label); }
.company-research-details-block > header span { color: var(--ink-faint); font-size: var(--text-xs); }
.company-research-details-empty { padding: 18px 16px; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface-soft); color: var(--ink-faint); font-size: var(--text-sm); text-align: center; }
.company-research-details-state { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--ink-soft); text-align: center; }
.company-research-details-state .status-dot { margin: 0 0 4px; }
.company-research-details-state > .ui-icon { width: 28px; height: 28px; color: var(--danger); }
.company-research-details-state strong { font-size: var(--text-md); }
.company-research-details-state p { max-width: 560px; margin: 0; color: var(--ink-faint); font-size: var(--text-sm); line-height: 1.55; }

.step-panel { display: none; margin-top: 16px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); animation: fadeIn .24s ease; }
.step-panel.active { display: block; }
.step-panel.company-intelligence-panel, .step-panel.company-product-panel { padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 7px 22px rgba(35,49,40,.045); }
.step-panel.company-intelligence-panel { margin-top: 12px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.step-panel.company-product-panel { margin-top: 12px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.step-panel.contact-flat-panel { margin-top: 12px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.step-panel.company-product-panel[hidden] { display: none !important; }
.company-compact-intro { min-height: 38px; align-items: center; margin-bottom: 14px; padding: 0; border-bottom: 0; }
.company-compact-intro h3 { margin: 0; font-size: 18px; line-height: 34px; letter-spacing: -.02em; }
.company-compact-intro > div:first-child { gap: 0; }
.company-compact-intro .inline-actions { display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 6px; padding: 0; border: 0; background: transparent; }
.company-compact-intro .inline-actions .icon-button { width: var(--control-height-compact); min-height: var(--control-height-compact); height: var(--control-height-compact); margin: 0; border: 1px solid var(--line); border-radius: var(--control-radius-compact); background: var(--surface-soft); box-shadow: none; color: var(--ink-soft); }
.company-compact-intro .inline-actions .icon-button .ui-icon { width: 14px; height: 14px; }
.company-compact-intro .inline-actions .icon-button:hover { border-color: color-mix(in srgb, var(--green-2) 32%, var(--line)); background: var(--green-soft); color: var(--green); }
.company-compact-intro .inline-actions .ai-action-trigger { color: var(--green); }
.panel-intro.company-product-toolbar { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); }
.company-product-toolbar > .company-market-summary:first-child { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(76px, 1fr)); align-items: center; gap: 0; margin: 0; }
.company-product-toolbar .company-market-summary article { min-width: 0; gap: 1px; padding: 2px 11px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; }
.company-product-toolbar .company-market-summary article:first-child { padding-left: 0; border-left: 0; }
.company-product-toolbar .company-market-summary span { font-size: 10px; }
.company-product-toolbar .company-market-summary strong { font-size: 12px; }
.company-product-toolbar .inline-actions { justify-content: flex-end; }
.company-product-sort { width: 152px; flex: none; background-color: var(--surface-soft); }
#add-company-product { height: var(--control-height-compact); min-height: var(--control-height-compact); margin: 0; }
.company-research-trigger.is-running { color: var(--green); }

@media (max-width: 720px) {
  .company-research-plan-options, .company-research-module-options { grid-template-columns: 1fr; }
  .company-research-start-row { align-items: stretch; flex-direction: column; }
}
.company-research-gate { min-height: clamp(430px, calc(100vh - 235px), 680px); display: grid; place-items: center; align-content: center; gap: 10px; padding: 42px 28px; text-align: center; }
.company-research-gate-icon { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 3px; border-radius: 17px; background: var(--green-soft); color: var(--green); }
.company-research-gate-icon .ui-icon { width: 25px; height: 25px; animation: researchPulse 1.35s ease-in-out infinite; }
.company-research-gate h2 { margin: 0; font-size: var(--title-sm); letter-spacing: -.02em; }
.company-research-gate p { margin: 0; color: var(--ink-soft); font-size: var(--text-sm); }
.company-research-gate > small { margin-top: 5px; color: var(--ink-faint); font-size: var(--text-xs); }
.company-research-progress { width: min(480px, 78vw); height: 5px; overflow: hidden; margin: 9px 0 3px; border-radius: 99px; background: var(--surface-soft); }
.company-research-progress i { height: 100%; display: block; border-radius: inherit; background: var(--green-2); transition: width .45s ease; }
.company-research-phase-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; max-width: 680px; }
.company-research-phase-list span { padding: 4px 7px; border-radius: 999px; background: var(--surface-soft); color: var(--ink-faint); font-size: 10px; }
.company-research-phase-list span.active, .company-research-phase-list span.done { background: var(--green-soft); color: var(--green); }
.company-research-running-banner { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--green-2) 24%, var(--line)); border-radius: 11px; background: var(--green-soft); }
.company-research-running-banner > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--surface); color: var(--green); }
.company-research-running-banner .ui-icon { width: 15px; height: 15px; animation: researchPulse 1.35s ease-in-out infinite; }
.company-research-running-banner div { min-width: 0; display: grid; gap: 2px; }
.company-research-running-banner strong { font-size: var(--text-sm); }
.company-research-running-banner small { color: var(--ink-soft); font-size: var(--text-xs); }
.company-research-running-banner b { color: var(--green); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.company-research-running-banner.is-partial { border-color: color-mix(in srgb, var(--warning-ink) 26%, var(--line)); background: color-mix(in srgb, var(--warning) 58%, var(--surface-raised)); }
.company-research-running-banner.is-partial > span { color: var(--warning-ink); }
.company-research-running-banner.is-partial .button { white-space: nowrap; }
.company-research-phase-list span.failed { background: var(--warning); color: var(--warning-ink); }
.company-research-gate.is-error .company-research-gate-icon { background: color-mix(in srgb, #bb4b4b 9%, var(--surface)); color: #a33f3f; }
.company-research-gate.is-error .company-research-gate-icon .ui-icon { animation: none; }
.company-intelligence-dashboard { gap: 12px; }
.company-intelligence-hero { grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 18px 26px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); }
.company-intelligence-primary { min-width: 0; display: grid; align-content: start; gap: 14px; }
.company-intelligence-identity { gap: 8px; }
.company-intelligence-identity-main { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
.company-intelligence-logo { width: 52px; height: 52px; border-radius: 12px; }
.company-intelligence-identity h2 { margin: 2px 0 3px; font-size: var(--title-sm); }
.company-identity-labels .company-category { border: 0; }
.company-intelligence-identity p { -webkit-line-clamp: 2; }
.company-intelligence-summary { display: block !important; max-width: none !important; overflow: visible !important; -webkit-line-clamp: unset !important; }
.company-intelligence-sources.company-intelligence-inline-sources { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.company-intelligence-inline-sources .company-intelligence-source { min-height: 27px; grid-template-columns: 12px minmax(0, 1fr); gap: 4px; padding: 3px 6px; border-radius: 6px; background: transparent; }
.company-intelligence-inline-sources .company-intelligence-source > .ui-icon { width: 12px; height: 12px; padding: 0; border-radius: 0; background: transparent; }
.company-intelligence-inline-sources .company-intelligence-source strong { font-size: 10px; }
.company-intelligence-facts { display: grid; grid-template-columns: 1fr; align-content: start; gap: 0; margin: 0; padding-left: 20px; border-left: 1px solid var(--line); }
.company-intelligence-facts > div { min-width: 0; display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 13px 0; border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent); }
.company-intelligence-facts > div:first-child { padding-top: 2px; border-top: 0; }
.company-intelligence-facts dt { color: var(--ink-faint); font-size: var(--text-xs); font-weight: 650; }
.company-intelligence-facts dd { min-width: 0; margin: 0; color: var(--ink); font-size: var(--text-sm); font-weight: 650; line-height: 1.5; }
.company-intelligence-markets { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-raised); }
.company-intelligence-markets > div > span, .company-product-markets > div > span { padding: 3px 7px; }
.company-source-dashboard { padding: 0; border: 0; border-radius: 0; background: transparent; }
.company-source-dashboard > header { display: none; }
.company-intelligence-sources { gap: 6px; }
.company-intelligence-source { min-height: 42px; grid-template-columns: 26px minmax(0, 1fr) 13px; gap: 7px; padding: 6px 8px; border-radius: 9px; background: var(--surface-raised); }
.company-intelligence-source > .ui-icon { width: 26px; height: 26px; padding: 5px; border-radius: 7px; }
.company-intelligence-source small { display: none; }
.company-market-summary { gap: 6px; margin-bottom: 10px; padding: 0; border: 0; }
.company-market-summary article { gap: 2px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-raised); }
.company-market-summary strong { font-size: var(--text-label); }
.company-product-list { display: grid; grid-template-columns: 1fr; gap: 8px; border: 0; }
.company-product-list.is-research-state { display: block; }
.company-product-card { display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-raised); }
.company-product-top { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.company-product-main { min-width: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 10px; }
.company-product-icon { width: 48px; height: 48px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 72%, transparent); border-radius: 11px; background: var(--surface-soft); box-shadow: none; }
.company-product-icon img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 10px; }
.company-product-title-line { min-width: 0; display: flex; align-items: center; gap: 7px; }
.company-product-title-line h4 { min-width: 0; margin: 0; overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.company-product-title-line > span { flex: none; padding: 3px 6px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 9px; font-weight: 700; }
.company-product-title-line > span.ownership-verified { background: var(--green-soft); color: var(--green); }
.company-product-title-line > span.ownership-candidate { background: var(--warning); color: var(--warning-ink); }
.company-product-title-line > span.ownership-unverified { background: var(--surface-soft); color: var(--ink-faint); }
.company-product-main p { -webkit-line-clamp: 1; }
.company-product-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.company-product-actions .button { height: var(--control-height-micro); min-height: var(--control-height-micro); padding: 0 8px; border-radius: var(--control-radius-micro); font-size: var(--text-xs); }
.company-product-actions .button.product-source-link { height: var(--control-height-micro); min-height: var(--control-height-micro); gap: 4px; padding: 0 7px; border-radius: var(--control-radius-micro); font-size: var(--text-xs); line-height: 1; text-decoration: none; }
.company-product-actions .product-source-link .button-icon { width: 12px; height: 12px; }
.company-product-actions .source-app-store .button-icon { fill: currentColor; stroke: none; color: var(--ink); }
.company-product-actions .source-google-play .button-icon { width: 13px; height: 13px; fill: none; stroke: none; }
.company-product-actions .source-website .button-icon { color: #4d8ab5; }
.company-product-actions .source-appmagic .button-icon { color: var(--green-2); }
.company-product-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.company-product-metrics > div { min-width: 0; padding: 8px 9px; border-left: 1px solid var(--line); }
.company-product-metrics > div:first-child { border-left: 0; }
.company-product-metrics span, .company-product-context > span { display: block; color: var(--ink-faint); font-size: 9px; }
.company-product-metrics strong { display: block; margin-top: 3px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.company-product-download-estimate { width: 100%; display: block; margin-top: 3px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.company-product-download-estimate strong { margin-top: 0; }
.company-product-download-estimate:hover strong { text-decoration: underline; text-underline-offset: 2px; }
.company-product-download-estimate:focus-visible { outline: 2px solid color-mix(in srgb, var(--green-2) 52%, transparent); outline-offset: 3px; }
.company-download-estimate-tooltip { position: fixed; z-index: 230; width: min(360px, calc(100vw - 20px)); padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-raised); color: var(--ink); box-shadow: 0 16px 42px rgba(8,18,13,.2); }
.company-download-estimate-tooltip[hidden] { display: none; }
.company-download-estimate-tooltip header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.company-download-estimate-tooltip header span { display: block; color: var(--ink-faint); font-size: var(--text-xs); }
.company-download-estimate-tooltip header strong { display: block; margin-top: 2px; font-size: var(--text-md); }
.company-download-estimate-tooltip header em { flex: none; padding: 4px 7px; border-radius: 999px; background: var(--green-soft); color: var(--green-2); font-size: 10px; font-style: normal; font-weight: 700; }
.company-download-estimate-tooltip dl { display: grid; gap: 7px; margin: 10px 0 0; }
.company-download-estimate-tooltip dl > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; }
.company-download-estimate-tooltip dt { color: var(--ink-faint); font-size: var(--text-xs); }
.company-download-estimate-tooltip dd { margin: 0; font-size: var(--text-xs); line-height: 1.55; }
.company-download-estimate-tooltip p { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 10px; line-height: 1.5; }
.company-product-context { display: flex; align-items: center; gap: 8px; min-width: 0; }
.company-product-context > div { min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.company-product-context > div > span { padding: 3px 7px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 10px; font-weight: 650; }
.company-product-context > div > span.is-empty { background: var(--surface-soft); color: var(--ink-faint); }
.company-product-context small { margin-left: auto; color: var(--ink-faint); font-size: 9px; white-space: nowrap; }
.product-link-missing { display: none; }

/* Company intelligence readability and rhythm */
.company-tool-tab strong { font-size: var(--text-label); }
.company-tool-tab small { font-size: var(--text-xs); }
.company-research-document-status { gap: 14px; padding: 9px 11px; }
.company-research-document-status strong { font-size: var(--text-sm); }
.company-research-document-status small { font-size: var(--text-xs); }
.company-research-fact-summary b { padding: 4px 7px; font-size: 10px; }
.company-fit-decision { gap: 18px; padding: 15px 17px; }
.company-fit-score span { font-size: 10px; }
.company-fit-decision h3 { margin: 5px 0 9px; font-size: 15px; line-height: 1.45; }
.company-fit-reasons > span { font-size: var(--text-xs); }
.company-fit-reasons ul { gap: 4px; margin-top: 6px; padding-left: 17px; font-size: var(--text-xs); line-height: 1.55; }
.company-fit-risks > span { font-size: var(--text-xs); }
.company-fit-risks ul { gap: 4px; margin-top: 6px; padding-left: 17px; font-size: var(--text-xs); line-height: 1.55; }
.company-intelligence-workbench { gap: 12px; }
.company-intelligence-module { gap: 14px; padding: 15px; border-radius: 12px; }
.company-intelligence-module > header strong { font-size: var(--text-label); }
.company-intelligence-module > header small { margin-top: 2px; font-size: var(--text-xs); }
.company-intelligence-module dl > div { grid-template-columns: 88px minmax(0, 1fr); gap: 11px; padding: 8px 0; }
.company-intelligence-module dt { font-size: var(--text-xs); }
.company-intelligence-module dd { font-size: var(--text-sm); line-height: 1.6; }
.company-signal-section > span,
.company-strategy-columns > div > span { margin-bottom: 7px; font-size: var(--text-xs); }
.company-signal-section ul,
.company-strategy-columns ul { gap: 5px; padding-left: 18px; font-size: var(--text-sm); line-height: 1.6; }
.company-strategic-events li { padding: 10px 11px; }
.company-strategic-events li strong { font-size: var(--text-sm); }
.company-strategic-events li small { margin-top: 3px; font-size: 10px; }
.company-strategic-events li p { margin-top: 4px; font-size: var(--text-xs); line-height: 1.55; }
.company-strategic-events li a { font-size: 10px; }
.company-buyer-map article { padding: 9px; }
.company-buyer-map strong { font-size: var(--text-sm); }
.company-buyer-map p { margin: 3px 0; font-size: var(--text-xs); }
.company-buyer-map small { font-size: 10px; line-height: 1.55; }
.company-proof-list li { padding: 9px 10px; }
.company-proof-list strong { font-size: var(--text-sm); }
.company-proof-list p { margin-top: 3px; font-size: var(--text-xs); line-height: 1.55; }
.company-proof-list li > span { padding: 3px 6px; font-size: 10px; }
.company-proof-list a { font-size: 10px; }
.company-research-candidates > summary strong { font-size: var(--text-sm); }
.company-research-candidates > summary small { font-size: var(--text-xs); }
.company-research-candidates article span { font-size: 10px; }
.company-research-candidates article strong { font-size: var(--text-sm); }
.company-research-candidates article p { margin-top: 3px; font-size: var(--text-xs); }
.company-research-candidates article > b { font-size: 10px; }
.candidate-review-actions button { height: var(--control-height-micro); min-height: var(--control-height-micro); padding: 0 8px; border-radius: var(--control-radius-micro); font-size: var(--text-xs); }
.company-identity-status { padding: 4px 8px; font-size: var(--text-xs); }
.company-intelligence-facts span,
.company-intelligence-markets > span { font-size: var(--text-xs); }
.company-product-title-line > span { font-size: 10px; }
.company-product-actions .button { height: var(--control-height-micro); min-height: var(--control-height-micro); padding: 0 8px; border-radius: var(--control-radius-micro); font-size: var(--text-xs); }
.company-product-metrics span,
.company-product-context > span { font-size: var(--text-xs); }
.company-product-metrics strong { font-size: var(--text-sm); }
.company-product-context > div > span { font-size: var(--text-xs); }
.company-product-context small { font-size: 10px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
.panel-intro { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }
.panel-intro > div:first-child { display: flex; align-items: center; gap: 12px; }
.panel-intro p { margin: 0; color: var(--ink-soft); font-size: var(--text-sm); }
.inline-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.inline-actions > select,
.panel-intro-actions > select,
.draft-toolbar select,
.outreach-reply-actions select,
.mail-compose-formatbar select {
  height: var(--control-height-compact);
  min-height: var(--control-height-compact);
  padding: 0 30px 0 10px;
  border-radius: var(--control-radius-compact);
  font-size: var(--text-xs);
}
.ai-action-strip { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: -5px 0 20px; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--green-2) 26%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--green-soft) 54%, var(--surface)); }
.ai-action-copy { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ai-action-copy > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--green); color: var(--accent-contrast); flex: none; }
.ai-action-copy .ui-icon { width: 15px; height: 15px; }
.ai-action-copy strong, .ai-action-copy small { display: block; }
.ai-action-copy strong { font-size: var(--text-label); }
.ai-action-copy small { margin-top: 2px; color: var(--ink-soft); font-size: var(--text-xs); }
.ai-action-trigger { white-space: nowrap; }
.number-badge { min-width: 44px; height: 36px; display: grid; place-items: center; padding: 0 8px; border-radius: 10px; background: var(--green-soft); color: var(--green); font-size: var(--text-xs); font-weight: 750; white-space: nowrap; }
.required-note { color: #a26b4a; font-size: var(--text-xs); }
.workspace-footnote { margin: 18px 0 0; color: var(--ink-faint); font-size: var(--text-xs); text-align: right; }

.form-grid { display: grid; gap: 16px; }
.form-grid.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: grid; gap: 7px; }
.field > span { font-size: var(--text-label); font-weight: 600; }
.field small { color: #939a94; font-size: var(--text-xs); }
.full-width { grid-column: 1 / -1; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--field); color: var(--ink); outline: none; transition: .18s ease; }
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"])), select { height: var(--control-height); min-height: var(--control-height); padding: 0 12px; }
select { padding-right: 32px; }
textarea { padding: 11px 12px; resize: vertical; line-height: 1.6; }
input[type="checkbox"], input[type="radio"] { padding: 0; }
input:focus, textarea:focus, select:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-2) 13%, transparent); }
input::placeholder, textarea::placeholder { color: #a7ada8; }
.input-prefix { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.input-prefix:focus-within { border-color: var(--green-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-2) 13%, transparent); }
.input-prefix span { padding-left: 12px; color: var(--ink-faint); }
.input-prefix span .ui-icon { width: 16px; height: 16px; }
.input-prefix input { border: 0; box-shadow: none; }
.panel-actions { display: flex; align-items: center; margin-top: 24px; }
.panel-actions.end { justify-content: flex-end; }
.panel-actions.between { justify-content: space-between; }

.import-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, .7fr); gap: 16px; }
.import-box, .filter-card, .pattern-form, .pattern-result, .matched-cases, .template-editor, .draft-preview-pane { border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }
.import-box { padding: 16px; }
.import-tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.import-tab { border: 0; background: transparent; padding: 8px 11px; color: var(--ink-soft); font-size: var(--text-sm); cursor: pointer; border-bottom: 2px solid transparent; }
.import-tab.active { color: var(--green); border-bottom-color: var(--green); font-weight: 700; }
.import-pane { display: none; }
.import-pane.active { display: block; }
.upload-drop { min-height: 190px; display: grid; place-items: center; align-content: center; gap: 7px; border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--surface-raised); cursor: pointer; }
.upload-drop small { color: var(--ink-soft); }
.upload-icon { color: var(--green-2); }.upload-icon .ui-icon { width: 28px; height: 28px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.filter-card { padding: 16px; }
.keyword-wrap { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; }
.keyword-wrap span { padding: 5px 8px; border-radius: 6px; color: var(--green); background: var(--green-soft); font-size: var(--text-xs); font-weight: 600; }
.rule-line { display: flex; justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--text-sm); }
.rule-line span { color: var(--ink-soft); }
.filter-card > p { margin: 10px 0 0; color: #8d948f; font-size: var(--text-xs); line-height: var(--line-body); }
.role-calibration-grid, .appmagic-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 16px; }
.role-selector-card { padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }
.role-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 16px; }
.role-option { display: flex; align-items: flex-start; gap: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-raised); cursor: pointer; }
.role-option:has(input:checked) { border-color: color-mix(in srgb, var(--green-2) 55%, var(--line)); background: var(--green-soft); }
.role-option input { width: 14px; margin-top: 2px; }
.role-option strong, .role-option small { display: block; }
.role-option strong { font-size: var(--text-label); }.role-option small { margin-top: 2px; color: var(--ink-soft); font-size: var(--text-xs); }
.custom-role-field { margin-top: 4px; }
.linkedin-check-card { display: grid; align-content: start; gap: 13px; }
.check-list { display: grid; gap: 8px; }
.check-list p { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.5; }
.check-list span { width: 20px; height: 20px; display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: var(--text-xs); font-weight: 700; }
.linkedin-observation-workbench { margin-top: 16px; padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }
.linkedin-observation-workbench > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.linkedin-observation-workbench h4 { margin: 3px 0 0; font-size: var(--text-md); }
.linkedin-observation-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 12px; }
.linkedin-observation-form .full-width { grid-column: 1 / -1; }
.linkedin-observation-list { display: grid; gap: 8px; margin-top: 14px; }
.linkedin-observation-list > .muted { margin: 0; }
.linkedin-observation-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); }
.linkedin-observation-item strong, .linkedin-observation-item small { display: block; }
.linkedin-observation-item small { margin-top: 3px; color: var(--ink-soft); line-height: 1.5; }
.linkedin-observation-item-actions { display: flex; align-items: center; gap: 5px; }
.linkedin-observation-item-actions a, .linkedin-observation-item-actions button { width: 29px; height: 29px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.linkedin-observation-item-actions a:hover, .linkedin-observation-item-actions button:hover { background: var(--surface-soft); color: var(--green-2); }
.linkedin-observation-item-actions .ui-icon { width: 15px; height: 15px; }
.filter-card .compact-field { margin-top: 12px; }
.filter-card .compact-check { margin-top: 12px; padding: 9px 10px; background: var(--surface-raised); }
.prospect-source { display: block; margin-top: 3px; color: var(--ink-faint); font-size: 10px; }
.prospect-photo-shell { position: relative; overflow: hidden; }
.prospect-photo-shell > span { position: relative; z-index: 0; }
.prospect-company-logo, .prospect-photo { width: 100%; height: 100%; display: block; position: absolute; inset: 0; }
.prospect-company-logo { z-index: 1; box-sizing: border-box; padding: 14%; background: #f6f8f6; object-fit: contain; }
.prospect-photo { z-index: 2; object-fit: cover; }
.prospect-action-cell { width: 86px; white-space: nowrap; }
.prospect-action-cell .button { padding-inline: 8px; }
.prospect-row { cursor: pointer; }
.prospect-row:hover td { background: color-mix(in srgb, var(--green-soft) 26%, var(--surface-raised)); }
.prospect-row.details-open td { border-bottom-color: transparent; background: var(--surface-soft); }
.prospect-detail-row td { padding: 0; border-top: 0; background: var(--surface-soft); }
.prospect-detail-panel { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; padding-left: 0; border-top: 0; background: var(--surface-soft); }
.prospect-detail-information { min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.prospect-detail-cell { min-width: 0; padding: 9px 11px 10px; border-right: 1px solid var(--line); }
.prospect-detail-information .prospect-detail-cell:last-child { border-right: 0; }
.prospect-detail-cell > span { display: block; margin-bottom: 6px; color: var(--ink-faint); font-size: 9px; font-weight: 600; }
.prospect-detail-fact > div { min-width: 0; display: flex; align-items: center; gap: 6px; }
.prospect-detail-fact strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 11px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.prospect-email-fact strong { font-size: var(--text-sm); }
.prospect-email-fact button { width: 22px; height: 22px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.prospect-email-fact button:hover { background: var(--surface-raised); color: var(--green); }
.prospect-email-fact button .ui-icon { width: var(--text-sm); height: var(--text-sm); }
.prospect-detail-copy p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--ink-soft); font-size: 10px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.prospect-detail-toolbar { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prospect-detail-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 3px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.prospect-detail-actions::-webkit-scrollbar { display: none; }
.prospect-detail-actions .button.secondary.compact, .prospect-inline-email button.prospect-smart-email-guess { width: auto; height: 21px; min-height: 21px; display: inline-flex; align-items: center; gap: 2px; padding: 0 5px; border: 1px solid color-mix(in srgb, var(--line) 72%, transparent); border-radius: 5px; background: transparent; color: var(--ink-soft); font-size: 9px; font-weight: 600; line-height: 1; white-space: nowrap; transform: none; }
.prospect-detail-actions .button.secondary.compact:hover, .prospect-inline-email button.prospect-smart-email-guess:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--surface-raised) 44%, transparent); color: var(--ink); transform: none; }
.prospect-detail-actions .button.secondary.compact .button-icon { width: 9px; height: 9px; stroke-width: 1.7; }
.prospect-detail-actions .prospect-credit-verify.is-verified { border-color: color-mix(in srgb, var(--green) 28%, var(--line)); color: var(--green); opacity: 1; cursor: default; }
.prospect-detail-actions a { text-decoration: none; }
.prospect-inline-email-list { min-width: 0; display: grid; flex: none; gap: 2px; padding-right: 8px; }
.prospect-inline-email { min-width: 0; min-height: 22px; display: inline-flex; align-items: center; flex: none; gap: 5px; color: var(--ink-faint); font-size: 9px; line-height: 1; white-space: nowrap; }
.prospect-inline-email > span, .prospect-inline-email strong { display: inline-flex; align-items: center; height: 100%; line-height: 1; }
.prospect-inline-email strong { max-width: 210px; overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; }
.prospect-email-guess-label { display: inline-flex; align-items: center; padding: 2px 5px; border-radius: 5px; background: var(--warning); color: var(--warning-ink); font-size: 8px; font-style: normal; font-weight: 700; line-height: 1; }
.prospect-inline-email button { width: 18px; height: 18px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.prospect-inline-email button:hover { background: var(--surface-soft); color: var(--green); }
.prospect-inline-email button .ui-icon { width: 11px; height: 11px; }
.prospect-inline-email.is-unknown strong { color: var(--ink-faint); font-weight: 550; }
.prospect-inline-email button.prospect-smart-email-guess:disabled { cursor: wait; opacity: .65; }
.prospect-data-note { margin: 11px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--warning); color: var(--warning-ink); font-size: var(--text-xs); line-height: 1.5; }
.prospect-data-note.complete { background: var(--green-soft); color: var(--green-2); }
.prospect-data-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.prospect-data-chips span { padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--ink-soft); font-size: 10px; }
.prospect-history > div { display: grid; gap: 6px; }
.prospect-history article { min-width: 0; }
.prospect-history b, .prospect-history small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prospect-history b { color: var(--ink); font-size: 10px; }
.prospect-history small { margin-top: 2px; color: var(--ink-faint); font-size: 9px; }
.prospect-detail-tools { grid-column: 1; min-width: 0; display: block; padding-left: 11px; border-right: 0; border-bottom: 0; background: transparent; }
.prospect-detail-tools .prospect-detail-actions { justify-content: flex-end; }
.prospect-detail-collapse { width: 100%; min-height: 30px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 11px; border: 0; background: transparent; color: var(--ink-faint); font: inherit; font-size: 9px; font-weight: 650; cursor: pointer; transform: none; }
.prospect-detail-collapse:hover { background: transparent; color: var(--green); transform: none; }
.prospect-detail-collapse .ui-icon { width: 11px; height: 11px; transform: rotate(180deg); }
.apollo-search-loading .button-icon { animation: spin .8s linear infinite; }
.prospect-research-button.is-loading .button-icon { animation: spin .8s linear infinite; }
.prospect-apollo-profile { margin: 10px 11px 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-raised); overflow: hidden; }
.prospect-apollo-header { min-height: 43px; display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.prospect-apollo-mark { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; color: var(--green); background: var(--surface-soft); }
.prospect-apollo-mark .ui-icon { width: 14px; height: 14px; }
.prospect-apollo-header strong, .prospect-apollo-header small { display: block; }
.prospect-apollo-header strong { color: var(--ink); font-size: 11px; }
.prospect-apollo-header small { margin-top: 2px; color: var(--ink-faint); font-size: 8px; line-height: 1.35; }
.prospect-apollo-header > em { padding: 3px 6px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 8px; font-style: normal; font-weight: 700; white-space: nowrap; }
.prospect-apollo-headline { margin: 0; padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.prospect-apollo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.prospect-apollo-grid > article { min-width: 0; padding: 9px 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.prospect-apollo-grid > article:last-child { border-right: 0; }
.prospect-apollo-grid > article > span, .prospect-apollo-history > span { display: block; margin-bottom: 6px; color: var(--ink-faint); font-size: 9px; font-weight: 700; }
.prospect-apollo-grid dl { display: grid; gap: 5px; margin: 0; }
.prospect-apollo-grid dl > div { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px; font-size: 9px; line-height: 1.4; }
.prospect-apollo-grid dt { color: var(--ink-faint); }
.prospect-apollo-grid dd { min-width: 0; margin: 0; overflow: hidden; color: var(--ink-soft); text-overflow: ellipsis; white-space: nowrap; }
.prospect-apollo-tags, .prospect-apollo-availability, .prospect-apollo-links { display: flex; flex-wrap: wrap; gap: 4px; }
.prospect-apollo-tags em, .prospect-apollo-availability em { padding: 3px 5px; border-radius: 5px; background: var(--green-soft); color: var(--green); font-size: 8px; font-style: normal; }
.prospect-apollo-availability em { background: var(--surface-soft); color: var(--ink-soft); }
.prospect-apollo-grid article > small { display: block; margin-top: 6px; color: var(--ink-faint); font-size: 8px; line-height: 1.4; }
.prospect-apollo-links { margin-top: 7px; }
.prospect-apollo-links a { display: inline-flex; align-items: center; gap: 3px; color: var(--green); font-size: 8px; font-weight: 650; text-decoration: none; }
.prospect-apollo-links a:hover { color: var(--green-2); }
.prospect-apollo-links .ui-icon { width: 9px; height: 9px; }
.prospect-apollo-history { padding: 9px 10px 10px; }
.prospect-apollo-history > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.prospect-apollo-history article { min-width: 0; padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-soft); }
.prospect-apollo-history strong, .prospect-apollo-history small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prospect-apollo-history strong { color: var(--ink); font-size: 9px; }
.prospect-apollo-history small { margin-top: 2px; color: var(--ink-faint); font-size: 8px; }
.prospect-apollo-history p { margin: 5px 0 0; color: var(--ink-soft); font-size: 8px; line-height: 1.45; }
.prospect-unified-profile { margin: 10px 11px 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-raised); overflow: hidden; }
.prospect-unified-profile > header { min-height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.prospect-unified-profile.is-compact > header { border-bottom: 0; }
.prospect-unified-profile > header strong, .prospect-unified-profile > header small { display: block; }
.prospect-unified-profile > header strong { color: var(--ink); font-size: 11px; }
.prospect-unified-profile > header small { margin-top: 2px; color: var(--ink-faint); font-size: 8px; line-height: 1.35; }
.prospect-unified-sources { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px; }
.prospect-unified-sources em, .prospect-unified-source { display: inline-flex; align-items: center; padding: 3px 5px; border-radius: 5px; background: var(--green-soft); color: var(--green); font-size: 8px; font-style: normal; font-weight: 700; line-height: 1; white-space: nowrap; }
.prospect-unified-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 0; background: var(--surface-raised); }
.prospect-unified-grid > article { min-width: 0; padding: 10px 11px; border: 0; background: var(--surface-raised); }
.prospect-unified-grid > article > span { display: flex; align-items: center; gap: 5px; margin-bottom: 7px; color: var(--ink-faint); font-size: 10px; font-weight: 700; }
.prospect-unified-grid dl { display: grid; gap: 5px; margin: 0; }
.prospect-unified-grid dl > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px; font-size: 9px; line-height: 1.45; }
.prospect-unified-grid dt { color: var(--ink-faint); }
.prospect-unified-grid dd { min-width: 0; margin: 0; color: var(--ink-soft); }
.prospect-unified-grid article > small { display: block; margin-top: 6px; color: var(--ink-faint); font-size: 8px; line-height: 1.4; }
.prospect-unified-narrative p { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.55; }
.prospect-unified-narrative ul { display: grid; gap: 4px; margin: 7px 0 0; padding-left: 15px; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.prospect-unified-narrative li::marker { color: var(--green); }
.prospect-unified-narrative dl { margin-top: 8px; }
.prospect-unified-narrative dl > div { gap: 8px; font-size: 10px; line-height: 1.5; }
.prospect-unified-history > span { justify-content: space-between; }
.prospect-unified-history > span > button { display: none; padding: 0; border: 0; background: transparent; color: var(--green-2); font: inherit; font-size: 9px; font-weight: 700; cursor: pointer; }
.prospect-unified-history.is-collapsible > span > button { display: inline-flex; }
.prospect-unified-history-content { display: grid; gap: 7px; }
.prospect-unified-history.is-collapsed .prospect-unified-history-content { display: none; }
.prospect-unified-history p { margin: 0; color: var(--ink-soft); font-size: 9px; line-height: 1.45; }
.prospect-unified-history p + p { padding-top: 7px; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.prospect-unified-history strong { display: block; color: var(--ink); font-size: 9px; line-height: 1.4; }
.prospect-unified-history small { display: block; margin-top: 2px; color: var(--ink-faint); font-size: 8px; line-height: 1.4; }
.prospect-basic-research { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); margin: 10px 11px 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-raised); overflow: hidden; }
.prospect-basic-research > div { min-width: 0; padding: 9px 10px; border-right: 1px solid var(--line); }
.prospect-basic-research > div:last-child { border-right: 0; }
.prospect-basic-research span, .prospect-basic-research strong, .prospect-basic-research small { display: block; overflow: hidden; text-overflow: ellipsis; }
.prospect-basic-research span { margin-bottom: 5px; color: var(--ink-faint); font-size: 9px; font-weight: 700; }
.prospect-basic-research strong { color: var(--ink); font-size: 10px; line-height: 1.45; white-space: nowrap; }
.prospect-basic-research small { margin-top: 3px; color: var(--ink-faint); font-size: 8px; line-height: 1.4; white-space: nowrap; }
.prospect-public-research-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr) minmax(0, 1.05fr); margin: 10px 11px 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-raised); overflow: hidden; }
.prospect-public-research-grid.is-updating { opacity: .78; }
.prospect-public-research-grid > article { min-width: 0; padding: 9px 10px; border-right: 1px solid var(--line); }
.prospect-public-research-grid > article:nth-child(3) { border-right: 0; }
.prospect-public-research-grid > article > span { display: block; margin-bottom: 5px; color: var(--ink-faint); font-size: 9px; font-weight: 700; }
.prospect-public-research-grid p { margin: 0; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.prospect-public-research-grid ul { display: grid; gap: 3px; margin: 6px 0 0; padding-left: 14px; color: var(--ink-soft); font-size: 9px; line-height: 1.45; }
.prospect-public-research-grid li::marker { color: var(--green); }
.prospect-research-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.prospect-research-tags em { padding: 3px 5px; border-radius: 5px; background: var(--green-soft); color: var(--green); font-size: 9px; font-style: normal; }
.prospect-research-tags small { color: var(--ink-faint); font-size: 9px; }
.prospect-public-research-grid dl { display: grid; gap: 5px; margin: 7px 0 0; }
.prospect-public-research-grid dl > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px; font-size: 9px; line-height: 1.45; }
.prospect-public-research-grid dt { color: var(--ink-faint); }
.prospect-public-research-grid dd { margin: 0; color: var(--ink-soft); }
.prospect-research-footer { min-width: 0; padding: 0 11px 7px; }
.prospect-research-sources { min-width: 0; }
.prospect-research-sources > summary { min-height: 29px; display: flex; align-items: center; gap: 7px; color: var(--ink-faint); font-size: 9px; font-weight: 700; list-style: none; cursor: pointer; }
.prospect-research-sources > summary::-webkit-details-marker { display: none; }
.prospect-research-sources > summary > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prospect-research-sources > summary > em { margin-left: auto; color: var(--ink-soft); font-size: 8px; font-style: normal; font-weight: 600; white-space: nowrap; }
.prospect-research-sources > summary > .ui-icon { width: 12px; height: 12px; flex: none; transition: transform .16s ease; }
.prospect-research-sources[open] > summary > .ui-icon { transform: rotate(180deg); }
.prospect-research-sources > div { display: grid; gap: 4px; padding: 2px 0 7px; }
.prospect-research-footer a { min-width: 0; display: grid; grid-template-columns: 16px minmax(0, 1fr) 13px; align-items: center; gap: 6px; padding: 6px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-raised); color: var(--ink-soft); font-size: 9px; line-height: 1.4; text-decoration: none; }
.prospect-research-footer a b { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 8px; }
.prospect-research-footer a span { min-width: 0; overflow-wrap: anywhere; }
.prospect-research-footer a > .ui-icon { width: 12px; height: 12px; }
.prospect-research-sources > p { margin: 0 0 7px; color: var(--ink-faint); font-size: 9px; }
.prospect-research-state { min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-bottom: 0; }
.prospect-research-state > .button-icon { width: 18px; height: 18px; flex: none; color: var(--green); }
.prospect-research-state.is-loading > .button-icon { animation: spin .8s linear infinite; }
.prospect-research-state.is-error > .button-icon { color: var(--danger); }
.prospect-research-state.is-warning > .button-icon { color: var(--warning-ink); }
.prospect-research-state strong, .prospect-research-state span { display: block; }
.prospect-research-state strong { font-size: var(--text-xs); }
.prospect-research-state span { margin-top: 3px; color: var(--ink-soft); font-size: 10px; }
.prospect-research-upgrade { margin: 8px 11px; border: 1px solid color-mix(in srgb, var(--warning-ink) 24%, var(--line)); border-radius: 9px; background: color-mix(in srgb, var(--warning-ink) 5%, var(--surface-raised)); }
.prospect-research-upgrade > div { min-width: 0; flex: 1; }
.prospect-research-upgrade > .button { flex: none; margin-left: auto; white-space: nowrap; }
.prospect-research-upgrade > .button .button-icon { width: 14px; height: 14px; }

.table-wrap { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 650px; }
th { background: var(--table-head); color: var(--ink-soft); padding: 10px 12px; font-size: var(--text-xs); letter-spacing: .035em; text-align: left; }
td { padding: 12px; border-top: 1px solid var(--line); font-size: var(--text-label); }
.check-cell { width: 42px; text-align: center; }
.check-cell input { width: 14px; }
.empty-row td { padding: 28px; color: #969d98; text-align: center; }
.person-cell { display: flex; align-items: center; gap: 9px; }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #e6ece7; color: var(--green); font-size: var(--text-xs); font-weight: 700; }
.score { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.score::before { content: ""; width: 24px; height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--green-2) var(--score), #e3e7e3 var(--score)); }
.badge { display: inline-flex; padding: 4px 7px; border-radius: 999px; font-size: var(--text-xs); font-weight: 700; }
.badge.good { background: #e5f2e9; color: #17613f; }
.badge.medium { background: #fff2d4; color: #8a6417; }
.badge.low { background: #f0f1ef; color: #717771; }
.email-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-sm); }

.credit-pill, .review-pill { padding: 7px 10px; border-radius: 999px; background: var(--lime); color: #33451d; font-size: var(--text-xs); font-weight: 700; }
.pattern-grid { display: grid; grid-template-columns: minmax(270px, .8fr) minmax(0, 1.2fr); gap: 16px; }
.pattern-form, .pattern-result { padding: 18px; }
.pattern-form { display: grid; gap: 14px; }
.pattern-placeholder { min-height: 138px; display: grid; place-items: center; align-content: center; text-align: center; color: #8a938c; }
.pattern-placeholder > span { color: #9cb8aa; }
.pattern-placeholder p { max-width: 250px; margin: 8px auto 0; font-size: var(--text-sm); line-height: var(--line-body); }
.pattern-success { min-height: 138px; display: flex; flex-direction: column; justify-content: center; }
.pattern-code { display: inline-flex; align-self: flex-start; padding: 9px 12px; border-radius: 8px; color: var(--green); background: var(--green-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; }
.confidence-row { display: flex; justify-content: space-between; margin-top: 14px; color: var(--ink-soft); font-size: var(--text-sm); }
.notice { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 10px; font-size: var(--text-sm); line-height: var(--line-body); }
.notice > span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; flex: none; }
.notice > span .ui-icon { width: 14px; height: 14px; }
.notice p { margin: 1px 0 0; }
.notice.warning { background: var(--warning); color: var(--warning-ink); }
.notice.warning > span { background: var(--warning-chip); }
.notice.info { background: var(--info-bg); color: var(--info-ink); }
.notice.info > span { background: var(--info-chip); }

.case-rule-banner { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--privacy-line); background: var(--privacy-bg); border-radius: 11px; }
.case-rule-banner span { display: block; color: var(--ink-soft); font-size: var(--text-xs); }
.case-rule-banner strong { font-size: var(--text-label); }
.case-rule-banner p { margin: 0; color: var(--ink-soft); font-size: var(--text-xs); }
.case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.case-card { padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); }
.case-card-head { display: flex; justify-content: space-between; gap: 10px; }
.case-card h4 { margin-bottom: 3px; }
.case-card p { margin: 0; color: var(--ink-soft); font-size: var(--text-sm); }
.case-meta { display: grid; gap: 7px; margin-top: 13px; }
.case-meta div { display: flex; justify-content: space-between; font-size: var(--text-xs); }
.case-meta span { color: #858e87; }
.case-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.case-card-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
.delete-case { border: 0; background: transparent; color: #9aa19c; cursor: pointer; }
.matched-cases { margin-top: 16px; padding: 16px; }
.matched-head { display: flex; justify-content: space-between; align-items: center; }
.matched-case-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.matched-chip { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 8px; background: var(--surface-raised); border: 1px solid var(--line); font-size: var(--text-sm); }
.match-score { color: var(--green); font-weight: 700; }
.panel-intro-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.pattern-fallback-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.pattern-fallback-head strong { color: var(--ink); font-size: var(--text-label); }
.pattern-fallback-head span { color: var(--ink-faint); font-size: var(--text-xs); }

.draft-layout { display: grid; grid-template-columns: minmax(310px, .8fr) minmax(0, 1.2fr); gap: 16px; }
.template-editor, .draft-preview-pane { padding: 16px; }
.template-editor { display: grid; gap: 13px; }
.variable-list { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.variable-list > span { margin-right: 4px; color: var(--ink-soft); font-size: var(--text-xs); }
.variable-list button { border: 1px solid var(--line); border-radius: 5px; background: var(--surface-raised); padding: 4px 6px; color: var(--green-2); font-family: ui-monospace, monospace; font-size: var(--text-xs); cursor: pointer; }
.draft-generation-actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; }
.draft-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.draft-toolbar > div { display: flex; gap: 7px; align-items: center; }
.draft-toolbar .mini-label { margin: 0; }
.draft-queue-status { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--surface-soft); color: var(--ink-soft); font-size: var(--text-xs); }
.draft-approval-badge { display: inline-flex; align-items: center; padding: 4px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.draft-approval-badge.pending { background: var(--warning); color: var(--warning-ink); }
.draft-approval-badge.approved { background: var(--green-soft); color: var(--green-2); }
.draft-approval-badge.queued { background: color-mix(in srgb, var(--green-soft) 55%, var(--surface)); color: var(--green); }
.draft-approval-badge.sent { background: var(--green); color: var(--accent-contrast); }
.draft-approval-badge.blocked, .draft-approval-badge.failed { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
.draft-card-head-actions { display: flex; align-items: center; gap: 7px; }
.outreach-inbox { display: grid; gap: 9px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.outreach-inbox-head { display: flex; align-items: center; justify-content: space-between; }
.outreach-inbox-head h4 { margin: 0; font-size: var(--text-md); }
.outreach-inbox-head span { color: var(--ink-faint); font-size: var(--text-xs); }
.outreach-reply-card, .follow-up-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); }
.outreach-reply-card strong, .outreach-reply-card span, .follow-up-card strong, .follow-up-card span { display: block; }
.outreach-reply-card span, .follow-up-card span { margin-top: 3px; color: var(--ink-soft); font-size: var(--text-xs); }
.outreach-reply-actions, .follow-up-actions { display: flex; align-items: center; gap: 6px; }
.reply-classification { padding: 5px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--ink-soft); font-size: var(--text-xs); }
.draft-list { display: grid; gap: 10px; max-height: 610px; margin-top: 13px; overflow: auto; padding-right: 2px; }
.draft-card { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); overflow: hidden; }
.draft-card-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: var(--surface-soft); }
.draft-recipient { display: flex; gap: 8px; align-items: center; }
.draft-recipient strong { display: block; font-size: var(--text-label); }
.draft-recipient span { color: var(--ink-soft); font-size: var(--text-xs); }
.draft-card-body { padding: 12px; }
.draft-subject { padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.draft-copy { margin: 0; white-space: pre-wrap; color: var(--ink-soft); font-size: var(--text-sm); line-height: var(--line-body); }
.contact-discovery-guide { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.contact-discovery-guide > div { position: relative; min-width: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.contact-discovery-guide > div > span { width: 26px; height: 26px; display: grid; place-items: center; grid-row: 1 / span 2; border-radius: 8px; background: var(--surface-raised); color: var(--ink-faint); font-size: 10px; font-weight: 800; }
.contact-discovery-guide > div strong, .contact-discovery-guide > div small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-discovery-guide > div strong { font-size: var(--text-xs); }
.contact-discovery-guide > div small { margin-top: 2px; color: var(--ink-faint); font-size: 9px; }
.contact-discovery-guide > div.active { border-color: color-mix(in srgb, var(--green-2) 32%, var(--line)); background: var(--green-soft); }
.contact-discovery-guide > div.active > span { color: var(--green); }
.contact-discovery-layout { display: grid; gap: 10px; }
.contact-search-profile-card { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); }
.contact-search-profile-card > header { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 9px; margin-bottom: 12px; }
.contact-search-profile-card > header strong, .contact-search-profile-card > header small { display: block; }
.contact-search-profile-card > header strong { font-size: var(--text-label); }
.contact-search-profile-card > header small { margin-top: 2px; color: var(--ink-faint); font-size: 10px; }
.contact-role-choice-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.contact-role-choice { min-width: 0; display: grid; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.contact-role-choice:hover, .contact-role-choice.active { border-color: color-mix(in srgb, var(--green-2) 44%, var(--line)); background: var(--green-soft); }
.contact-role-choice > span { color: var(--green); font-size: 9px; font-weight: 750; }
.contact-role-choice > strong { overflow: hidden; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.contact-role-choice > small { color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.contact-search-conditions { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(150px, .75fr)); gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.contact-search-conditions > div { min-width: 0; }
.contact-search-conditions span { display: block; margin-bottom: 6px; color: var(--ink-faint); font-size: 10px; }
.contact-search-conditions p { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; color: var(--ink-soft); font-size: var(--text-xs); }
.contact-search-conditions em { padding: 4px 6px; border-radius: 7px; background: var(--surface-soft); color: var(--ink-soft); font-size: 10px; font-style: normal; }
.contact-search-conditions strong { display: block; font-size: var(--text-xs); line-height: 1.5; }
.contact-source-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.contact-source-card { min-width: 0; min-height: 170px; display: flex; flex-direction: column; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-raised); }
.contact-source-card.is-primary { border-color: color-mix(in srgb, var(--green-2) 26%, var(--line)); }
.contact-source-card > header { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 8px; }
.contact-source-card > header > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--green-soft); color: var(--green); }
.contact-source-card > header .ui-icon { width: 15px; height: 15px; }
.contact-source-card > header strong, .contact-source-card > header small { display: block; }
.contact-source-card > header strong { font-size: var(--text-xs); }
.contact-source-card > header small { margin-top: 2px; color: var(--ink-faint); font-size: 9px; }
.contact-source-card > p { margin: 14px 0 12px; color: var(--ink-soft); font-size: 10px; line-height: 1.55; }
.contact-source-card > .button { align-self: flex-start; margin-top: auto; }
.contact-source-count { display: flex; align-items: baseline; gap: 6px; margin: 12px 0 8px; }
.contact-source-count strong { color: var(--green); font-size: var(--text-lg); }
.contact-source-count span { color: var(--ink-faint); font-size: 10px; }
.contact-research-result { border: 1px solid var(--line); border-radius: 13px; background: var(--surface-raised); overflow: hidden; }
.contact-research-result > header { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; border-bottom: 1px solid var(--line); background: var(--surface-raised); }
.contact-research-result > header strong { display: block; font-size: var(--text-label); }
.contact-research-body { display: grid; grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr); }
.contact-search-profile { min-width: 0; padding: 16px; border-right: 1px solid var(--line); }
.contact-search-profile h4 { margin: 5px 0 0; font-size: var(--text-lg); }
.contact-search-profile > p { margin: 6px 0 0; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.55; }
.contact-profile-title-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.contact-profile-title-list span { padding: 5px 7px; border-radius: 7px; background: var(--green-soft); color: var(--green); font-size: 10px; font-weight: 650; }
.contact-search-profile footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 9px; }
.contact-profile-empty strong { font-size: var(--text-label); }
.contact-profile-empty p { margin: 5px 0 0; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.5; }
.contact-architecture { min-width: 0; padding: 14px 16px 16px; }
.contact-architecture > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.contact-architecture > header strong { display: block; max-width: 620px; margin-top: 3px; font-size: var(--text-xs); line-height: 1.5; }
.contact-architecture > header > span { flex: none; color: var(--ink-faint); font-size: 9px; }
.contact-architecture-flow { display: flex; align-items: stretch; gap: 18px; overflow-x: auto; padding: 1px; }
.contact-architecture-flow article { position: relative; min-width: 152px; flex: 1; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-raised); }
.contact-architecture-flow article:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: -15px; color: var(--ink-faint); font-size: 12px; transform: translateY(-50%); }
.contact-architecture-flow article > div { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.contact-architecture-flow article > div span { color: var(--ink-faint); font-size: 9px; }
.contact-architecture-flow article > div em { padding: 2px 5px; border-radius: 999px; background: var(--surface-raised); color: var(--ink-faint); font-size: 8px; font-style: normal; }
.contact-architecture-flow article.is-verified > div em { background: var(--green-soft); color: var(--green); }
.contact-architecture-flow article > strong { display: block; margin-top: 8px; font-size: var(--text-xs); }
.contact-architecture-flow article > p { margin: 4px 0 0; color: var(--ink); font-size: 10px; line-height: 1.45; }
.contact-architecture-flow article > small { display: block; margin-top: 5px; color: var(--ink-faint); font-size: 9px; line-height: 1.4; }
.contact-architecture-flow article > a { display: inline-block; margin-top: 6px; color: var(--green); font-size: 9px; text-decoration: none; }
.contact-architecture-empty { margin: 0; padding: 12px; border: 1px dashed var(--line); border-radius: 9px; color: var(--ink-soft); font-size: var(--text-xs); }
.contact-discovery-toolbar { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-raised); }
.contact-auto-search-state { min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 9px; }
.contact-auto-search-state > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-raised); color: var(--green); }
.contact-auto-search-state .ui-icon { width: 15px; height: 15px; }
.contact-auto-search-state strong { display: block; font-size: var(--text-xs); }
.contact-auto-search-state p { margin: 3px 0 0; color: var(--ink-faint); font-size: 9px; line-height: 1.45; }
.contact-existing-result { display: grid; grid-template-columns: minmax(190px, .42fr) minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); }
.contact-existing-result[hidden] { display: none !important; }
.contact-existing-result > div:first-child strong { display: block; margin-top: 3px; font-size: var(--text-xs); }
.contact-existing-result .relationship-contact-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.contact-existing-result .relationship-contact-list > button { min-width: 0; background: var(--surface-raised); }
.contact-candidate-layout { display: grid; grid-template-columns: minmax(0, 1fr) 204px; align-items: start; gap: 10px; }
.contact-table-module { min-width: 0; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-raised); overflow: hidden; }
.contact-table-toolbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--surface-raised); }
.contact-table-heading { min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 9px; }
.contact-table-heading > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--green-soft); color: var(--green); }
.contact-table-heading > span.apollo-brand-mark { border: 1px solid var(--line); background: #f1f2ee; color: #1f1f1e; }
.contact-table-heading .ui-icon { width: 15px; height: 15px; }
.contact-table-heading strong { display: block; font-size: var(--text-label); }
.contact-table-heading p { margin: 3px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; color: var(--ink-faint); font-size: 9px; line-height: 1.4; }
.contact-table-heading p b { color: var(--ink-soft); font-weight: 650; }
.contact-table-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.contact-table-actions .icon-button { width: var(--control-height-compact); height: var(--control-height-compact); flex: none; border: 1px solid var(--line); border-radius: var(--control-radius-compact); background: var(--surface-raised); color: var(--ink-soft); }
.contact-table-actions .icon-button:hover { border-color: var(--line-strong); color: var(--green); }
.contact-table-actions .ui-icon { width: 14px; height: 14px; }
.contact-library-table .prospect-selection-cell { display: none; }
.contact-table-module.is-multi-selecting .contact-library-table .prospect-selection-cell { display: table-cell; }
.prospect-multiselect-button[aria-pressed="true"] { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.contact-selection-bar { position: fixed; z-index: 32; left: calc(224px + 34px); right: calc(34px + 204px + 10px); bottom: 0; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 12px; border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--surface-raised); box-shadow: 0 -10px 28px rgba(10,24,17,.14); }
.contact-selection-bar[hidden] { display: none; }
.contact-selection-bar-left, .contact-selection-bar-actions { display: flex; align-items: center; gap: 7px; }
.contact-selection-all { min-height: var(--control-height-compact); display: inline-flex; align-items: center; gap: 7px; padding: 0 8px 0 4px; color: var(--ink-soft); font-size: 10px; font-weight: 650; cursor: pointer; white-space: nowrap; }
.contact-selection-all input { width: 14px; height: 14px; margin: 0; }
.contact-selection-count { min-height: var(--control-height-compact); display: inline-flex; align-items: center; padding: 0 10px; border-radius: 8px; background: var(--green-soft); color: var(--green); font-size: 10px; font-weight: 700; white-space: nowrap; }
.contact-selection-bar .button-icon { width: 13px; height: 13px; }
body.sidebar-collapsed .contact-selection-bar { left: calc(72px + 34px); }
.contact-flat-panel:has(.contact-selection-bar:not([hidden])) { padding-bottom: 58px; }
.contact-refresh-button { gap: 6px; }
.contact-refresh-button[hidden] { display: none; }
.contact-refresh-button .button-icon { width: 11px; height: 11px; }
.smart-email-button { gap: 5px; }
.smart-email-button.is-loading .button-icon { animation: spin .8s linear infinite; }
.smart-email-button:disabled { cursor: not-allowed; opacity: .5; }
.contact-library-table-wrap { margin: 0; border: 0; border-radius: 0; background: var(--surface-raised); overflow-x: hidden; }
.contact-library-table { width: 100%; min-width: 0; table-layout: fixed; background: var(--surface-raised); }
.contact-library-table th { padding: 6px 8px; font-size: 10px; }
.contact-library-table td { padding: 6px 8px; font-size: var(--text-xs); }
.contact-library-table th:nth-child(2) { width: 31%; }
.contact-library-table .prospect-row > td { min-width: 0; overflow: hidden; }
.contact-library-table .check-cell { width: 34px; padding-left: 8px; padding-right: 6px; }
.prospect-person-toggle { width: 100%; min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 7px; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.prospect-person-toggle .avatar { width: 28px; height: 28px; font-size: 9px; }
.prospect-person-toggle strong, .prospect-person-toggle small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prospect-person-toggle strong { font-size: var(--text-xs); }
.prospect-person-toggle small { margin-top: 2px; color: var(--ink-faint); font-size: 9px; }
.prospect-person-toggle small .prospect-email-guess-label { display: inline-flex; margin-left: 5px; padding: 1px 4px; border-radius: 4px; background: var(--warning); color: var(--warning-ink); font-size: 8px; font-style: normal; font-weight: 700; vertical-align: middle; }
.prospect-role-cell { min-width: 0; }
.prospect-role-layout { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 26px 26px 20px; align-items: center; gap: 6px; }
.prospect-role-layout > div { min-width: 0; }
.prospect-role-cell strong, .prospect-role-cell small { display: block; }
.prospect-role-cell strong { min-width: 0; overflow: hidden; font-size: var(--text-xs); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.prospect-row.details-open .prospect-role-cell strong { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.prospect-role-cell small { width: 100%; max-width: none; margin-top: 2px; overflow: hidden; color: var(--ink-faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.prospect-row.details-open .prospect-role-cell small { max-width: none; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
.prospect-source-chip { display: inline-flex; padding: 3px 6px; border-radius: 6px; background: var(--surface-soft); color: var(--ink-soft); font-size: 9px; }
.prospect-location { display: block; margin-top: 3px; color: var(--ink-faint); font-size: 9px; }
.prospect-status-heading { min-width: 135px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prospect-profile-status { min-width: 145px; display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; gap: 9px; }
.prospect-profile-status strong { font-size: 10px; }
.prospect-profile-status > div > small { display: block; max-width: 180px; margin-top: 3px; overflow: hidden; color: var(--ink-faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.prospect-match-meter { width: 26px; height: 26px; position: relative; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: conic-gradient(var(--green-2) var(--score), var(--line) 0); color: var(--ink); font-size: 9px; font-style: normal; font-weight: 750; line-height: 1; }
.prospect-match-meter::before { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--surface-raised); }
.prospect-match-meter > span { position: relative; z-index: 1; }
.prospect-library-button { width: 26px; height: 26px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-raised); color: var(--ink-soft); font: inherit; cursor: pointer; }
.prospect-library-button:hover { border-color: var(--line-strong); color: var(--green); }
.prospect-library-button .button-icon { width: 12px; height: 12px; }
.prospect-library-button > span { display: none; }
.prospect-library-button.is-added { border-color: color-mix(in srgb, var(--green-2) 24%, var(--line)); background: var(--green-soft); color: var(--green); opacity: 1; cursor: default; }
.prospect-row-toggle { width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ink-faint); cursor: pointer; }
.prospect-row-toggle:hover { background: var(--surface-soft); color: var(--green); }
.prospect-row-toggle .ui-icon { width: 13px; height: 13px; transition: transform .16s ease; }
.prospect-row-toggle[aria-expanded="true"] .ui-icon { transform: rotate(180deg); }
.contact-library-table .prospect-detail-row td { padding: 0; }

@media (max-width: 1100px) {
  .contact-library-table th:nth-child(2) { width: 27%; }
  .prospect-person-toggle { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .prospect-person-toggle > .avatar { display: none; }
  .prospect-role-layout { grid-template-columns: minmax(0, 1fr) 26px 26px; gap: 5px; }
  .prospect-row-toggle { display: none; }
  .prospect-detail-actions .button { gap: 0; }
  .prospect-detail-actions .button-icon { display: none; }
}
.contact-library-rail { position: sticky; top: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-raised); overflow: hidden; }
.contact-library-rail > header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--line); }
.contact-library-rail > header strong, .contact-library-rail > header small { display: block; }
.contact-library-rail > header strong { font-size: var(--text-label); }
.contact-library-rail > header small { margin-top: 3px; color: var(--ink-faint); font-size: 9px; }
.contact-library-mail-button { flex: 0 0 auto; }
.contact-library-list { max-height: 650px; overflow-y: auto; }
.contact-library-person { min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr) 22px; align-items: center; gap: 7px; padding: 9px 8px; border-bottom: 1px solid var(--line); }
.contact-library-person:last-child { border-bottom: 0; }
.contact-library-person > .avatar { width: 28px; height: 28px; font-size: 9px; }
.contact-library-person > div { min-width: 0; }
.contact-library-person strong, .contact-library-person small, .contact-library-person em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-library-person strong { font-size: var(--text-xs); }
.contact-library-person small { margin-top: 2px; color: var(--ink-soft); font-size: 9px; }
.contact-library-person em { margin-top: 3px; color: var(--ink-faint); font-size: 9px; font-style: normal; }
.contact-library-person > button { width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ink-faint); cursor: pointer; }
.contact-library-person > button:hover { background: var(--surface-soft); color: var(--danger); }
.contact-library-person > button .ui-icon { width: 12px; height: 12px; }
.contact-library-empty { min-height: 150px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 18px; color: var(--ink-faint); text-align: center; }
.contact-library-empty .ui-icon { width: 20px; height: 20px; }
.contact-library-empty p { margin: 0; font-size: 10px; line-height: 1.5; }
.contact-import-modal { width: min(900px, calc(100vw - 32px)); }
.contact-import-modal .modal-body { overflow-y: auto; }
.contact-import-modal .import-box, .contact-import-modal .filter-card { background: var(--surface-raised); }
.contact-import-modal .import-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 12px; }
.contact-import-modal .import-box, .contact-import-modal .contact-search-filter { min-width: 0; padding: 14px; }
.contact-import-modal .import-pane textarea { min-height: 236px; }
.contact-import-modal .keyword-wrap { gap: 5px; margin: 10px 0 12px; }
.contact-import-modal .keyword-wrap span { padding: 4px 7px; font-size: 10px; }
.contact-search-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 11px; }
.contact-search-rule-grid .rule-line { min-width: 0; display: grid; align-content: start; gap: 4px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); font-size: var(--text-xs); }
.contact-search-rule-grid .rule-line strong { line-height: 1.35; }
.contact-search-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.contact-search-filter .contact-search-field-grid .compact-field { min-width: 0; margin-top: 0; }
.contact-search-filter > .compact-check { margin-top: 10px; }
.outreach-decision-bar { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 14px; padding: 14px; border: 1px solid color-mix(in srgb, var(--green-2) 28%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--green-soft) 44%, var(--surface-raised)); }
.outreach-fit-score { width: 64px; height: 64px; display: grid; place-items: center; align-content: center; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-raised); }
.outreach-fit-score strong, .outreach-fit-score span { display: block; }
.outreach-fit-score strong { font-size: 24px; line-height: 1; }
.outreach-fit-score span { margin-top: 4px; color: var(--ink-soft); font-size: 10px; }
.outreach-fit-score.is-high strong { color: var(--green); }
.outreach-fit-score.is-medium strong { color: var(--warning-ink); }
.outreach-decision-main span, .outreach-decision-main strong { display: block; }
.outreach-decision-main span { color: var(--green); font-size: var(--text-xs); font-weight: 700; }
.outreach-decision-main strong { margin-top: 4px; font-size: var(--text-md); line-height: 1.55; }
.outreach-decision-meta { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; max-width: 330px; }
.outreach-decision-meta span { padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-raised); color: var(--ink-soft); font-size: 10px; }
.outreach-decision-meta small { width: 100%; margin-top: 2px; color: var(--ink-faint); font-size: 10px; text-align: right; }
.outreach-strategy-pack { margin-bottom: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-raised); }
.outreach-strategy-pack > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.outreach-strategy-pack > header h4 { margin: 3px 0 0; font-size: var(--text-md); }
.outreach-strategy-pack > header > span { color: var(--ink-faint); font-size: var(--text-xs); }
.strategy-pack-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.strategy-pack-grid article { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.strategy-pack-grid span, .strategy-pack-grid strong, .strategy-pack-grid small { display: block; }
.strategy-pack-grid span { color: var(--ink-faint); font-size: 10px; }
.strategy-pack-grid strong { margin-top: 4px; overflow: hidden; font-size: var(--text-sm); line-height: 1.45; text-overflow: ellipsis; }
.strategy-pack-grid small { margin-top: 4px; color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.opportunity-research-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.opportunity-research-card { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); }
.opportunity-research-card > header { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 9px; margin-bottom: 12px; }
.opportunity-research-card > header strong, .opportunity-research-card > header small { display: block; }
.opportunity-research-card > header strong { font-size: var(--text-label); }
.opportunity-research-card > header small { margin-top: 2px; color: var(--ink-faint); font-size: 10px; }
.opportunity-card-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--green-soft); color: var(--green); }
.opportunity-card-icon .ui-icon { width: 16px; height: 16px; }
.research-choice-list, .research-evidence-list, .relationship-contact-list { display: grid; gap: 6px; }
.research-choice, .research-evidence { width: 100%; display: grid; align-items: start; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.research-choice { grid-template-columns: 25px minmax(0, 1fr); }
.research-choice:hover, .research-choice.active, .research-evidence:hover, .research-evidence.active { border-color: color-mix(in srgb, var(--green-2) 46%, var(--line)); background: var(--green-soft); }
.research-choice > span:first-child { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-raised); color: var(--green); font-size: 10px; font-weight: 800; }
.research-choice strong, .research-choice small, .research-evidence strong, .research-evidence small { display: block; }
.research-choice strong, .research-evidence strong { font-size: var(--text-xs); }
.research-choice small, .research-evidence small { margin-top: 3px; color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.research-evidence { grid-template-columns: auto minmax(0, 1fr); }
.research-evidence > span { grid-row: 1 / span 2; padding: 3px 5px; border-radius: 999px; background: var(--surface-raised); color: var(--green); font-size: 9px; font-weight: 700; }
.research-angle-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.research-angle-list > span { width: 100%; color: var(--ink-faint); font-size: 10px; }
.research-angle-list button { max-width: 100%; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); color: var(--ink-soft); font: inherit; font-size: 10px; text-align: left; cursor: pointer; }
.research-angle-list button.active { border-color: color-mix(in srgb, var(--green-2) 46%, var(--line)); background: var(--green-soft); color: var(--green); }
.relationship-summary-number { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: baseline; gap: 4px 6px; margin-bottom: 10px; }
.relationship-summary-number strong { color: var(--green); font-size: var(--text-lg); }
.relationship-summary-number span { color: var(--ink-soft); font-size: 10px; }
.relationship-contact-list > button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.relationship-contact-list > button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--green-2) 45%, var(--line)); background: var(--green-soft); }
.relationship-contact-list > button:disabled { cursor: default; opacity: .7; }
.relationship-contact-list > button > span { min-width: 0; }
.relationship-contact-list > button em { flex: none; color: var(--green); font-size: 9px; font-style: normal; }
.relationship-contact-list strong, .relationship-contact-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relationship-contact-list strong { font-size: var(--text-xs); }
.relationship-contact-list small { margin-top: 2px; color: var(--ink-faint); font-size: 10px; }
.relationship-risk-list { margin: 10px 0 0; padding-left: 16px; color: var(--ink-soft); font-size: 10px; line-height: 1.55; }
.research-empty { margin: 0; color: var(--ink-faint); font-size: var(--text-xs); line-height: 1.55; }
.advanced-workbench { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); overflow: hidden; }
.advanced-workbench > summary { min-height: 54px; display: grid; grid-template-columns: 30px minmax(0, 1fr) 18px; align-items: center; gap: 10px; padding: 10px 13px; list-style: none; cursor: pointer; }
.advanced-workbench > summary::-webkit-details-marker { display: none; }
.advanced-workbench > summary > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-raised); color: var(--green); }
.advanced-workbench > summary .ui-icon { width: 15px; height: 15px; }
.advanced-workbench > summary strong, .advanced-workbench > summary small { display: block; }
.advanced-workbench > summary strong { font-size: var(--text-label); }
.advanced-workbench > summary small { margin-top: 2px; color: var(--ink-faint); font-size: var(--text-xs); }
.advanced-chevron { width: 15px; height: 15px; color: var(--ink-faint); transition: transform .18s ease; }
.advanced-workbench[open] .advanced-chevron { transform: rotate(180deg); }
.advanced-workbench-content { padding: 14px; border-top: 1px solid var(--line); background: var(--surface-raised); }
.compact-workbench { margin-top: 14px; }
.compact-workbench .import-layout { display: grid; }
.contact-readiness-strip { display: grid; grid-template-columns: repeat(4, minmax(90px, .35fr)) minmax(220px, 1fr); gap: 8px; margin-bottom: 14px; }
.contact-readiness-strip > div, .contact-readiness-strip > p { margin: 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.contact-readiness-strip span, .contact-readiness-strip strong { display: block; }
.contact-readiness-strip span { color: var(--ink-faint); font-size: 10px; }
.contact-readiness-strip strong { margin-top: 3px; font-size: var(--text-md); }
.contact-readiness-strip p { display: flex; align-items: center; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.45; }
.contact-selection-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 9px 12px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--surface-raised); }
.contact-selection-footer strong { display: block; margin-top: 3px; font-size: var(--text-sm); }
.step-panel.outreach-flat-panel { margin-top: 12px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.outreach-workbench { min-height: 650px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-raised); box-shadow: 0 7px 22px rgba(35,49,40,.045); }
.outreach-contact-rail, .outreach-thread-pane, .outreach-strategy-rail { min-width: 0; background: transparent; }
.outreach-contact-rail { border-right: 1px solid var(--line); background: var(--surface-soft); overflow: hidden; }
.outreach-contact-rail > header { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.outreach-contact-rail > header strong { display: block; margin-top: 2px; font-size: var(--text-xs); }
.outreach-contact-count { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: var(--text-xs); font-weight: 700; }
.outreach-contact-list { max-height: calc(100dvh - 245px); display: grid; align-content: start; gap: 4px; padding: 7px; overflow: auto; }
.outreach-contact-item { width: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; padding: 9px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.outreach-contact-item:hover { background: var(--surface-soft); }
.outreach-contact-item.active { border-color: color-mix(in srgb, var(--green-2) 38%, var(--line)); background: var(--green-soft); }
.outreach-contact-avatar { width: 32px; height: 32px; display: grid; place-items: center; grid-row: 1 / span 2; border-radius: 9px; background: var(--surface-soft); color: var(--green); font-size: var(--text-xs); font-weight: 750; }
.outreach-contact-item strong, .outreach-contact-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outreach-contact-item strong { font-size: var(--text-xs); }
.outreach-contact-item small { margin-top: 2px; color: var(--ink-faint); font-size: 9px; }
.outreach-contact-item em { grid-column: 2; justify-self: start; padding: 3px 5px; border-radius: 999px; background: var(--surface-soft); color: var(--ink-soft); font-size: 9px; font-style: normal; }
.outreach-contact-item.active em { background: var(--surface-raised); color: var(--green); }
.outreach-thread-pane { display: grid; align-content: start; }
.outreach-thread-toolbar { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.outreach-primary-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.outreach-thread-toolbar strong { display: block; margin-top: 3px; font-size: var(--text-label); }
.outreach-communication-layout { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
.outreach-conversation-column { min-width: 0; display: grid; align-content: start; padding: 14px 16px 18px; }
.outreach-thread-history { margin: 0; }
.outreach-conversation-column > .draft-list { margin-top: 14px; }
.outreach-more-actions { position: relative; }
.outreach-more-actions > summary { width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; list-style: none; border: 1px solid var(--line); border-radius: var(--control-radius-compact); background: var(--surface-soft); color: var(--ink-soft); }
.outreach-more-actions > summary::-webkit-details-marker { display: none; }
.outreach-more-actions > summary .ui-icon { width: 15px; height: 15px; }
.outreach-more-actions[open] > summary { border-color: color-mix(in srgb, var(--green-2) 35%, var(--line)); background: var(--green-soft); color: var(--green); }
.outreach-more-actions > div { width: 150px; position: absolute; top: 38px; right: 0; z-index: 20; display: grid; gap: 5px; padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); box-shadow: var(--shadow); }
.outreach-more-actions > div .button { width: 100%; justify-content: flex-start; }
.thread-history-empty { padding: 11px; border: 1px dashed var(--line-strong); border-radius: 9px; background: var(--surface-soft); }
.thread-history-empty span { color: var(--ink-faint); font-size: 10px; }
.thread-history-empty p { margin: 4px 0 0; color: var(--ink-soft); font-size: var(--text-xs); }
.thread-history-head { display: flex; align-items: center; justify-content: space-between; color: var(--ink-faint); font-size: 10px; }
.thread-history-list { display: grid; gap: 6px; margin-top: 7px; }
.thread-mail-item { max-width: 88%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px 10px 10px 3px; background: var(--surface-soft); }
.thread-mail-item.is-sent { justify-self: end; border-radius: 10px 10px 3px; background: var(--green-soft); }
.thread-mail-item header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.thread-mail-item header strong { overflow: hidden; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.thread-mail-item header span, .thread-mail-item small { color: var(--ink-faint); font-size: 9px; }
.thread-mail-item p { margin: 4px 0; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.outreach-thread-pane .draft-list { max-height: none; overflow: visible; }
.outreach-active-draft { border-radius: 11px; }
.draft-edit-field { display: grid; gap: 6px; margin-top: 10px; }
.draft-edit-field:first-child { margin-top: 0; }
.draft-edit-field > span { color: var(--ink-faint); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.draft-edit-field input, .draft-edit-field textarea { padding: 9px 10px; border-radius: 8px; background: var(--surface); font-size: var(--text-sm); }
.draft-evidence-used { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.draft-evidence-used > span { width: 100%; color: var(--ink-faint); font-size: 10px; }
.draft-evidence-used small { padding: 4px 6px; border-radius: 6px; background: var(--green-soft); color: var(--green); font-size: 9px; }
.outreach-strategy-rail { display: grid; align-content: start; gap: 0; border-left: 1px solid var(--line); background: var(--surface-soft); }
.outreach-communication-notes-head { padding: 13px 14px 10px; }
.outreach-communication-notes-head strong { display: block; margin-top: 4px; font-size: var(--text-label); }
.outreach-mail-strategy, .outreach-followup-plan { padding: 11px 14px 14px; }
.outreach-followup-plan { border-top: 1px solid var(--line); }
.outreach-mail-strategy > header strong, .outreach-mail-strategy > header small { display: block; }
.outreach-mail-strategy > header strong { margin-top: 4px; font-size: var(--text-md); }
.outreach-mail-strategy > header small { margin-top: 2px; color: var(--ink-soft); font-size: var(--text-xs); }
.outreach-mail-strategy dl { display: grid; gap: 9px; margin: 13px 0 0; }
.outreach-mail-strategy dl > div { padding-top: 8px; border-top: 1px solid var(--line); }
.outreach-mail-strategy dt { color: var(--ink-faint); font-size: 10px; }
.outreach-mail-strategy dd { margin: 4px 0 0; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.5; }
.outreach-mail-strategy dd a, .strategy-source-warning { display: block; margin-top: 4px; color: var(--green); font-size: 9px; text-decoration: none; }
.strategy-source-warning { color: var(--warning-ink); }
.strategy-evidence-note { display: flex; justify-content: space-between; gap: 8px; margin-top: 11px; padding: 7px 8px; border-radius: 8px; background: var(--surface-soft); color: var(--ink-faint); font-size: 9px; }
.outreach-followup-plan > header strong { display: block; margin-top: 3px; font-size: var(--text-label); }
.outreach-followup-plan ol { display: grid; gap: 0; margin: 12px 0 0; padding: 0; list-style: none; }
.outreach-followup-plan li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 7px; min-height: 48px; position: relative; }
.outreach-followup-plan li > span { width: 10px; height: 10px; margin: 3px 0 0 3px; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--surface-raised); z-index: 1; }
.outreach-followup-plan li:not(:last-child)::after { content: ""; position: absolute; top: 13px; bottom: -3px; left: 8px; width: 1px; background: var(--line); }
.outreach-followup-plan li.done > span { border-color: var(--green); background: var(--green); }
.outreach-followup-plan li.current > span { border-color: var(--green-2); box-shadow: 0 0 0 3px var(--green-soft); }
.outreach-followup-plan li strong, .outreach-followup-plan li small { display: block; }
.outreach-followup-plan li strong { font-size: var(--text-xs); }
.outreach-followup-plan li small { margin-top: 3px; color: var(--ink-faint); font-size: 9px; line-height: 1.4; }
.template-advanced-workbench { margin: 0; border-width: 1px 0 0; border-radius: 0; }
.template-advanced-workbench .template-editor { padding: 0; border: 0; border-radius: 0; background: transparent; }
.outreach-side-empty { padding: 2px; }
.outreach-side-empty strong, .outreach-side-empty p { display: block; }
.outreach-side-empty strong { margin-top: 5px; font-size: var(--text-label); }
.outreach-side-empty p { margin: 5px 0 0; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.5; }
.empty-state.compact { min-height: 120px; padding: 12px; }
.copy-draft { border: 0; background: transparent; color: var(--green); font-size: var(--text-xs); cursor: pointer; }
.empty-state { grid-column: 1 / -1; min-height: 160px; display: grid; place-items: center; align-content: center; text-align: center; color: #8f9791; border: 1px dashed var(--line-strong); border-radius: 11px; }
.empty-state > span { color: var(--green-2); }
.empty-state strong { color: var(--ink-soft); margin-top: 6px; }
.empty-state p { margin: 4px 0 0; font-size: var(--text-sm); }
.muted { color: #8b938d; font-size: var(--text-sm); }

.modal { width: min(650px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 25px 80px rgba(20,40,30,.24); opacity: 0; transform: translateY(10px) scale(.985); transition: opacity .2s ease, transform .2s ease, display .2s allow-discrete, overlay .2s allow-discrete; }
.modal[open] { opacity: 1; transform: translateY(0) scale(1); }
.modal::backdrop { background: rgba(16,27,21,0); transition: background-color .2s ease, display .2s allow-discrete, overlay .2s allow-discrete; }
.modal[open]::backdrop { background: rgba(16,27,21,.52); }
@starting-style {
  .modal[open] { opacity: 0; transform: translateY(10px) scale(.985); }
  .modal[open]::backdrop { background: rgba(16,27,21,0); }
}
.modal:not(.mail-compose-modal):not(.mail-attachment-preview-modal) { max-height: calc(100dvh - 32px); overflow: hidden; }
.modal form:not(.mail-composer) { max-height: calc(100dvh - 32px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 0; overflow: hidden; }
.modal-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0; padding: 9px 14px 9px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.modal-head > div { min-width: 0; }
.modal-head .section-kicker, .modal-head .modal-description { display: none; }
.modal-head h3 { margin: 0; overflow: hidden; font-size: 15px; font-weight: 500; line-height: 28px; text-overflow: ellipsis; white-space: nowrap; }
.modal-head .icon-button { width: 28px; height: 28px; flex: none; }
.modal-body { min-height: 0; padding: 14px 16px 16px; overflow-y: auto; overscroll-behavior: contain; }
.modal-body > .form-grid { align-content: start; gap: 11px 14px; }
.modal-body .field { gap: 5px; }
.modal-body .field > span { font-size: 11px; }
.modal-body input, .modal-body select, .modal-body textarea { padding: 8px 10px; border-radius: 9px; font-size: 12px; }
.contact-profile-calibration-modal { width: min(600px, calc(100vw - 32px)); }
.contact-profile-calibration-modal .modal-body { display: grid; gap: 14px; }
.role-profile-keyword-editor, .role-profile-guidance { display: grid; gap: 8px; }
.role-profile-keyword-tags { min-height: 38px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.role-profile-keyword-tags:empty::before { content: "暂无关键词"; color: var(--ink-faint); font-size: var(--text-xs); }
.role-profile-keyword-tag { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 5px 2px 8px; border-radius: 999px; background: var(--blue-soft); color: var(--green-2); font-size: var(--text-xs); font-weight: 600; }
.role-profile-keyword-tag button { width: 18px; height: 18px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.role-profile-keyword-tag button:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.role-profile-keyword-tag .ui-icon { width: 11px; height: 11px; }
.role-profile-keyword-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.role-profile-guidance textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.role-profile-guidance .field-hint { margin: 0; color: var(--ink-faint); font-size: var(--text-xs); line-height: 1.5; }
.role-profile-status { min-height: 18px; color: var(--ink-soft); font-size: var(--text-xs); }
.role-profile-status:empty { display: none; }
.modal-body .input-prefix > span { padding-left: 10px; }
.icon-button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--surface-soft); color: var(--ink-soft); display: grid; place-items: center; cursor: pointer; }
.icon-button .ui-icon { width: 16px; height: 16px; }
.compact-icon { width: var(--control-height-micro); height: var(--control-height-micro); border-radius: var(--control-radius-micro); }
.compact-icon .ui-icon { width: 13px; height: 13px; }
.modal-actions { min-height: 48px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; padding: 8px 16px; border-top: 1px solid var(--line); background: var(--surface); }
.modal-actions .button { height: var(--control-height-compact); min-height: var(--control-height-compact); padding: 0 11px; border-radius: var(--control-radius-compact); font-size: var(--text-xs); }
.mail-template-modal { width: min(820px, calc(100vw - 32px)); }
.mail-template-modal.is-pretty { width: min(1120px, calc(100vw - 32px)); }
.mail-template-modal > form { height: min(760px, calc(100dvh - 32px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.mail-template-manager { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: stretch; gap: 0; padding: 0; }
.mail-template-library { min-width: 0; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface)); }
.mail-template-library > header { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 8px 13px; border-bottom: 1px solid var(--line); }
.mail-template-library > header > div { min-width: 0; }
.mail-template-library > header strong, .mail-template-library > header span { display: block; }
.mail-template-library > header strong { font-size: var(--text-sm); }
.mail-template-library > header span { margin-top: 1px; color: var(--ink-faint); font-size: 10px; }
.mail-template-list { max-height: 460px; padding: 6px; overflow-y: auto; }
.mail-template-list button { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft); font: inherit; text-align: left; cursor: pointer; }
.mail-template-list button:hover { background: var(--surface-raised); color: var(--ink); }
.mail-template-list button.is-active { background: var(--green-soft); color: var(--green); }
.mail-template-list button strong { min-width: 0; overflow: hidden; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.mail-template-list button span { padding: 2px 5px; border-radius: 999px; background: var(--surface-raised); color: var(--green-2); font-size: 9px; font-weight: 700; }
.mail-template-add-wrap { position: relative; flex: none; }
.mail-template-add-menu { position: absolute; z-index: 12; top: calc(100% + 6px); right: 0; width: 176px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); box-shadow: 0 12px 30px rgba(20,40,30,.16); }
.mail-template-add-menu[hidden] { display: none; }
.mail-template-add-menu > button { width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-soft); font: inherit; text-align: left; cursor: pointer; }
.mail-template-add-menu > button:hover { background: var(--surface-soft); color: var(--ink); }
.mail-template-add-menu .ui-icon { width: 15px; height: 15px; justify-self: center; color: var(--green-2); }
.mail-template-add-menu span, .mail-template-add-menu strong, .mail-template-add-menu small { min-width: 0; display: block; padding: 0; background: transparent; color: inherit; }
.mail-template-add-menu strong { font-size: 11px; font-weight: 600; }
.mail-template-add-menu small { margin-top: 1px; color: var(--ink-faint); font-size: 9px; font-weight: 400; line-height: 1.35; }
.mail-template-editor { min-width: 0; display: grid; align-content: start; gap: 12px; padding: 14px 16px 16px; overflow-y: auto; }
#mail-template-standard-editor[hidden] { display: none; }
.mail-template-pretty-editor { min-width: 0; display: grid; grid-template-columns: minmax(300px, .9fr) minmax(330px, 1.1fr); align-items: start; gap: 14px; }
.mail-template-pretty-editor[hidden] { display: none; }
.mail-template-pretty-fields { min-width: 0; display: grid; gap: 10px; }
.mail-template-pretty-row { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mail-template-pretty-fields textarea { min-height: 70px; resize: vertical; line-height: 1.55; }
.mail-template-pretty-fields input, .mail-template-pretty-fields textarea { font-size: var(--text-xs); }
.mail-template-pretty-size-field > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mail-template-pretty-size-field output { color: var(--green); font-size: 10px; font-weight: 750; }
.mail-template-pretty-size-field input[type="range"] { width: 100%; height: 24px; padding: 0; border: 0; background: transparent; accent-color: var(--green-2); cursor: pointer; }
.mail-template-color-field input[type="color"] { width: 100%; min-height: 38px; padding: 3px; cursor: pointer; }
.mail-template-pretty-hint { margin: 0; color: var(--ink-faint); font-size: 10px; line-height: 1.5; }
.mail-template-pretty-hint code { padding: 1px 4px; border-radius: 4px; background: var(--surface-soft); color: var(--ink-soft); }
.mail-template-pretty-preview { position: sticky; top: 0; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #eef3f6; }
.mail-template-pretty-preview > header { min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 11px; border-bottom: 1px solid var(--line); background: var(--surface-raised); }
.mail-template-pretty-preview > header strong, .mail-template-pretty-preview > header span { display: block; }
.mail-template-pretty-preview > header strong { font-size: var(--text-xs); }
.mail-template-pretty-preview > header span { color: var(--ink-faint); font-size: 9px; }
.mail-template-pretty-preview iframe { width: 100%; height: 520px; display: block; border: 0; background: #eef3f6; }
@media (min-width: 900px) {
  .mail-template-modal.is-pretty .mail-template-editor { grid-template-columns: minmax(300px, .9fr) minmax(330px, 1.1fr); column-gap: 14px; }
  .mail-template-modal.is-pretty .mail-template-editor > .field { grid-column: 1; }
  .mail-template-modal.is-pretty .mail-template-pretty-editor:not([hidden]) { display: contents; }
  .mail-template-modal.is-pretty .mail-template-pretty-fields { grid-column: 1; grid-row: 5; }
  .mail-template-modal.is-pretty .mail-template-pretty-preview { grid-column: 2; grid-row: 1 / span 5; align-self: start; }
}
.mail-template-preview-modal { width: min(820px, calc(100vw - 32px)); }
.mail-template-preview-modal > form { height: min(760px, calc(100dvh - 32px)); }
.mail-template-preview-body { padding: 0; overflow: hidden; background: #eef3f6; }
.mail-template-preview-body iframe { width: 100%; height: 100%; display: block; border: 0; background: #eef3f6; }
.mail-template-token-editor { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-raised); color: var(--ink); font-size: 12px; line-height: 1.65; outline: 0; overflow-wrap: anywhere; }
.mail-template-token-editor:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-2) 12%, transparent); }
.mail-template-token-editor:empty::before { content: attr(data-placeholder); color: var(--ink-faint); pointer-events: none; }
.mail-template-token-editor.is-subject { min-height: 40px; white-space: nowrap; overflow-x: auto; overflow-y: hidden; }
.mail-template-token-editor.is-body { min-height: 230px; max-height: 360px; overflow-y: auto; white-space: pre-wrap; }
.mail-template-token-editor.is-body img { max-width: 100%; height: auto; display: block; margin: 9px 0; border-radius: 7px; cursor: pointer; transition: outline-color 120ms ease, box-shadow 120ms ease; }
.mail-template-token-editor.is-body img:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--green-2) 14%, transparent); }
.mail-template-token-editor.is-body img.is-selected { outline: 2px solid color-mix(in srgb, var(--green-2) 74%, transparent); outline-offset: 3px; box-shadow: none; }
.mail-template-variable-token { display: inline; margin: 0 1px; padding: 0 4px; border: 0; border-radius: 4px; background: color-mix(in srgb, var(--ink-faint) 16%, transparent); color: var(--ink-soft); font-size: inherit; font-weight: 500; line-height: inherit; vertical-align: baseline; white-space: nowrap; user-select: all; }
.mail-template-body-editor { overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-raised); transition: border-color 120ms ease, box-shadow 120ms ease; }
.mail-template-body-editor:focus-within { border-color: var(--green-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-2) 12%, transparent); }
.mail-template-formatbar { min-height: 40px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 5px 7px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--surface-soft); }
.mail-template-format-actions { display: flex; align-items: center; gap: 2px; }
.mail-template-formatbar button { width: 28px; height: 27px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ink-soft); font: inherit; font-size: 11px; cursor: pointer; }
.mail-template-formatbar button:hover { background: var(--surface-raised); color: var(--ink); }
.mail-template-toolbar-divider { width: 1px; height: 20px; flex: none; background: var(--line); }
.mail-template-variable-toolbar { min-width: 0; flex: 1; display: flex; align-items: center; gap: 7px; padding: 0; border: 0; background: transparent; }
.mail-template-variable-toolbar > span { flex: none; padding: 0; color: var(--ink-faint); font-size: 10px; font-weight: 700; }
.mail-template-variable-toolbar > div { display: flex; flex-wrap: wrap; gap: 5px; }
.mail-template-variable-toolbar button { width: auto; min-width: 0; height: 25px; min-height: 25px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface-raised) 82%, transparent); color: var(--ink-soft); font: inherit; font-size: 10px; font-weight: 500; cursor: pointer; }
.mail-template-variable-toolbar button:hover { background: var(--surface-soft); color: var(--ink); }
.mail-template-body-editor .mail-template-token-editor.is-body { border: 0; border-radius: 0; box-shadow: none; }
.mail-template-hint { margin: 0; padding: 7px 10px; border-top: 1px solid var(--line); background: var(--surface-soft); color: var(--ink-faint); font-size: var(--text-xs); line-height: 1.45; }
.mail-template-image-popover { z-index: 90; }
.mail-template-image-controls { display: grid; gap: 9px; }
.mail-template-image-controls > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mail-template-image-controls > header strong { color: var(--ink-soft); font-size: var(--text-xs); }
.mail-template-image-controls > header output { color: var(--green-2); font-size: 10px; font-weight: 750; }
.mail-template-image-controls > input[type="range"] { width: 100%; height: 22px; margin: 0; padding: 0; border: 0; background: transparent; accent-color: var(--green-2); cursor: pointer; }
.mail-template-actions > span { flex: 1; }
.mail-template-ai-modal { width: min(500px, calc(100vw - 32px)); }
.mail-template-ai-body { display: grid; align-content: start; gap: 10px; }
.mail-template-ai-body textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.mail-template-ai-body > p { margin: 0; color: var(--ink-faint); font-size: var(--text-xs); line-height: 1.55; }
.mail-template-ai-status { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 8px 10px; border-radius: 8px; background: var(--surface-soft); color: var(--ink-soft); font-size: var(--text-xs); }
.mail-template-ai-status[hidden] { display: none; }
.mail-template-ai-status.is-loading::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--green-2); animation: mailLoadPulse 1s ease-in-out infinite; }
#mail-template-ai-submit.is-loading .button-icon { animation: spin .8s linear infinite; }
#new-campaign-modal { width: min(720px, calc(100vw - 32px)); height: min(700px, calc(100dvh - 32px)); max-height: calc(100dvh - 32px); overflow: hidden; }
#new-campaign-modal #new-campaign-form { height: 100%; min-height: 0; }
#new-campaign-modal textarea { min-height: 66px; }
.mail-compose-modal { width: min(820px, calc(100vw - 32px)); height: min(720px, calc(100dvh - 40px)); max-height: calc(100dvh - 40px); overflow: hidden; }
.mail-compose-modal #mail-compose-modal-content { position: relative; height: 100%; }
.modal.mail-compose-modal .mail-composer { height: 100%; min-height: 0; padding: 0; overflow: hidden; }
.mail-compose-modal .mail-compose-editor-wrap { min-height: 180px; overflow-y: auto; }
.profile-modal { width: min(780px, calc(100vw - 32px)); height: min(760px, calc(100dvh - 32px)); }
.profile-modal #profile-form { height: 100%; }
.profile-form-scroll { display: grid; align-content: start; gap: 12px; background: var(--surface-soft); }
.profile-ai-use-note { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--green-2) 18%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--green-soft) 52%, var(--surface)); }
.profile-ai-use-note .ui-icon { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--green-2); }
.profile-ai-use-note p { display: grid; gap: 2px; margin: 0; }
.profile-ai-use-note strong { color: var(--ink); font-size: var(--text-xs); }
.profile-ai-use-note span { color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.5; }
.profile-form-section { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.profile-form-section > header h4 { margin: 0; color: var(--ink); font-size: var(--text-sm); }
.profile-form-section > header p { margin: 3px 0 0; color: var(--ink-faint); font-size: var(--text-xs); line-height: 1.45; }
.profile-form-grid { gap: 11px 14px; }
.profile-form-grid .profile-field-full { grid-column: 1 / -1; }
.profile-form-grid textarea { min-height: 72px; resize: vertical; line-height: 1.55; }
.apollo-enrichment-modal { width: min(600px, calc(100vw - 32px)); }
.enrichment-approval-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 12px; }
.enrichment-approval-summary > div { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.enrichment-approval-summary span, .enrichment-approval-summary strong { display: block; }
.enrichment-approval-summary span { color: var(--ink-soft); font-size: var(--text-xs); }
.enrichment-approval-summary strong { margin-top: 4px; font-size: var(--text-lg); }
.enrichment-safeguards { display: grid; gap: 6px; margin: 0 0 12px; padding: 11px 12px; border-radius: 10px; background: color-mix(in srgb, var(--green-soft) 60%, var(--surface)); }
.enrichment-safeguards p { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--ink-soft); font-size: var(--text-sm); }
.enrichment-safeguards .ui-icon { width: 14px; height: 14px; color: var(--green-2); }
.enrichment-person-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 132px; margin-bottom: 12px; overflow: auto; }
.enrichment-person-list span { padding: 6px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-raised); color: var(--ink-soft); font-size: var(--text-xs); }
.profile-avatar-fieldset { margin: 0; padding: 0; border: 0; }
.profile-avatar-fieldset legend { margin-bottom: 8px; padding: 0; color: var(--ink-soft); font-size: var(--text-xs); font-weight: 700; }
.profile-avatar-grid { display: grid; grid-template-columns: repeat(6, 52px); gap: 8px; }
.profile-avatar-option { position: relative; aspect-ratio: 1; display: block; padding: 3px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease; }
.profile-avatar-option:hover { border-color: var(--line-strong); }
.profile-avatar-option:has(input:checked) { border-color: var(--green-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-2) 13%, transparent); }
.profile-avatar-option input { position: absolute; opacity: 0; pointer-events: none; }
.profile-avatar-option::after { content: "✓"; position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; display: grid; place-items: center; border: 2px solid var(--surface); border-radius: 50%; background: var(--green); color: var(--accent-contrast); font-size: 11px; font-weight: 800; opacity: 0; transform: scale(.72); transition: .16s ease; }
.profile-avatar-option:has(input:checked)::after { opacity: 1; transform: scale(1); }
.profile-avatar-option .profile-avatar-svg { border-radius: 10px; }
.profile-form-error { min-height: 18px; margin: 8px 0 -7px; color: var(--danger); font-size: var(--text-xs); }
.checkbox-field { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.checkbox-field input { width: 15px; margin-top: 2px; }
.checkbox-field strong, .checkbox-field small { display: block; }
.checkbox-field small { margin-top: 3px; color: var(--ink-soft); font-size: var(--text-xs); }
.integration-list { display: grid; gap: 6px; }
.api-capability-map { margin-bottom: 15px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.api-capability-map > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 11px; }
.api-capability-map h3 { margin: 3px 0 0; font-size: var(--text-md); }
.api-capability-map > header > span { color: var(--ink-faint); font-size: var(--text-xs); }
.api-capability-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.api-capability-grid article { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: start; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-raised); }
.api-capability-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: white; }
.api-capability-icon .ui-icon { width: 16px; height: 16px; }
.api-capability-icon.apollo { border: 1px solid var(--line); background: #f1f2ee; color: #1f1f1e; }.api-capability-icon.research { background: #2275d7; }.api-capability-icon.magic { background: #f18b52; }
.api-capability-grid strong { display: block; font-size: var(--text-label); }
.api-capability-grid p { margin: 3px 0 0; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.5; }
.api-capability-state { padding: 4px 6px; border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.api-capability-state.ready { background: var(--green-soft); color: var(--green-2); }.api-capability-state.guarded { background: var(--warning); color: var(--warning-ink); }.api-capability-state.staged { background: var(--surface-soft); color: var(--ink-soft); }
.integration-list-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 2px 2px; }
.integration-list-label:first-child { padding-top: 0; }
.integration-list-label strong { color: var(--ink); font-size: var(--text-xs); }
.integration-list-label span { color: var(--ink-faint); font-size: var(--text-xs); }
.integration-list article { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; }
.integration-list .integration-config-row { cursor: pointer; transition: border-color .18s ease, background-color .18s ease; }
.integration-list .integration-config-row:hover { border-color: var(--line-strong); background: var(--surface-soft); }
.integration-list .integration-config-row:focus-visible { border-color: var(--green-2); outline: 3px solid color-mix(in srgb, var(--green-2) 13%, transparent); }
.integration-logo { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: #fff; font-weight: 700; flex: none; }
.integration-logo .ui-icon { width: 17px; height: 17px; }
.integration-logo.apollo { border: 1px solid var(--line); background: #f1f2ee; color: #1f1f1e; }.integration-logo.magic { background: #f18b52; }.integration-logo.mail { background: #e85a4f; }
.integration-logo.builtin { background: #406b5b; }.integration-logo.apple { background: #4b5563; }.integration-logo.gleif { background: #557aa7; }.integration-logo.dns { background: #477b91; }
.integration-logo.tavily { background: #2275d7; }.integration-logo.exa { background: #6e54cf; }.integration-logo.hunter { background: #ea6b47; }
.integration-logo.ai { background: linear-gradient(135deg, var(--green), var(--green-2)); }
svg.button-icon:has(use[href="#icon-apollo"]) { width: 11px; height: 11px; }
svg.research-icon:has(use[href="#icon-apollo"]) { width: 11px; height: 11px; }
.api-capability-icon.apollo .ui-icon { width: 12px; height: 12px; }
.integration-logo.apollo .ui-icon { width: 13px; height: 13px; }
.contact-table-heading .apollo-brand-mark .ui-icon { width: 11.5px; height: 11.5px; }
.contact-table-actions #search-apollo .button-icon { width: 11px; height: 11px; }
.company-intelligence-source.source-apollo > .ui-icon { padding: 6px; }
.company-intelligence-inline-sources .company-intelligence-source.source-apollo > .ui-icon { padding: 0; }
.integration-list article div { min-width: 0; }
.integration-list strong { display: block; font-size: var(--text-label); }
.integration-list p { margin: 3px 0 0; color: var(--ink-soft); font-size: var(--text-xs); }
.integration-list .integration-toggle-row { background: var(--surface-soft); }
.integration-toggle-row > div { flex: 1; }
.integration-list .integration-choice-row { background: var(--surface-soft); }
.integration-choice-row > div { flex: 1; }
.settings-inline-select { min-width: 142px; min-height: 34px; flex: none; padding: 6px 30px 6px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface-raised); font: inherit; font-size: var(--text-xs); }
.integration-list article.mail-reply-language-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 160px; align-items: center; }
.mail-reply-language-row > div { min-width: 0; }
.mail-reply-language-row .settings-inline-select { width: 160px; min-width: 0; justify-self: end; }
.integration-list .integration-toggle-status { color: var(--ink-faint); font-size: 10px; }
.settings-switch { position: relative; width: 42px; height: 24px; display: block; flex: none; margin-left: auto; cursor: pointer; }
.settings-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.settings-switch > span { position: absolute; inset: 0; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-raised); transition: .18s ease; }
.settings-switch > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-faint); box-shadow: 0 1px 3px rgba(10,24,17,.18); transition: .18s ease; }
.settings-switch input:checked + span { border-color: var(--green-2); background: var(--green-2); }
.settings-switch input:checked + span::after { left: 21px; background: var(--accent-contrast); }
.settings-switch input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--green-2) 15%, transparent); outline-offset: 2px; }
.settings-switch input:disabled + span { opacity: .6; cursor: wait; }
.integration-status { margin-left: auto; padding: 5px 7px; border-radius: 999px; font-size: var(--text-xs); font-weight: 700; }
.integration-status.manual { background: #edf0ec; color: #626b64; }.integration-status.pending { background: #fff0d5; color: #875f17; }
.integration-status.connected { background: var(--green-soft); color: var(--green-2); }
.modal-description { margin: 5px 0 0; color: var(--ink-soft); font-size: var(--text-sm); }
.integration-config-modal { width: min(560px, calc(100vw - 32px)); }
.integration-config-note { min-height: 19px; margin: 13px 0 -7px; color: var(--ink-faint); font-size: var(--text-xs); line-height: 1.5; }
.integration-setup-guide { margin-bottom: 16px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.55; }
.integration-setup-guide > strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: var(--text-label); }
.integration-setup-guide ol { margin: 0 0 8px; padding-left: 18px; }
.integration-setup-guide li + li { margin-top: 3px; }
.integration-setup-guide a { display: inline-flex; align-items: center; gap: 5px; color: var(--green-2); font-weight: 600; text-decoration: none; }
.integration-setup-guide a:hover { text-decoration: underline; text-underline-offset: 2px; }
.integration-guide-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.ai-integration-card { margin-bottom: 16px; padding: 16px; border: 1px solid color-mix(in srgb, var(--green-2) 32%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--green-soft) 42%, var(--surface)); }
.ai-integration-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ai-integration-head > div { min-width: 0; }
.ai-integration-head strong, .ai-integration-head p { display: block; }
.ai-integration-head strong { font-size: var(--text-md); }
.ai-integration-head p { margin: 3px 0 0; color: var(--ink-soft); font-size: var(--text-xs); }
.ai-settings-compact-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .42fr); gap: 10px; }
.ai-settings-current-model { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.ai-settings-current-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--green-soft); color: var(--green-2); }
.ai-settings-current-icon .ui-icon { width: 19px; height: 19px; }
.ai-settings-current-model > div:nth-child(2) { min-width: 0; }
.ai-settings-current-model > div:nth-child(2) > span, .ai-settings-current-model > div:nth-child(2) > strong, .ai-settings-current-model > div:nth-child(2) > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-settings-current-model > div:nth-child(2) > span { color: var(--ink-faint); font-size: var(--text-xs); }
.ai-settings-current-model > div:nth-child(2) > strong { margin-top: 2px; color: var(--ink); font-size: var(--text-md); }
.ai-settings-current-model > div:nth-child(2) > small { margin-top: 3px; color: var(--ink-soft); font-size: 10px; }
.ai-settings-preference-summary { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 4px; }
.ai-settings-preference-summary span { padding: 4px 6px; border-radius: 6px; background: var(--surface-raised); color: var(--ink-soft); font-size: 9px; white-space: nowrap; }
.ai-token-overview { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) 15px; align-items: center; gap: 9px; padding: 12px; border: 1px solid color-mix(in srgb, var(--green-2) 24%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--green-soft) 34%, var(--surface)); color: var(--ink); text-align: left; cursor: pointer; }
.ai-token-overview:hover { border-color: color-mix(in srgb, var(--green-2) 42%, var(--line)); }
.ai-token-overview > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--surface-raised); color: var(--green-2); }
.ai-token-overview > span .ui-icon { width: 17px; height: 17px; }
.ai-token-overview > div { min-width: 0; }
.ai-token-overview small, .ai-token-overview strong, .ai-token-overview em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-token-overview small { color: var(--ink-faint); font-size: var(--text-xs); }
.ai-token-overview strong { margin-top: 2px; font-size: var(--text-lg); }
.ai-token-overview em { margin-top: 2px; color: var(--ink-soft); font-size: 9px; font-style: normal; }
.ai-token-overview > .ui-icon { width: 14px; height: 14px; color: var(--ink-faint); }
.ai-settings-entry-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.ai-settings-entry-grid > button { min-width: 0; display: grid; grid-template-columns: 31px minmax(0, 1fr) 13px; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); color: var(--ink); text-align: left; cursor: pointer; }
.ai-settings-entry-grid > button:hover { border-color: var(--line-strong); background: var(--surface-soft); }
.settings-entry-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; background: var(--green-soft); color: var(--green); }
.settings-entry-icon .ui-icon { width: 15px; height: 15px; }
.ai-settings-entry-grid > button > div { min-width: 0; }
.ai-settings-entry-grid strong, .ai-settings-entry-grid p { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-settings-entry-grid strong { font-size: var(--text-label); }
.ai-settings-entry-grid p { margin: 3px 0 0; color: var(--ink-faint); font-size: 9px; }
.ai-settings-entry-grid > button > .ui-icon { width: 13px; height: 13px; color: var(--ink-faint); }
.ai-settings-modal { width: min(720px, calc(100vw - 32px)); }
.ai-task-policy-modal { width: min(940px, calc(100vw - 32px)); }
.ai-settings-modal-body { max-height: min(620px, calc(100dvh - 180px)); overflow-y: auto; }
.ai-modal-section { display: grid; gap: 11px; }
.ai-modal-section + .ai-modal-section { margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--line); }
.ai-modal-section > header strong, .ai-modal-section > header span { display: block; }
.ai-modal-section > header strong { font-size: var(--text-sm); }
.ai-modal-section > header span { margin-top: 3px; color: var(--ink-faint); font-size: var(--text-xs); }
.ai-usage-modal { width: min(1040px, calc(100vw - 32px)); }
.ai-usage-modal-body { max-height: min(670px, calc(100dvh - 180px)); overflow-y: auto; }
.ai-usage-modal-section { display: grid; gap: 11px; }
.ai-usage-modal-section + .ai-usage-modal-section { margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--line); }
.ai-usage-modal-section > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ai-usage-modal-section > header strong, .ai-usage-modal-section > header span { display: block; }
.ai-usage-modal-section > header strong { font-size: var(--text-sm); }
.ai-usage-modal-section > header span { margin-top: 3px; color: var(--ink-faint); font-size: var(--text-xs); }
.ai-usage-pagination { min-height: 32px; display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.ai-usage-pagination > span { min-width: 118px; color: var(--ink-soft); font-size: var(--text-xs); text-align: center; }
.ai-config-grid { gap: 10px; }
.ai-policy-section { display: grid; gap: 12px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); }
.ai-policy-section > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ai-policy-section > header > div { min-width: 0; }
.ai-policy-section > header strong, .ai-policy-section > header span { display: block; }
.ai-policy-section > header strong { font-size: var(--text-sm); }
.ai-policy-section > header span { margin-top: 3px; color: var(--ink-faint); font-size: var(--text-xs); }
.ai-policy-grid { gap: 10px; }
.ai-task-policy-grid { display: grid; gap: 8px; }
.ai-task-policy-row { display: grid; grid-template-columns: minmax(190px, 1.35fr) minmax(150px, 1fr) minmax(110px, .72fr) minmax(120px, .72fr); gap: 10px; align-items: end; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.ai-task-policy-row > div { align-self: center; min-width: 0; }
.ai-task-policy-row > div strong, .ai-task-policy-row > div span { display: block; }
.ai-task-policy-row > div strong { font-size: var(--text-label); }
.ai-task-policy-row > div span { margin-top: 4px; color: var(--ink-faint); font-size: var(--text-xs); line-height: 1.45; }
.ai-task-policy-row .field { margin: 0; }
.ai-checkbox-field { position: relative; min-height: 67px; justify-content: center; padding: 10px 44px 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.ai-checkbox-field input { position: absolute; top: 50%; right: 14px; width: 18px; height: 18px; margin: -9px 0 0; accent-color: var(--green); }
.ai-checkbox-field small { margin-top: 3px; }
.ai-usage-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.ai-usage-summary > div, .ai-usage-summary > span { min-width: 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.ai-usage-summary > div span, .ai-usage-summary > div strong { display: block; }
.ai-usage-summary > div span { color: var(--ink-faint); font-size: var(--text-xs); }
.ai-usage-summary > div strong { margin-top: 3px; font-size: var(--text-sm); }
.ai-usage-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.ai-usage-table { width: 100%; min-width: 840px; border-collapse: collapse; font-size: var(--text-xs); }
.ai-usage-table th, .ai-usage-table td { padding: 9px 11px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.ai-usage-table th { color: var(--ink-faint); background: var(--surface-soft); font-weight: 700; }
.ai-usage-table td { color: var(--ink-soft); }
.ai-usage-table tbody tr:last-child td { border-bottom: 0; }
.ai-usage-table td:first-child { color: var(--ink-faint); }
.ai-usage-table td:nth-child(2) { max-width: 220px; overflow: hidden; color: var(--ink); font-weight: 650; text-overflow: ellipsis; }
.ai-usage-token strong, .ai-usage-token small { display: block; }
.ai-usage-token strong { color: var(--ink); font-size: var(--text-label); }
.ai-usage-token small { margin-top: 2px; color: var(--ink-faint); font-size: var(--text-xs); }
.ai-usage-status { display: inline-flex; padding: 3px 7px; border-radius: 999px; background: var(--green-soft); color: var(--green-2); font-weight: 700; }
.ai-usage-status.failed { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--danger); }
.ai-usage-status.running { background: color-mix(in srgb, var(--warning) 12%, var(--surface)); color: var(--warning); }
.mail-config-grid { gap: 9px; margin-top: 12px; }
.mail-config-actions { padding-top: 13px; border-top: 1px solid var(--line); }
.ai-config-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.ai-config-actions > span { color: var(--ink-soft); font-size: var(--text-xs); }
.settings-page { max-width: 1180px; margin: 0 auto; }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 9px; }
.settings-card { min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: 0 5px 18px rgba(35,49,40,.035); }
.settings-card-head { min-height: 64px; display: flex; align-items: center; gap: 11px; margin: 0; padding: 11px 14px; cursor: pointer; list-style: none; user-select: none; }
.settings-card-head::-webkit-details-marker { display: none; }
.settings-card-head::after { content: ""; width: 7px; height: 7px; margin-left: auto; border-right: 1.7px solid var(--ink-faint); border-bottom: 1.7px solid var(--ink-faint); transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; flex: none; }
.settings-card-head:has(.settings-summary, .integration-status)::after { margin-left: 4px; }
.settings-card[open] > .settings-card-head { border-bottom: 1px solid var(--line); }
.settings-card[open] > .settings-card-head::after { transform: rotate(225deg) translate(-1px, -1px); }
.settings-card-content { padding: 14px 16px 16px; }
.settings-card-head > div { min-width: 0; }
.settings-card-head h2 { font-size: var(--text-md); }
.settings-card-head p:not(.section-kicker) { margin: 2px 0 0; color: var(--ink-faint); font-size: var(--text-xs); }
.settings-card-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--green-soft); color: var(--green-2); flex: none; }
.settings-card-icon .ui-icon { width: 17px; height: 17px; }
.settings-card-icon.danger { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
.account-settings-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.account-settings-row > div:first-child { min-width: 0; display: flex; align-items: center; gap: 11px; }
.account-settings-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--green-soft); color: var(--green); font-weight: 800; }
.account-settings-row strong { display: block; font-size: var(--text-sm); }
.account-settings-row p { margin: 2px 0 0; color: var(--ink-faint); font-size: var(--text-xs); }
.account-settings-actions { display: flex; align-items: center; gap: 12px; }
.account-settings-actions > span { color: var(--ink-faint); font-size: var(--text-xs); }
.account-settings-card .notice { margin-top: 14px; }
.settings-summary { margin-left: auto; padding: 5px 8px; border-radius: 999px; background: var(--green-soft); color: var(--green-2); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.settings-card-head .integration-status { margin-left: auto; }
.settings-card .ai-config-actions { padding-top: 13px; border-top: 1px solid var(--line); }
.settings-action-list { display: grid; gap: 9px; }
.settings-action-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.settings-action-row strong { display: block; font-size: var(--text-label); }
.settings-action-row p { margin: 4px 0 0; color: var(--ink-soft); font-size: var(--text-xs); }
.settings-action-row .button { flex: none; }
.settings-danger-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px; border: 1px solid color-mix(in srgb, var(--danger) 24%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--danger) 5%, var(--surface)); }
.settings-danger-row strong { display: block; font-size: var(--text-label); }
.settings-danger-row p { margin: 4px 0 0; color: var(--ink-soft); font-size: var(--text-xs); }
.appearance-section { margin: 0; padding: 0; border: 0; }
.appearance-section + .appearance-section { margin-top: 15px; }
.appearance-section legend { margin-bottom: 11px; padding: 0; font-size: var(--text-label); font-weight: 700; }
.palette-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.palette-option { position: relative; min-height: 56px; display: flex; align-items: center; gap: 8px; padding: 8px 30px 8px 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); cursor: pointer; transition: border-color .18s ease, background-color .18s ease; }
.palette-option:hover, .palette-option:has(input:checked) { border-color: color-mix(in srgb, var(--green-2) 62%, var(--line)); }
.palette-option:has(input:checked) { background: var(--green-soft); }
.palette-option input, .mode-option input, .font-size-option input { position: absolute; opacity: 0; pointer-events: none; }
.palette-option strong, .palette-option small, .mode-option strong, .mode-option small { display: block; }
.palette-option strong, .mode-option strong { font-size: var(--text-label); }
.palette-option small, .mode-option small { margin-top: 3px; color: var(--ink-soft); font-size: var(--text-xs); }
.palette-preview { width: 38px; height: 32px; display: flex; align-items: flex-end; gap: 2px; padding: 5px; border-radius: 7px; background: var(--preview-bg); flex: none; }
.palette-preview i { display: block; width: 100%; border-radius: 3px; background: var(--preview-accent); }
.palette-preview i:nth-child(1) { height: 10px; opacity: .45; }.palette-preview i:nth-child(2) { height: 19px; opacity: .72; }.palette-preview i:nth-child(3) { height: 14px; }
.palette-preview.forest { --preview-bg:#e8f1ec; --preview-accent:#185b42; }
.palette-preview.ocean { --preview-bg:#e6f0f7; --preview-accent:#155b8d; }
.palette-preview.violet { --preview-bg:#efeafa; --preview-accent:#6447a8; }
.palette-preview.sunset { --preview-bg:#f9ebe4; --preview-accent:#a44d2b; }
.palette-preview.graphite { --preview-bg:#eceff1; --preview-accent:#454c53; }
.selection-check { position: absolute; right: 14px; width: 17px; height: 17px; padding: 2px; border-radius: 50%; color: var(--accent-contrast); background: var(--green); opacity: 0; transform: scale(.75); transition: .16s ease; }
.palette-option:has(input:checked) .selection-check { opacity: 1; transform: scale(1); }
.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.mode-option { position: relative; display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); cursor: pointer; }
.mode-option > .ui-icon { width: 22px; height: 22px; color: var(--ink-soft); }
.mode-option:has(input:checked) { border-color: var(--green-2); background: var(--green-soft); }
.mode-option:has(input:checked) > .ui-icon { color: var(--green-2); }
.font-size-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.font-size-option { position: relative; min-height: 52px; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); cursor: pointer; transition: border-color .18s ease, background-color .18s ease; }
.font-size-option:hover, .font-size-option:has(input:checked) { border-color: color-mix(in srgb, var(--green-2) 62%, var(--line)); }
.font-size-option:has(input:checked) { background: var(--green-soft); }
.font-size-option strong, .font-size-option small { display: block; }
.font-size-option strong { font-size: var(--text-label); }
.font-size-option small { margin-top: 3px; color: var(--ink-soft); font-size: var(--text-xs); }
.font-size-sample { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border-radius: 8px; background: var(--surface); color: var(--green-2); font-weight: 800; }
.font-size-sample.small { font-size: 11px; }.font-size-sample.medium { font-size: 13px; }.font-size-sample.large { font-size: 15px; }.font-size-sample.xlarge { font-size: 17px; }
.appearance-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.appearance-foot > span { color: var(--ink-soft); font-size: var(--text-sm); }

.ai-launcher { position: fixed; right: 24px; bottom: 24px; z-index: 51; width: 54px; height: 54px; display: grid; place-items: center; padding: 0; border: 1px solid color-mix(in srgb, var(--green-2) 48%, var(--line)); border-radius: 50%; background: var(--green); color: var(--accent-contrast); box-shadow: 0 12px 32px color-mix(in srgb, var(--green) 30%, rgba(0,0,0,.2)); cursor: pointer; transition: opacity .2s ease, box-shadow .2s ease; }
.ai-launcher:hover { box-shadow: 0 16px 38px color-mix(in srgb, var(--green) 38%, rgba(0,0,0,.2)); }
.ai-launcher.panel-open { box-shadow: 0 10px 26px color-mix(in srgb, var(--green) 34%, rgba(0,0,0,.2)); }
.ai-launcher.panel-open .ui-icon { width: 20px; height: 20px; }
.ai-launcher-icon { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; }
.ai-launcher-icon .ui-icon { width: 23px; height: 23px; stroke-width: 1.65; }
.back-to-top { position: fixed; right: 24px; bottom: 92px; z-index: 49; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-raised); color: var(--green); box-shadow: 0 8px 22px rgba(20,40,30,.14); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease, border-color .18s ease, background .18s ease; }
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { border-color: color-mix(in srgb, var(--green-2) 45%, var(--line)); background: var(--green-soft); }
.back-to-top .ui-icon { width: 18px; height: 18px; transform: rotate(-90deg); }
.ai-panel { position: fixed; z-index: 50; right: 24px; bottom: 92px; width: min(410px, calc(100vw - 32px)); height: min(620px, calc(100dvh - 116px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; overflow: hidden; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 22px 64px rgba(0,0,0,.22); opacity: 0; pointer-events: none; transform: translateY(18px) scale(.975); transform-origin: right bottom; transition: opacity .2s ease, transform .22s ease; }
.ai-panel.open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.ai-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 17px; border-bottom: 1px solid var(--line); cursor: grab; touch-action: none; }
.ai-panel-head:active { cursor: grabbing; }
.ai-panel-head button { cursor: pointer; }
.ai-panel.dragging { transition: none; transform: none; }
body.ai-panel-dragging { user-select: none; }
.ai-panel-brand { display: flex; align-items: center; gap: 10px; }
.ai-panel-brand > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--green); color: var(--accent-contrast); }
.ai-panel-brand strong, .ai-panel-brand small { display: block; }
.ai-panel-brand strong { font-size: var(--text-label); }.ai-panel-brand small { margin-top: 2px; color: var(--ink-soft); font-size: var(--text-xs); }
.ai-panel-actions { display: flex; gap: 5px; }
.ai-messages { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; overflow-y: auto; }
.ai-message { max-width: 88%; padding: 11px 12px; border-radius: 12px; font-size: var(--text-label); line-height: 1.65; white-space: normal; }
.ai-message.assistant { align-self: flex-start; background: var(--surface-soft); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.ai-message.user { align-self: flex-end; background: var(--green); color: var(--accent-contrast); border-bottom-right-radius: 4px; }
.ai-message.assistant { width: 100%; max-width: none; padding: 2px 0 8px; border: 0; border-radius: 0; background: transparent; }
.ai-message.thinking { color: var(--ink-soft); }
.ai-message-meta { display: block; margin-bottom: 5px; font-size: var(--text-xs); font-weight: 700; opacity: .72; }
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }
.markdown-body p { margin: 0 0 8px; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { margin: 14px 0 7px; color: inherit; font-weight: 700; line-height: 1.35; }
.markdown-body h1 { font-size: 1.34em; }.markdown-body h2 { font-size: 1.22em; }.markdown-body h3 { font-size: 1.12em; }.markdown-body h4, .markdown-body h5, .markdown-body h6 { font-size: 1em; }
.markdown-body ul, .markdown-body ol { margin: 7px 0 9px; padding-left: 21px; }
.markdown-body ul ul, .markdown-body ul ol, .markdown-body ol ul, .markdown-body ol ol { margin: 4px 0; }
.markdown-body ul ul { list-style-type: circle; }
.markdown-body ul ul ul { list-style-type: square; }
.markdown-body ol ol { list-style-type: lower-alpha; }
.markdown-body ol ol ol { list-style-type: lower-roman; }
.markdown-body li { margin: 3px 0; padding-left: 1px; }
.markdown-body li::marker { color: color-mix(in srgb, currentColor 76%, transparent); font-weight: 650; }
.markdown-body .task-list { padding-left: 19px; }
.markdown-body .task-list-item { list-style: none; margin-left: -19px; }
.markdown-body .task-list-item input { width: 14px; height: 14px; margin: 0 5px 0 0; vertical-align: -2px; accent-color: var(--green); }
.markdown-body blockquote { margin: 9px 0; padding: 2px 0 2px 11px; border-left: 3px solid color-mix(in srgb, currentColor 28%, transparent); color: var(--ink-soft); }
.markdown-body code { border-radius: 4px; padding: 2px 4px; background: color-mix(in srgb, var(--ink) 8%, transparent); font: .88em/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.markdown-body pre { max-width: 100%; margin: 9px 0; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; border-radius: 8px; padding: 10px 11px; background: color-mix(in srgb, var(--ink) 8%, var(--surface)); }
.markdown-body pre code { padding: 0; background: transparent; white-space: pre; }
.markdown-body a { color: var(--green-2); text-decoration: underline; text-underline-offset: 2px; }
.markdown-body img { display: block; max-width: 100%; height: auto; margin: 9px 0; border-radius: 8px; }
.markdown-body hr { margin: 12px 0; border: 0; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.markdown-table-wrap { max-width: 100%; margin: 9px 0; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.markdown-body table { width: 100%; border-collapse: collapse; font-size: .92em; }
.markdown-body th, .markdown-body td { min-width: 72px; padding: 6px 7px; border: 1px solid color-mix(in srgb, currentColor 16%, transparent); font-size: inherit; vertical-align: top; }
.markdown-body th { background: color-mix(in srgb, var(--ink) 6%, transparent); font-weight: 700; }
.ai-message-sources { margin-top: 10px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.ai-message-sources > span { display: block; margin-bottom: 5px; color: var(--ink-faint); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.ai-message-sources > div { display: flex; flex-wrap: wrap; gap: 5px; }
.ai-message-sources a { display: inline-flex; min-width: 0; max-width: 100%; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 7px; background: var(--surface); color: var(--ink-soft); font-size: 10px; line-height: 1.25; text-decoration: none; }
.ai-message-sources a:hover { border-color: color-mix(in srgb, var(--green-2) 40%, var(--line)); color: var(--green-2); }
.ai-message-sources a b { flex: none; color: var(--green-2); font-size: 9px; }
.ai-scroll-bottom { position: absolute; z-index: 3; left: 50%; bottom: 12px; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid color-mix(in srgb, var(--green-2) 38%, var(--line)); border-radius: 50%; background: var(--surface-raised); color: var(--green-2); box-shadow: 0 7px 20px color-mix(in srgb, var(--ink) 16%, transparent); opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity .18s ease, transform .18s ease, background .16s ease, border-color .16s ease; cursor: pointer; }
.ai-scroll-bottom.visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.ai-scroll-bottom:hover { border-color: var(--green-2); background: var(--green-soft); }
.ai-scroll-bottom .ui-icon { width: 16px; height: 16px; transform: rotate(90deg); }
.ai-follow-ups { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ai-follow-ups button { max-width: 100%; padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--ink-soft); font: inherit; font-size: var(--text-xs); line-height: 1.35; text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.ai-follow-ups button:hover { border-color: color-mix(in srgb, var(--green-2) 42%, var(--line)); background: var(--green-soft); color: var(--green-2); }
.ai-message.streaming .markdown-body::after, .mail-ai-message.streaming .markdown-body::after, .contact-decision-result.is-loading .contact-decision-answer:not(:has(.contact-decision-loading))::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 3px; border-radius: 1px; background: currentColor; vertical-align: -2px; animation: markdown-stream-cursor .85s steps(1, end) infinite; }
@keyframes markdown-stream-cursor { 0%, 48% { opacity: .72; } 49%, 100% { opacity: 0; } }
.ai-message.user .markdown-body a { color: inherit; }
.ai-message.user .markdown-body blockquote { color: inherit; opacity: .82; }
.ai-apply-button { display: block; margin-top: 9px; border: 1px solid color-mix(in srgb, var(--green-2) 35%, var(--line)); border-radius: 7px; padding: 6px 8px; background: var(--green-soft); color: var(--green-2); font-size: var(--text-xs); font-weight: 700; cursor: pointer; }
.ai-quick-prompts { display: flex; gap: 6px; padding: 0 16px 10px; overflow-x: auto; }
.ai-quick-prompts button { flex: none; border: 1px solid var(--line); border-radius: 999px; padding: 7px 9px; background: var(--surface-soft); color: var(--ink-soft); font-size: var(--text-xs); cursor: pointer; }
.ai-chat-form { padding: 12px 16px 8px; border-top: 1px solid var(--line); }
.ai-chat-input-wrap { position: relative; }
.ai-chat-form textarea { display: block; min-height: 68px; max-height: 160px; padding-right: 92px; resize: none; }
.ai-chat-voice { position: absolute; right: 49px; bottom: 9px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-raised); color: var(--ink-soft); cursor: pointer; }
.ai-chat-voice:hover { border-color: var(--green-2); color: var(--green-2); }
.ai-chat-voice .ui-icon { width: 15px; height: 15px; }
.ai-chat-send { position: absolute; right: 9px; bottom: 9px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--green); color: var(--accent-contrast); box-shadow: 0 4px 12px color-mix(in srgb, var(--green) 22%, transparent); cursor: pointer; }
.ai-chat-send:hover { background: color-mix(in srgb, var(--green) 86%, #000); }
.ai-chat-send:disabled { opacity: .45; cursor: not-allowed; }
.ai-chat-send .ui-icon { width: 16px; height: 16px; stroke-width: 1.8; }
.speech-field-shell { position: relative; min-width: 0; width: 100%; }
.speech-field-shell > textarea, .speech-field-shell > [contenteditable="true"] { width: 100%; display: block; padding-right: 48px; }
.speech-field-button { position: absolute; right: 10px; bottom: 10px; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-raised); color: var(--ink-faint); box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 8%, transparent); cursor: pointer; }
.speech-field-button:hover { border-color: var(--green-2); color: var(--green-2); }
.speech-field-button .ui-icon { width: 14px; height: 14px; }
.speech-insertion-anchor { width: 0; height: 0; display: inline-block; overflow: hidden; }
.speech-action-button.is-listening { border-color: color-mix(in srgb, var(--danger) 58%, var(--line)); background: color-mix(in srgb, var(--danger) 10%, var(--surface-raised)); color: var(--danger); animation: speechListeningPulse 1.35s ease-in-out infinite; }
.speech-action-button.is-processing { border-color: color-mix(in srgb, var(--green-2) 44%, var(--line)); background: color-mix(in srgb, var(--green-2) 8%, var(--surface-raised)); color: var(--green-2); opacity: 1; cursor: progress; }
.mail-compose-speech.is-listening { border-color: color-mix(in srgb, var(--danger) 58%, var(--line)); color: var(--danger); }
@keyframes speechListeningPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 18%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }
@media (prefers-reduced-motion: reduce) { .speech-action-button.is-listening { animation: none; } }
.ai-panel-foot { margin: 0; padding: 0 16px 12px; color: var(--ink-faint); font-size: var(--text-xs); line-height: 1.45; }
.toast { position: fixed; inset: auto auto 26px 50%; z-index: 30; margin: 0; padding: 10px 14px; border: 0; border-radius: 9px; transform: translate(-50%, 20px); background: #172a20; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.18); opacity: 0; pointer-events: none; transition: .25s ease; font-size: var(--text-sm); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

:root[data-resolved-theme="dark"] .stat-card small,
:root[data-resolved-theme="dark"] .field small,
:root[data-resolved-theme="dark"] .empty-row td { color: var(--ink-faint); }
:root[data-resolved-theme="dark"] .avatar { background: var(--green-soft); }
:root[data-resolved-theme="dark"] .score::before { background: linear-gradient(to right, var(--green-2) var(--score), var(--line) var(--score)); }
:root[data-resolved-theme="dark"] .badge.good { background: #183b29; color: #9ad8b2; }
:root[data-resolved-theme="dark"] .badge.medium { background: #3b311a; color: #e8ca77; }
:root[data-resolved-theme="dark"] .badge.low { background: #292f2b; color: #a9b1ac; }
:root[data-resolved-theme="dark"] .credit-pill,
:root[data-resolved-theme="dark"] .review-pill { color: var(--accent-ink); }
:root[data-resolved-theme="dark"] .integration-status.manual { background: #292f2b; color: #bac2bc; }
:root[data-resolved-theme="dark"] .integration-status.pending { background: #3b311a; color: #e8ca77; }
:root[data-resolved-theme="dark"] .integration-status.connected { background: var(--green-soft); color: var(--green-2); }
:root[data-resolved-theme="dark"] .api-capability-icon.apollo,
:root[data-resolved-theme="dark"] .integration-logo.apollo,
:root[data-resolved-theme="dark"] .contact-table-heading > span.apollo-brand-mark { border-color: rgba(255,255,255,.14); background: #2a2d2a; color: #f1f2ee; }
:root[data-resolved-theme="dark"] .company-intelligence-logo { border-color: rgba(255,255,255,.18); background: #f1f3ef; box-shadow: inset 0 0 0 1px rgba(16,20,18,.08); color: #185b42; }
:root[data-resolved-theme="dark"] .company-intelligence-logo img { padding: 6px; }
:root[data-resolved-theme="dark"] .toast { background: #e9efeb; color: #141815; }
:root[data-resolved-theme="dark"] input::placeholder,
:root[data-resolved-theme="dark"] textarea::placeholder { color: #737d77; }

@media (max-width: 1080px) {
  .app-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .sidebar { padding-left: 12px; padding-right: 12px; }
  .campaign-nav-copy small { display: none; }
  .campaign-nav-item { min-height: 42px; }
  .main-content { padding: 18px 26px 16px; }
  .research-link { gap: 0; padding-left: 4px; padding-right: 4px; }
  .research-link .research-icon { display: none; }
  .research-link span { overflow: visible; text-overflow: clip; }
  .company-tool-tab { display: flex; justify-content: center; padding: 6px 8px; text-align: center; }
  .company-tool-tab small { display: none; }
  .company-intelligence-hero { grid-template-columns: minmax(0, 1.16fr) minmax(270px, .84fr); }
  .company-intelligence-identity-main { grid-template-columns: 54px minmax(0, 1fr); }
  .company-intelligence-logo { width: 54px; height: 54px; }
  .company-fit-summary { grid-template-columns: 66px minmax(0, 1fr); }
  .company-product-card { grid-template-columns: 1fr; column-gap: 12px; row-gap: 8px; }
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .company-entry { grid-template-columns: minmax(145px, .9fr) minmax(200px, 1.35fr) 86px minmax(178px, 1.05fr); gap: 10px; }
  .mail-shell { grid-template-columns: clamp(248px, 30%, 272px) minmax(0, 1fr); }
  .overview-dashboard { grid-template-columns: minmax(0, 1.55fr) minmax(286px, .82fr); }
  .contact-profile-body { grid-template-columns: minmax(260px, .82fr) minmax(320px, 1.18fr); }
  .opportunity-research-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-source-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-candidate-layout { grid-template-columns: minmax(0, 1fr) 206px; }
  .contact-selection-bar { left: calc(220px + 26px); right: calc(26px + 206px + 10px); }
  body.sidebar-collapsed .contact-selection-bar { left: calc(72px + 26px); }
  .opportunity-research-card:last-child { grid-column: 1 / -1; }
  .outreach-workbench { grid-template-columns: 205px minmax(0, 1fr); }
  .outreach-communication-layout { grid-template-columns: minmax(0, 1fr) 250px; }
  .outreach-strategy-rail { grid-column: auto; grid-template-columns: 1fr; }
  .template-advanced-workbench { grid-column: auto; border-width: 1px 0 0; }
}

@media (min-width: 821px) {
  body.sidebar-collapsed .app-shell { grid-template-columns: 72px minmax(0, 1fr); }
  body.sidebar-collapsed .sidebar { padding: 18px 10px 15px; }
  body.sidebar-collapsed .sidebar-brand-row { flex-direction: column; gap: 9px; padding: 0 0 18px; }
  body.sidebar-collapsed .brand { width: 40px; height: 40px; flex: none; margin: 0; padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
  body.sidebar-collapsed .brand:hover, body.sidebar-collapsed .brand:active { background: transparent; box-shadow: none; }
  body.sidebar-collapsed .brand > div { display: none; }
  body.sidebar-collapsed .brand-mark { width: 38px; height: 38px; border-radius: 0; }
  body.sidebar-collapsed .brand-mark .brand-icon { width: 32px; height: 32px; }
  body.sidebar-collapsed .sidebar-create-button { width: 30px; height: 30px; }
  body.sidebar-collapsed .sidebar-collapse-toggle { right: -30px; width: 30px; box-shadow: 6px 5px 16px rgba(10,24,17,.1); }
  body.sidebar-collapsed .sidebar-appearance-menu { top: 78px; right: auto; left: 48px; }
  body.sidebar-collapsed .landscape-nav-item { width: 52px; min-height: 54px; flex-direction: column; justify-content: center; gap: 3px; margin-left: 0; margin-right: 0; padding: 6px 4px 5px; }
  body.sidebar-collapsed .landscape-nav-copy { min-width: 0; max-width: 100%; display: block; flex: none; }
  body.sidebar-collapsed .landscape-nav-copy strong { display: block; overflow: hidden; font-size: 9px; font-weight: 600; line-height: 1.1; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
  body.sidebar-collapsed .sidebar-list-heading { display: none; }
  body.sidebar-collapsed .nav-icon { width: 20px; height: 20px; }
  body.sidebar-collapsed .nav-icon .ui-icon { width: 16px; height: 16px; }
  body.sidebar-collapsed .sidebar-campaigns { align-items: center; }
  body.sidebar-collapsed .side-nav { width: 100%; padding: 0; }
  body.sidebar-collapsed .campaign-nav-row { display: grid; place-items: center; }
  body.sidebar-collapsed .campaign-nav-item { width: 52px; min-height: 58px; flex-direction: column; justify-content: center; gap: 3px; padding: 5px 3px 4px; }
  body.sidebar-collapsed .campaign-nav-copy { min-width: 0; max-width: 100%; display: block; flex: none; text-align: center; }
  body.sidebar-collapsed .campaign-nav-copy strong { display: block; overflow: hidden; font-size: 9px; font-weight: 600; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
  body.sidebar-collapsed .campaign-nav-copy small, body.sidebar-collapsed .campaign-menu-trigger { display: none; }
  body.sidebar-collapsed .campaign-reorder-toolbar { width: 52px; justify-content: center; padding: 5px 4px; }
  body.sidebar-collapsed .campaign-reorder-toolbar span { display: none; }
  body.sidebar-collapsed .campaign-reorder-done { width: 42px; padding: 5px 2px; }
  body.sidebar-collapsed .side-nav.is-reordering .campaign-nav-item { padding-right: 3px; }
  body.sidebar-collapsed .side-nav.is-reordering .campaign-reorder-handle { right: -1px; top: 20px; transform: scale(.82); }
  body.sidebar-collapsed .side-nav.is-reordering .campaign-nav-row:hover .campaign-reorder-handle { transform: scale(.9); }
  body.sidebar-collapsed .campaign-nav-monogram { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.06); color: inherit; font-size: var(--text-xs); font-weight: 700; }
  body.sidebar-collapsed .campaign-nav-item.active .campaign-nav-monogram { background: rgba(255,255,255,.08); }
  body.sidebar-collapsed .sidebar-project-manager-button { width: 44px; min-height: 44px; justify-content: center; margin: 0 auto; padding: 6px; }
  body.sidebar-collapsed .sidebar-project-manager-button .campaign-nav-copy, body.sidebar-collapsed .sidebar-project-manager-button .campaign-archive-count { display: none; }
  body.sidebar-collapsed .sidebar-bottom { align-items: center; }
  body.sidebar-collapsed .account-sidebar-card { width: 44px; display: grid; grid-template-columns: 32px; justify-content: center; margin: 0 auto 6px; padding: 5px; }
  body.sidebar-collapsed .account-sidebar-copy { display: none; }
  body.sidebar-collapsed .account-sidebar-menu { right: auto; bottom: 42px; left: 48px; width: 164px; }
  body.sidebar-collapsed .side-tool { width: 52px; min-height: 54px; flex-direction: column; justify-content: center; gap: 3px; margin: 0 auto; padding: 6px 4px 5px; }
  body.sidebar-collapsed .side-tool > span:last-child { display: block; max-width: 100%; overflow: hidden; font-size: 9px; font-weight: 600; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 820px) {
  .app-shell { display: block; }
  .sidebar { width: 100%; height: auto; min-height: 62px; padding: 10px 14px; flex-direction: row; align-items: center; gap: 8px; }
  .sidebar-brand-row { flex: none; padding: 0; }
  .sidebar-collapse-toggle { display: none; }
  #sidebar-collapse-button { display: none; }
  .brand { flex: none; margin-right: 2px; }.brand > div { display: none; }
  .brand-mark { width: 34px; height: 34px; }
  .landscape-nav-item { width: 36px; height: 36px; margin: 0; padding: 7px; justify-content: center; }
  .landscape-nav-copy { display: none; }
  .sidebar-campaigns { min-width: 0; flex-direction: row; align-items: center; }
  .sidebar-list-heading { display: none; }
  .side-nav { display: flex; flex: 1; gap: 3px; overflow-x: auto; padding: 0 2px; }
  .campaign-nav-row { flex: none; }
  .campaign-nav-item { width: auto; min-height: 36px; padding: 6px 36px 6px 9px; }
  .campaign-menu-trigger { top: 50%; right: 4px; }
  .campaign-nav-copy { display: block; max-width: 120px; }
  .campaign-nav-copy small { display: none; }
  .sidebar-bottom { margin: 0; padding: 0; border: 0; display: flex; gap: 3px; }
  .sidebar-bottom .sidebar-project-manager-button { width: 36px; height: 36px; min-height: 36px; padding: 7px; justify-content: center; }
  .sidebar-bottom .sidebar-project-manager-button .campaign-nav-copy, .sidebar-bottom .sidebar-project-manager-button .campaign-archive-count { display: none; }
  .sidebar-bottom .storage-card { display: none; }
  .sidebar-bottom .account-sidebar-card { width: 36px; height: 36px; display: block; margin: 0; padding: 2px; border: 0; background: transparent; }
  .account-sidebar-card .account-sidebar-copy { display: none; }
  .account-sidebar-card .account-avatar { width: 32px; height: 32px; }
  .account-sidebar-menu { right: 0; bottom: 45px; left: auto; width: 164px; }
  .sidebar-bottom .side-tool { width: 36px; height: 36px; padding: 7px; justify-content: center; }
  .sidebar-bottom .side-tool > span:last-child { display: none; }
  .main-content { padding: 16px; }
  .topbar { align-items: flex-start; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .workflow-map { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .api-capability-grid { grid-template-columns: 1fr; }
  .appearance-settings-card, .data-settings-card { grid-column: auto; }
  .palette-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .font-size-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-action-strip { align-items: flex-start; }
  .company-workspace-nav { grid-template-columns: repeat(4, minmax(132px, 1fr)); overflow-x: auto; }
  .company-intelligence-hero { grid-template-columns: 1fr; }
  .company-intelligence-facts { padding: 12px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .company-intelligence-detail-grid, .company-intelligence-workbench, .company-intelligence-signals > ul, .company-strategic-events ol { grid-template-columns: 1fr; }
  .company-intelligence-signals { grid-column: auto; }
  .company-strategic-events, .company-competitive-set { grid-column: auto; }
  .company-intelligence-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .company-product-list { grid-template-columns: 1fr; }
  .company-product-top { align-items: stretch; flex-direction: column; }
  .company-product-actions { justify-content: flex-start; }
  .company-product-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .company-product-metrics > div { border-top: 1px solid var(--line); }
  .company-product-metrics > div:nth-child(-n+2) { border-top: 0; }
  .company-product-metrics > div:nth-child(odd) { border-left: 0; }
  .form-grid.two-col, .import-layout, .pattern-grid, .draft-layout, .role-calibration-grid, .appmagic-layout, .linkedin-observation-form { grid-template-columns: 1fr; }
  .contact-import-modal .import-layout { grid-template-columns: 1fr; }
  .linkedin-observation-form .full-width { grid-column: auto; }
  .case-grid { grid-template-columns: 1fr; }
  .case-rule-banner { align-items: flex-start; gap: 10px; flex-direction: column; }
  .landscape-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landscape-toolbar #landscape-category,
  .landscape-toolbar #landscape-scale,
  .landscape-toolbar #landscape-sort { width: 100%; min-width: 0; }
  .landscape-toolbar #landscape-manage { margin-left: 0; }
  .company-directory { gap: 10px; padding: 10px; background: var(--surface-soft); }
  .company-entry { grid-template-columns: minmax(0, 1fr) auto; gap: 11px 16px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); }
  .company-entry.is-managing { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .company-entry.is-managing .company-product, .company-entry.is-managing .company-research-links { grid-column: 2 / -1; }
  .company-entry:last-child { border-bottom: 1px solid var(--line); }
  .company-product { grid-column: 1 / -1; padding: 11px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .company-product small { display: block; white-space: normal; }
  .company-research-links { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .company-case-button { grid-column: auto; }
  .mail-workspace { min-height: auto; }
  .mail-shell { grid-template-columns: clamp(238px, 34%, 264px) minmax(0, 1fr); min-height: 620px; }
  .overview-dashboard { grid-template-columns: 1fr; min-height: 0; }
  .overview-ai-card { min-height: 620px; }
  .overview-tracking { grid-template-rows: auto auto auto auto; }
  .overview-campaign-progress-list { max-height: 360px; }
  .contacts-workspace { min-height: 680px; grid-template-columns: 230px minmax(0, 1fr); }
  .contact-profile-head { align-items: center; }
  .contact-profile-actions { flex-direction: row; align-items: center; }
  .contact-profile-body { grid-template-columns: 1fr; }
  .contact-profile-card + .contact-profile-card { border-top: 1px solid var(--line); border-left: 0; }
  .contact-discovery-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-role-choice-list { grid-template-columns: 1fr; }
  .contact-search-conditions { grid-template-columns: 1fr; }
  .contact-research-body { grid-template-columns: 1fr; }
  .contact-search-profile { border-right: 0; border-bottom: 1px solid var(--line); }
  .contact-discovery-toolbar { align-items: stretch; flex-direction: column; }
  .contact-discovery-toolbar > .inline-actions { justify-content: flex-start; }
  .contact-table-toolbar { align-items: flex-start; flex-direction: column; }
  .contact-table-actions { width: 100%; justify-content: flex-start; }
  .contact-selection-bar, body.sidebar-collapsed .contact-selection-bar { left: 16px; right: 16px; bottom: 0; max-width: none; }
  .contact-candidate-layout { grid-template-columns: 1fr; }
  .contact-library-rail { position: static; }
  .contact-library-list { max-height: 320px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-library-person:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  .contact-library-person:nth-child(odd) { border-right: 1px solid var(--line); }
  .contact-existing-result { grid-template-columns: 1fr; }
  .outreach-decision-bar { grid-template-columns: 64px minmax(0, 1fr); }
  .outreach-decision-meta { grid-column: 1 / -1; max-width: none; justify-content: flex-start; }
  .outreach-decision-meta small { text-align: left; }
  .strategy-pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-readiness-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .contact-readiness-strip > p { grid-column: 1 / -1; }
  .outreach-workbench { grid-template-columns: 1fr; min-height: 0; }
  .outreach-contact-rail, .outreach-thread-pane, .outreach-strategy-rail { grid-column: auto; }
  .outreach-contact-rail { border-right: 0; border-bottom: 1px solid var(--line); }
  .outreach-contact-list { max-height: 280px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outreach-communication-layout { grid-template-columns: 1fr; }
  .outreach-strategy-rail { grid-template-columns: 1fr; border-top: 1px solid var(--line); border-left: 0; }
  .outreach-thread-toolbar { align-items: flex-start; flex-direction: column; }
  .outreach-primary-actions { justify-content: flex-start; }
  .contact-analysis-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .integration-list article.mail-reply-language-row { grid-template-columns: 32px minmax(0, 1fr); }
  .mail-reply-language-row .settings-inline-select { grid-column: 2; width: min(220px, 100%); justify-self: start; }
  .campaign-project-manager-row { grid-template-columns: 34px minmax(0, 1fr); }
  .campaign-project-manager-logo { width: 34px; height: 34px; }
  .campaign-project-manager-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .profile-avatar-grid { grid-template-columns: repeat(3, 52px); }
  .profile-form-grid .profile-field-full { grid-column: auto; }
}

@media (max-width: 560px) {
  .sidebar { padding-left: 10px; padding-right: 10px; }
  h1 { font-size: var(--title-md); }.topbar { align-items: stretch; flex-direction: column; }
  .topbar-company-actions { width: 100%; justify-content: flex-start; margin-left: 0; }
  .topbar-mail-actions { width: 100%; }
  .topbar-mail-search { width: auto; min-width: 0; flex: 1; }
  .mail-template-manager { grid-template-columns: 1fr; }
  .mail-template-library { border-right: 0; border-bottom: 1px solid var(--line); }
  .mail-template-list { max-height: 150px; }
  .mail-template-pretty-editor { grid-template-columns: 1fr; }
  .mail-template-pretty-preview { position: static; }
  .mail-template-pretty-row { grid-template-columns: 1fr; }
  .mail-template-actions { flex-wrap: wrap; }
  .mail-template-actions > span { display: none; }
  .privacy-banner { align-items: flex-start; }.banner-pill { display: none; }
  .stats-grid { grid-template-columns: 1fr 1fr; }.stat-card { min-height: 98px; }
  .overview-workspace { padding: 18px; }
  .overview-ai-card { min-height: 560px; }
  .overview-card-head { min-height: 62px; padding: 10px 14px; }
  .overview-card-heading { gap: 9px; }
  .overview-card-icon { width: 24px; height: 24px; }
  .overview-clear-button span { display: none; }
  .overview-clear-button { width: 34px; height: 34px; padding: 0; }
  .overview-ai-messages { padding: 18px 14px; }
  .overview-ai-messages .ai-message { max-width: 92%; }
  .overview-ai-messages .ai-message.user { max-width: 86%; }
  .overview-ai-prompt-bar { padding-left: 14px; padding-right: 10px; }
  .overview-ai-form { padding-left: 14px; padding-right: 14px; }
  .overview-tracking-head { padding: 4px 2px 0; }
  .overview-progress-card { padding: 14px; }
  .topbar-contacts-actions { width: 100%; }
  .topbar-contacts-actions .button { flex: none; }
  .topbar-contacts-actions .contacts-search { min-width: 0; width: auto; flex: 1; }
  .contacts-workspace { min-height: 0; display: block; overflow: visible; }
  .contacts-list-pane { max-height: 340px; border-right: 0; border-bottom: 1px solid var(--line); }
  .contacts-list-collapse-button, .contacts-list-expand-tab { display: none; }
  .contacts-workspace.contacts-list-collapsed .contacts-list-pane { opacity: 1; transform: none; pointer-events: auto; }
  .contacts-workspace.contacts-list-collapsed .contact-profile-head { padding-left: 14px; }
  .contact-profile-head { display: flex; align-items: stretch; flex-direction: column; padding: 12px 14px; }
  .contact-profile-actions { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .contact-profile-actions .button { flex: 1 1 calc(50% - 4px); }
  .contact-profile-details-head { align-items: flex-start; flex-direction: column; }
  .contact-profile-details-actions { width: 100%; justify-content: flex-start; }
  .contact-profile-facts { grid-template-columns: 1fr; }
  .contact-profile-facts > div:nth-child(n) { border-top: 1px solid var(--line); border-left: 0; }
  .contact-profile-facts > div:first-child { border-top: 0; }
  .contact-profile-card { padding: 17px; }
  .contact-modal-grid > .field, .contact-modal-grid > .contact-modal-phone-field, .contact-modal-grid > .contact-modal-website-field { grid-column: 1 / -1; }
  .contact-modal-inference { align-items: stretch; flex-direction: column; }
  .contact-modal-inference .button { width: 100%; }
  .contact-search-rule-grid, .contact-search-field-grid { grid-template-columns: 1fr; }
  .contact-library-list { display: block; }
  .contact-library-person:nth-child(odd) { border-right: 0; }
  .contact-library-person:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line); }
  .contact-history-item { grid-template-columns: 32px minmax(0, 1fr); }
  .contact-history-item time { grid-column: 2; }
  .settings-card { padding: 0; }
  .settings-card-head { flex-wrap: nowrap; padding: 10px 12px; }
  .settings-card-content { padding: 12px; }
  .api-capability-map { padding: 11px; }
  .api-capability-map > header, .prospect-detail-summary { align-items: flex-start; flex-direction: column; }
  .api-capability-grid article { grid-template-columns: 30px minmax(0, 1fr); }
  .api-capability-state { grid-column: 2; justify-self: start; }
  .prospect-detail-row td { padding-left: 12px; }
  .prospect-detail-actions { justify-content: flex-start; }
  .prospect-history p { grid-template-columns: 1fr; gap: 2px; }
  .settings-summary { width: max-content; margin-left: auto; }
  .settings-action-row, .settings-danger-row { align-items: stretch; flex-direction: column; }
  .account-settings-row { align-items: stretch; flex-direction: column; }
  .account-settings-actions { align-items: stretch; flex-direction: column; }
  .overview-heading { align-items: flex-start; flex-direction: column; }
  .overview-heading-actions { width: 100%; flex-direction: column; }
  .overview-heading .button { width: 100%; }
  .workflow-route-card { grid-template-columns: 28px 38px minmax(0, 1fr); padding: 11px; }
  .route-status { display: none; }
  .route-card-icon { width: 36px; height: 36px; }
  .step-panel { padding: 20px 18px; }
  .company-intelligence-identity-main { grid-template-columns: 50px minmax(0, 1fr); }
  .company-intelligence-logo { width: 50px; height: 50px; border-radius: 13px; }
  .company-intelligence-facts, .company-intelligence-sources { grid-template-columns: 1fr; }
  .company-intelligence-sources.company-intelligence-inline-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .company-fit-summary { grid-template-columns: 1fr; align-items: start; }
  .company-fit-details { grid-template-columns: 1fr; gap: 12px; }
  .company-fit-score { width: 58px; height: 58px; }
  .company-fit-summary > .company-fit-score { align-self: start; }
  .company-fit-rubric > summary { grid-template-columns: minmax(0, 1fr) 16px; }
  .company-fit-rubric > summary > small { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
  .company-fit-rubric > summary svg { grid-column: 2; grid-row: 1; }
  .company-fit-rubric-grid { grid-template-columns: 1fr; gap: 0; }
  .company-fit-rubric-grid article, .company-fit-rubric-grid article:first-child, .company-fit-rubric-grid article:last-child { padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent); border-left: 0; }
  .company-fit-rubric-grid article:first-child { padding-top: 0; border-top: 0; }
  .company-fit-risks { grid-column: auto; padding: 12px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .company-strategy-columns { grid-template-columns: 1fr; }
  .company-buyer-outreach-layout, .company-personalization-evidence .company-proof-list { grid-template-columns: 1fr; }
  .company-buyer-outreach-section + .company-buyer-outreach-section { padding: 12px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .company-competitive-list { grid-template-columns: 1fr; }
  .company-proof-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .company-proof-list li a { grid-column: 1 / -1; }
  .company-intelligence-markets { grid-template-columns: 1fr; }
  .company-market-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .company-product-toolbar { grid-template-columns: 1fr; align-items: stretch; }
  .company-product-toolbar > .company-market-summary:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .company-product-toolbar .company-market-summary article:nth-child(3) { padding-left: 0; border-left: 0; }
  .company-product-toolbar .inline-actions { justify-content: flex-start; overflow-x: auto; }
  .company-product-card { grid-template-columns: 1fr; }
  .company-product-main, .company-product-meta, .company-product-actions { grid-column: 1; grid-row: auto; width: auto; min-width: 0; }
  .company-product-meta { align-items: flex-start; flex-direction: column; gap: 9px; padding-left: 42px; }
  .company-product-data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .company-product-data > div { border-left: 0; border-top: 1px solid var(--line); }
  .company-product-actions { justify-content: stretch; }
  .company-product-actions .button { flex: 1; }
  .workspace-footnote { text-align: left; }
  .opportunity-research-grid, .strategy-pack-grid, .contact-discovery-guide, .contact-source-board { grid-template-columns: 1fr; }
  .contact-research-result > header { align-items: flex-start; }
  .contact-architecture-flow { display: grid; grid-template-columns: 1fr; overflow: visible; }
  .contact-architecture-flow article:not(:last-child)::after { content: "↓"; top: auto; right: 50%; bottom: -17px; transform: translateX(50%); }
  .contact-existing-result .relationship-contact-list { grid-template-columns: 1fr; }
  .contact-table-heading p { display: block; }
  .contact-table-heading p b { display: block; margin-bottom: 2px; }
  .prospect-detail-panel { grid-template-columns: 1fr; }
  .prospect-detail-information { grid-template-columns: 1fr; }
  .prospect-apollo-header { grid-template-columns: 27px minmax(0, 1fr); }
  .prospect-apollo-header > em { grid-column: 2; justify-self: start; }
  .prospect-apollo-grid, .prospect-apollo-history > div { grid-template-columns: 1fr; }
  .prospect-apollo-grid > article { border-right: 0; }
  .prospect-basic-research { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prospect-basic-research > div { border-bottom: 1px solid var(--line); }
  .prospect-basic-research > div:nth-child(even) { border-right: 0; }
  .prospect-basic-research > div:last-child { border-bottom: 0; }
  .prospect-public-research-grid { grid-template-columns: 1fr; }
  .prospect-public-research-grid > article { border-right: 0; border-bottom: 1px solid var(--line); }
  .prospect-public-research-grid > article:nth-child(3) { border-bottom: 0; }
  .prospect-detail-tools { grid-column: 1; justify-items: start; }
  .prospect-detail-tools .prospect-detail-actions { justify-content: flex-end; }
  .prospect-detail-cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .prospect-detail-cell:last-child { border-bottom: 0; }
  .opportunity-research-card:last-child { grid-column: auto; }
  .contact-readiness-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-readiness-strip > p { grid-column: 1 / -1; }
  .outreach-contact-list { grid-template-columns: 1fr; }
  .outreach-contact-rail > header { min-height: 52px; }
  .outreach-reply-card, .follow-up-card { grid-template-columns: 1fr; }
  .outreach-reply-actions, .follow-up-actions { justify-content: flex-start; }
  .contact-selection-footer { align-items: stretch; flex-direction: column; }
  .contact-selection-footer .button { width: 100%; }
  .panel-intro { gap: 12px; }.panel-intro > div:first-child { align-items: flex-start; }
  .ai-action-strip { flex-direction: column; }
  .ai-action-strip .button { width: 100%; }
  .ai-integration-card { padding: 13px; }
  .ai-task-policy-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-task-policy-row > div { grid-column: 1 / -1; }
  .ai-usage-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-config-actions { align-items: stretch; flex-direction: column; }
  .ai-launcher { right: 14px; bottom: 14px; width: 50px; height: 50px; }
  .back-to-top { right: 14px; bottom: 78px; }
  .ai-panel { right: 12px; bottom: 78px; width: calc(100vw - 24px); height: min(620px, calc(100dvh - 90px)); border-radius: 16px; }
  .ai-chat-form { grid-template-columns: minmax(0, 1fr) 44px; }
  .ai-chat-form .button span { display: none; }
  .draft-toolbar { align-items: flex-start; flex-direction: column; }
  .role-option-grid { grid-template-columns: 1fr; }
  .palette-grid, .mode-grid { grid-template-columns: 1fr; }
  .landscape-toolbar { display: grid; grid-template-columns: 1fr; }
  .landscape-search { grid-column: auto; }
  .landscape-toolbar .button { width: 100%; }
  .company-entry { grid-template-columns: 1fr; }
  .company-entry.is-managing { grid-template-columns: 28px minmax(0, 1fr); }
  .company-entry.is-managing .company-identity { grid-column: 2; }
  .company-entry.is-managing .company-product, .company-entry.is-managing .company-download, .company-entry.is-managing .company-research-links { grid-column: 2; }
  .company-download { grid-column: 1; }
  .company-download { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .company-download-meta { margin-top: 0; }
  .company-research-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .company-case-button { grid-column: 1 / -1; }
  .company-entry.is-managing .company-case-button { grid-column: auto; }
  .landscape-batch-bar { align-items: stretch; flex-wrap: wrap; }
  .landscape-batch-bar > span { width: 100%; order: -1; }
  .topbar-library-actions { width: 100%; }
  .topbar-library-actions .button { flex: 1; }
  .topbar-library-actions .topbar-landscape-search { width: auto; max-width: none; flex: 1 1 170px; }
  .mail-shell { display: block; min-height: 0; overflow: visible; }
  .mail-list-pane { border-right: 0; border-bottom: 1px solid var(--line); }
  .mail-list-pane { min-height: 420px; }
  .mail-reader-pane { min-height: 420px; }
  .mail-reader-head, .mail-reader-message-info, .mail-reader-body { padding-left: 18px; padding-right: 18px; }
  .mail-reader-title-row { flex-direction: column; }
  .mail-reader-actions { justify-content: flex-start; }
  .mail-compose-formatbar { align-items: flex-start; flex-direction: column; }
  .mail-compose-formatbar.is-batch { grid-template-columns: 1fr; }
  .mail-compose-formatbar.is-batch .mail-rich-tools,
  .mail-compose-formatbar.is-batch .mail-compose-variable-tools,
  .mail-compose-formatbar.is-batch .mail-compose-side-actions { grid-column: 1; width: 100%; }
  .mail-compose-formatbar.is-batch .mail-rich-tools { grid-row: 1; }
  .mail-compose-formatbar.is-batch .mail-compose-variable-tools { grid-row: 2; }
  .mail-compose-formatbar.is-batch .mail-compose-side-actions { grid-row: 3; }
  .mail-compose-side-actions { width: 100%; margin-left: 0; }
  .mail-composer-footer { align-items: stretch; flex-direction: column; }
  .mail-composer-footer > div { display: grid; grid-template-columns: 1fr 1fr; }
}

/* Unified reveal and collapse motion */
:where(.settings-card, .advanced-workbench, .company-competitive-section, .company-research-candidates, .prospect-research-sources)::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transform: translateY(-5px);
  transition: block-size var(--motion-slow) var(--motion-ease), opacity var(--motion-base) ease, transform var(--motion-base) var(--motion-ease), content-visibility var(--motion-slow) allow-discrete;
  transition-behavior: allow-discrete;
}

:where(.settings-card, .advanced-workbench, .company-competitive-section, .company-research-candidates, .prospect-research-sources)[open]::details-content {
  block-size: auto;
  opacity: 1;
  transform: translateY(0);
}

:where(.settings-card, .advanced-workbench, .company-competitive-section, .company-research-candidates, .prospect-research-sources) > summary {
  transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, margin var(--motion-base) var(--motion-ease);
}

:is(.sidebar-appearance-menu, .account-sidebar-menu, .campaign-context-menu, .mail-reader-ai-menu, .mail-reader-more-menu, .mail-compose-popover, .mail-contact-tooltip, .contacts-sort-menu, .contact-decision-history-menu, .contact-profile-more-menu, .mail-template-add-menu, .company-download-estimate-tooltip) {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
  transform-origin: top right;
  transition: opacity var(--motion-fast) ease, transform var(--motion-base) var(--motion-ease), visibility 0s linear 0s;
  will-change: opacity, transform;
}

:is(.sidebar-appearance-menu, .account-sidebar-menu, .campaign-context-menu, .mail-reader-ai-menu, .mail-reader-more-menu, .mail-compose-popover, .mail-contact-tooltip, .contacts-sort-menu, .contact-decision-history-menu, .contact-profile-more-menu, .mail-template-add-menu, .company-download-estimate-tooltip)[hidden] {
  display: block;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(.985);
  transition: opacity var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease-soft), visibility 0s linear var(--motion-fast);
}

@starting-style {
  :is(.sidebar-appearance-menu, .account-sidebar-menu, .campaign-context-menu, .mail-reader-ai-menu, .mail-reader-more-menu, .mail-compose-popover, .mail-contact-tooltip, .contacts-sort-menu, .contact-decision-history-menu, .contact-profile-more-menu, .mail-template-add-menu, .company-download-estimate-tooltip):not([hidden]) {
    opacity: 0;
    transform: translateY(-6px) scale(.985);
  }
}

/* The account menu is anchored above the user card, so it opens upward. */
.account-sidebar-menu { transform-origin: bottom left; }
.account-sidebar-menu[hidden] { transform: translateY(8px) scale(.985); }
@starting-style {
  .account-sidebar-menu:not([hidden]) {
    opacity: 0;
    transform: translateY(8px) scale(.985);
  }
}

.contact-profile-source-tooltip::details-content {
  opacity: 0;
  transform: translateY(-5px) scale(.985);
  transform-origin: top left;
  transition: opacity var(--motion-fast) ease, transform var(--motion-base) var(--motion-ease), content-visibility var(--motion-base) allow-discrete;
  transition-behavior: allow-discrete;
}

.contact-profile-source-tooltip[open]::details-content {
  opacity: 1;
  transform: translateY(0) scale(1);
}