:root { color-scheme: light; --ink:#13272b; --muted:#64767a; --line:#d9e3e3; --soft:#f3f7f6; --green:#087f68; --green-dark:#056b59; --red:#b84646; --gold:#c98a25; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { font-family:'DM Sans',system-ui,sans-serif; color:var(--ink); background:#f7faf9; font-size:14px; line-height:1.5; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.5; }
.hidden { display:none!important; }
.shell { display:grid; grid-template-columns:236px minmax(0,1fr); min-height:100vh; }
.sidebar { position:sticky; top:0; height:100vh; background:#14252b; color:#e6f0ef; padding:29px 16px 24px; display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:11px; padding:0 13px 34px; font-family:Manrope,sans-serif; line-height:1.06; }
.brand strong { display:block; font-size:19px; letter-spacing:-.05em; }
.brand small { font-size:9px; letter-spacing:.2em; color:#8aa6a7; font-weight:800; }
.brand-mark { display:grid; place-items:center; width:37px; height:37px; background:#1a7e6c; border-radius:12px; color:white; font-size:25px; line-height:1; }
.sidebar nav { display:grid; gap:4px; }
.nav-item { background:transparent; color:#acc0c0; border:0; text-align:left; display:flex; align-items:center; gap:13px; width:100%; padding:11px 13px; border-radius:10px; font-weight:700; }
.nav-item span { font-size:19px; width:20px; text-align:center; font-weight:400; }
.nav-item:hover,.nav-item.active { color:#fff; background:#29454b; }
.sidebar-foot { margin-top:auto; display:flex; align-items:center; gap:8px; padding:13px; border-top:1px solid #305057; color:#9bb5b7; font-size:12px; }
.status-dot { background:#4dd6ae; width:7px; height:7px; border-radius:50%; }
.main-column { min-width:0; }
.topbar { min-height:115px; background:#fff; border-bottom:1px solid var(--line); padding:26px 42px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.topbar h1,h1,h2,h3 { font-family:Manrope,system-ui,sans-serif; margin:0; letter-spacing:-.035em; }
.topbar h1 { font-size:28px; line-height:1.15; }
.eyebrow { color:#16826e; font-size:10px; font-weight:800; letter-spacing:.2em; margin:0 0 6px; }
.topbar-right { display:flex; align-items:center; gap:17px; color:var(--muted); font-size:12px; }
main { max-width:1440px; margin:auto; padding:34px 42px 70px; }
.page-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:22px; }
.page-intro h2 { font-size:23px; }
.page-intro p { margin:7px 0 0; color:var(--muted); }
.muted { color:var(--muted); }
.grid { display:grid; gap:18px; }
.metrics { grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:25px; }
.metric,.card { background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 30px rgba(22,55,56,.03); }
.metric { padding:22px; min-height:126px; }
.metric .label { color:var(--muted); font-size:12px; font-weight:700; }
.metric strong { display:block; font-family:Manrope,sans-serif; font-size:29px; letter-spacing:-.05em; margin-top:7px; }
.metric small { color:var(--muted); }
.card { padding:24px; margin-bottom:18px; }
.card h3 { font-size:17px; margin-bottom:12px; }
.banner { padding:18px 20px; border-radius:13px; margin-bottom:23px; display:flex; gap:14px; align-items:flex-start; }
.banner.safe { background:#e8f5f1; border:1px solid #b9ddcf; color:#175447; }
.banner.warn { background:#fff6e6; border:1px solid #efdbad; color:#6c501c; }
.banner strong { display:block; font-size:14px; }
.banner span { font-size:13px; }
.badge { display:inline-block; border-radius:999px; padding:4px 9px; font-size:11px; font-weight:800; letter-spacing:.02em; text-transform:capitalize; background:#eaf0f0; color:#547074; white-space:nowrap; }
.badge.running,.badge.connected,.badge.active { background:#dbf4e9; color:#087254; }
.badge.paused,.badge.uncertain { background:#fff0cf; color:#8c651e; }
.badge.archived,.badge.historical { background:#e8edf1; color:#60727d; }
.badge.error,.badge.failed { background:#ffebeb; color:#a93c3c; }
.toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.search-row { display:flex; align-items:end; gap:10px; max-width:560px; margin-bottom:16px; }
.search-row label { flex:1; }
.pager { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 12px 2px; color:var(--muted); font-size:12px; }
button.primary,button.secondary,button.danger,button.quiet { border-radius:9px; font-weight:800; padding:10px 15px; border:1px solid transparent; }
button.primary { background:var(--green); color:#fff; }
button.primary:hover { background:var(--green-dark); }
button.secondary { background:#fff; border-color:#c9d8d6; color:#235c53; }
button.secondary:hover { background:#edf7f4; }
button.quiet { background:transparent; color:#416b68; padding:8px 10px; }
button.quiet:hover { background:#edf5f3; }
button.danger { background:#fff; border-color:#e4b6b6; color:var(--red); }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; text-align:left; }
th { color:#718286; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid var(--line); padding:12px 14px; }
td { padding:15px 14px; border-bottom:1px solid #edf1f1; vertical-align:middle; }
tr:last-child td { border-bottom:0; }
tr:hover td { background:#fafdfc; }
td strong { font-weight:700; }
.table-link { background:none; border:0; padding:0; color:var(--ink); font-weight:800; text-align:left; }
.table-link:hover { color:var(--green); text-decoration:underline; }
.stack { display:grid; gap:15px; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:17px; }
.three-col { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }
label { display:grid; gap:6px; font-weight:700; font-size:12px; color:#425b5d; }
input,textarea,select { width:100%; border:1px solid #cbdad8; border-radius:9px; padding:10px 12px; color:var(--ink); background:#fff; outline:none; }
input:focus,textarea:focus,select:focus { border-color:#1f9c83; box-shadow:0 0 0 3px #b8e7db; }
textarea { min-height:130px; resize:vertical; }
input[type=checkbox] { width:auto; accent-color:var(--green); }
input[type=file] { padding:9px; }
.help { font-size:12px; color:var(--muted); margin:5px 0 0; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:15px; }
.section-head h3 { margin:0; }
.steps { display:grid; gap:12px; }
.step { border:1px solid var(--line); border-radius:12px; padding:17px; background:#fafdfc; }
.variants { display:grid; gap:12px; margin:14px 0 8px; }
.variant { border-left:3px solid #b9dcd3; padding:7px 0 8px 15px; display:grid; gap:10px; }
.step-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.checkbox-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; max-height:240px; overflow:auto; }
.days-row { display:flex; gap:9px; flex-wrap:wrap; margin-top:14px; }
.days-row label { display:flex; align-items:center; gap:7px; border:1px solid var(--line); padding:7px 10px; border-radius:8px; }
.checkbox-list label { display:flex; align-items:center; gap:8px; font-size:12px; padding:8px; border:1px solid var(--line); border-radius:8px; }
.empty { text-align:center; color:var(--muted); padding:46px 20px; }
.empty strong { display:block; color:var(--ink); font-size:17px; margin-bottom:5px; }
.empty p { margin:0; }
.timeline { display:grid; gap:9px; }
.message { border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
.message p { margin:7px 0 0; white-space:pre-wrap; }
.message .meta { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:12px; }
.toast { position:fixed; bottom:25px; right:25px; background:#173e38; color:#fff; padding:13px 17px; border-radius:11px; box-shadow:0 10px 30px #0003; max-width:360px; z-index:10; }
.toast.error { background:#8b3030; }
.login-screen { min-height:100vh; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at 75% 5%,#d6eee5 0,transparent 32%),#edf5f2; }
.login-card { width:min(100%,440px); background:#fff; padding:42px; border-radius:20px; box-shadow:0 18px 70px #133a3520; }
.login-card .brand-mark { margin-bottom:22px; }
.login-card h1 { font-size:28px; margin-bottom:9px; }
.login-card .muted { margin:0 0 30px; }
.login-card button { margin-top:5px; }
.error { color:var(--red); min-height:1.3em; }
@media(max-width:1050px) { .metrics { grid-template-columns:repeat(2,1fr); } .checkbox-list { grid-template-columns:repeat(2,1fr); } }
@media(max-width:750px) { .shell { grid-template-columns:1fr; } .sidebar { position:static; height:auto; padding:13px; } .sidebar .brand { padding:4px 8px 13px; } .sidebar nav { display:flex; overflow:auto; } .nav-item { flex:0 0 auto; width:auto; padding:9px 12px; white-space:nowrap; } .sidebar-foot { display:none; } .topbar { padding:22px; min-height:90px; } main { padding:22px 16px 45px; } .two-col,.three-col { grid-template-columns:1fr; } .topbar-right #user-label { display:none; } }
@media(max-width:500px) { .metrics { grid-template-columns:1fr 1fr; gap:10px; } .metric { min-height:100px; padding:15px; } .metric strong { font-size:24px; } .page-intro { align-items:flex-start; flex-direction:column; } .checkbox-list { grid-template-columns:1fr; } }

/* A calmer workspace shell, with the Unibox as the primary working surface. */
:root { --ink:#202a36; --muted:#677586; --line:#e3e8ef; --soft:#f7f9fc; --green:#176b59; --green-dark:#105545; }
body { background:#f7f9fc; }
.shell { grid-template-columns:210px minmax(0,1fr); }
.sidebar { background:#fff; color:var(--ink); border-right:1px solid var(--line); padding:22px 12px; }
.brand { padding:2px 12px 28px; }
.brand strong { color:#253548; }
.brand small { color:#8693a2; }
.brand-mark { background:#dcefe8; color:#176b59; border-radius:11px; }
.nav-item { color:#586777; border-radius:9px; font-weight:650; }
.nav-item:hover,.nav-item.active { background:#e8f1ee; color:#155747; }
.sidebar-foot { border-top:1px solid var(--line); color:#8591a0; }
.status-dot { background:#2f9b75; }
.topbar { min-height:78px; padding:16px 28px; }
.topbar h1 { font-size:22px; }
.topbar .eyebrow { color:#778999; font-size:9px; margin-bottom:3px; }
main { padding:28px; }
.metric,.card { box-shadow:0 2px 12px rgba(30,47,68,.025); border-radius:13px; }
button:focus-visible,.nav-item:focus-visible,summary:focus-visible { outline:3px solid #71b59e; outline-offset:2px; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.inbox-mode .topbar { border-bottom:1px solid var(--line); }
.inbox-mode main { max-width:none; height:calc(100vh - 78px); min-height:620px; padding:0; overflow:hidden; }
.inbox-workspace { display:grid; grid-template-columns:180px minmax(290px,360px) minmax(380px,1fr); height:100%; background:#fff; }
.inbox-filters { overflow:auto; border-right:1px solid var(--line); padding:24px 12px 28px; background:#fbfcfe; }
.inbox-filters-heading { padding:0 10px 20px; }
.inbox-kicker,.filter-title { color:#8895a4; font-size:10px; font-weight:800; letter-spacing:.11em; }
.inbox-filters-heading h2 { font-size:22px; margin:4px 0; }
.inbox-filters-heading p { color:var(--muted); font-size:12px; margin:0; }
.filter-group { display:grid; gap:2px; }
.filter-title { padding:24px 10px 9px; }
.filter-item { display:flex; align-items:center; gap:10px; width:100%; border:0; background:transparent; text-align:left; color:#526171; padding:8px 10px; border-radius:8px; font-size:12px; font-weight:650; text-transform:capitalize; }
.filter-item:hover,.filter-item.active { background:#e8f1ee; color:#155747; }
.filter-item>span:first-child { width:16px; text-align:center; }
.filter-dot { display:inline-block; width:8px!important; height:8px; border-radius:50%; background:#a2acb8; margin:0 4px; }
.filter-dot.interested,.filter-dot.meeting_booked,.filter-dot.meeting_completed,.filter-dot.won { background:#2b9b76; }
.filter-dot.out_of_office,.filter-dot.neutral { background:#d2a350; }
.filter-dot.not_interested,.filter-dot.wrong_person,.filter-dot.lost { background:#d87878; }
.inbox-select-label { font-size:11px; padding:0 10px; }
.inbox-select-label select { margin-top:5px; font-size:11px; padding:8px 7px; min-width:0; }
.conversation-list { min-width:0; display:flex; flex-direction:column; border-right:1px solid var(--line); }
.conversation-toolbar { height:61px; flex:none; display:flex; align-items:center; justify-content:space-between; padding:0 16px 0 20px; }
.conversation-toolbar strong { display:block; font-size:14px; }
.conversation-toolbar small { display:block; color:var(--muted); font-size:11px; }
.icon-button { width:34px; height:34px; display:grid; place-items:center; border:0; background:transparent; border-radius:50%; color:#647383; font-size:21px; padding:0; }
.icon-button:hover { background:#edf2f6; color:#273e51; }
.inbox-search { margin:0 14px 12px; height:38px; border-radius:9px; background:#f0f4f7; display:flex; align-items:center; gap:7px; padding:0 11px; color:#718192; }
.inbox-search:focus-within { box-shadow:0 0 0 2px #9bc6b8; }
.inbox-search span { font-size:21px; }
.inbox-search input { background:transparent; border:0; outline:0; box-shadow:none; padding:0; font-size:12px; min-width:0; }
.inbox-search input:focus { border:0; box-shadow:none; }
.conversation-scroll { overflow:auto; flex:1; }
.conversation-row { display:flex; align-items:flex-start; border-top:1px solid #edf0f4; padding:0 9px 0 8px; }
.conversation-row:last-child { border-bottom:1px solid #edf0f4; }
.conversation-row:hover { background:#f7fafb; }
.conversation-row.selected { background:#eaf3f0; box-shadow:inset 3px 0 #218067; }
.conversation-row.unread { background:#f6faf9; }
.conversation-row.selected.unread { background:#eaf3f0; }
.star-button { width:27px; flex:none; border:0; background:transparent; color:#a9b3bd; padding:17px 4px; font-size:19px; line-height:1; }
.star-button:hover,.star-button.on { color:#d5a746; }
.conversation-open { display:grid; gap:4px; min-width:0; flex:1; border:0; background:transparent; text-align:left; padding:12px 3px 13px; color:var(--ink); }
.conversation-top { display:flex; align-items:baseline; justify-content:space-between; gap:6px; min-width:0; }
.conversation-top strong { font-size:12px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conversation-row.unread .conversation-top strong,.conversation-row.unread .conversation-subject { font-weight:800; }
.conversation-top time { flex:none; font-size:10px; color:#7b8998; }
.conversation-subject { font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conversation-snippet { color:#758290; font-size:11px; line-height:1.35; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.conversation-tags { display:flex; align-items:center; gap:6px; color:#8794a1; font-size:10px; white-space:nowrap; overflow:hidden; }
.conversation-tags>span { overflow:hidden; text-overflow:ellipsis; }
.outcome-pill { color:#24765e; background:#e4f2ec; border-radius:5px; padding:1px 5px; text-transform:capitalize; }
.conversation-pagination { flex:none; border-top:1px solid var(--line); }
.conversation-pagination .pager { padding:9px 12px; font-size:11px; }
.conversation-pagination .secondary { font-size:11px; padding:5px 8px; }
.inbox-empty { text-align:center; color:var(--muted); padding:50px 20px; }
.inbox-empty strong { color:var(--ink); }
.inbox-reader { min-width:0; display:flex; flex-direction:column; background:#fff; }
.reader-placeholder { margin:auto; text-align:center; color:#8090a0; padding:20px; }
.reader-placeholder>span { width:70px; height:70px; display:grid; place-items:center; margin:0 auto 16px; border-radius:20px; background:#eef4f2; color:#39725f; font-size:32px; }
.reader-placeholder h3 { color:#3e4d5c; font-size:17px; }
.reader-placeholder p { font-size:12px; }
.reader-header { display:flex; align-items:center; gap:12px; padding:17px 23px; border-bottom:1px solid var(--line); min-height:77px; }
.reader-heading { min-width:0; flex:1; }
.reader-heading h2 { font-size:18px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reader-heading span { display:block; color:#7d8996; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:4px; }
.reader-back { display:none; }
.reader-actions { min-height:50px; display:flex; align-items:center; gap:10px; padding:0 24px; border-bottom:1px solid var(--line); font-size:11px; color:#6f7b89; }
.reader-contact { color:#2d5f51; font-weight:700; }
.reader-spacer { flex:1; }
.reader-account { text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reader-scroll { overflow:auto; flex:1; padding:16px 24px 32px; }
.reader-thread { display:grid; gap:15px; max-width:900px; margin:auto; }
.email-card { display:flex; gap:12px; border-bottom:1px solid #edf0f4; padding:12px 0 21px; }
.email-avatar { flex:none; width:33px; height:33px; border-radius:50%; display:grid; place-items:center; background:#dceee8; color:#277159; font-weight:800; }
.email-card.outgoing .email-avatar { background:#e9eef4; color:#4f6580; }
.email-main { min-width:0; flex:1; }
.email-heading { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.email-heading strong { font-size:12px; }
.email-heading small { display:block; color:#8793a0; font-size:10px; }
.email-heading time { flex:none; color:#8793a0; font-size:10px; }
.email-body { white-space:pre-wrap; overflow-wrap:anywhere; color:#293644; line-height:1.62; font-size:12px; margin-top:15px; max-height:none; }
.earlier-message { color:#6e7d8b; margin-top:10px; font-size:11px; }
.earlier-message summary { cursor:pointer; }
.earlier-message .email-body { color:#293644; }
.reader-compose { max-width:900px; margin:25px auto 0; border:1px solid var(--line); border-radius:11px; overflow:hidden; box-shadow:0 3px 12px #2134490a; }
.compose-heading { display:flex; justify-content:space-between; gap:8px; padding:10px 13px; background:#f7f9fb; font-size:11px; }
.compose-heading span { color:#84909d; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reader-compose textarea { border:0; border-radius:0; min-height:135px; resize:vertical; box-shadow:none; font-size:12px; }
.reader-compose textarea:focus { box-shadow:none; }
.reader-compose textarea:disabled { background:#fff; }
.compose-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 12px; border-top:1px solid var(--line); }
.compose-footer span { color:#8a97a3; font-size:10px; }
.compose-footer .primary { padding:7px 13px; white-space:nowrap; }
.outcome-editor { max-width:900px; margin:18px auto 0; border:1px solid var(--line); border-radius:9px; padding:12px 15px; font-size:12px; }
.outcome-editor summary { cursor:pointer; font-weight:700; color:#4c635d; text-transform:capitalize; }
.outcome-editor form { margin-top:16px; }
.reader-scroll>.outcome-editor { margin:0 auto 10px; border:0; border-bottom:1px solid var(--line); border-radius:0; max-width:900px; padding:5px 0 14px; }
@media(max-width:1250px) { .inbox-workspace { grid-template-columns:155px minmax(260px,320px) minmax(350px,1fr); } .inbox-filters { padding-left:8px; padding-right:8px; } }
@media(max-width:1000px) { .inbox-workspace { grid-template-columns:minmax(270px,340px) minmax(350px,1fr); } .inbox-filters { display:none; } }
@media(max-width:750px) { .shell { grid-template-columns:1fr; } .sidebar { height:auto; position:static; padding:10px; } .sidebar .brand { padding:2px 7px 9px; } .topbar { min-height:64px; padding:10px 16px; } .inbox-mode main { height:calc(100vh - 177px); min-height:460px; } .inbox-workspace { display:block; position:relative; } .conversation-list,.inbox-reader { height:100%; } .inbox-reader { display:none; position:absolute; inset:0; z-index:2; } .inbox-reader.open { display:flex; } .reader-back { display:grid; } .reader-header { padding:12px; } .reader-scroll { padding:12px; } .reader-actions { padding:0 12px; } }