/* Shared comparison controls; each direction has its own layout and hierarchy. */
.app{grid-template-rows:auto auto auto minmax(0,1fr)}
.design-bar{grid-row:1;display:flex;align-items:center;gap:16px;min-height:40px;padding:5px 16px;background:var(--surface);border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:11px}
.design-bar>strong{font-size:11px;font-weight:500;white-space:nowrap}
.design-choices{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.design-choices button{padding:5px 12px;border-radius:5px;font-size:11px;white-space:nowrap;color:var(--muted)}
.design-choices button[aria-pressed=true]{background:var(--text);color:var(--surface);font-weight:600}
.design-choices button:hover:not([aria-pressed=true]){background:var(--surface-2)}
.design-note{margin-left:auto;font-size:10px;color:var(--faint)}
.top{grid-row:2}.workspace-bar{grid-row:3}.mail-shell{grid-row:4}
.ui-icon{width:18px;height:18px;flex:none;vertical-align:middle}
:root:not([data-design=original]){--font:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;--faint:#778294}
:root:not([data-design=original]) body{padding:0}
:root:not([data-design=original]) .app{gap:0;padding:0}
:root:not([data-design=original]) .design-bar{border:0;border-bottom:1px solid var(--line);border-radius:0;padding-inline:24px;min-height:38px}
:root:not([data-design=original]) .top{padding:12px 24px;border:0;border-bottom:1px solid var(--line);border-radius:0;min-height:68px;gap:20px}
:root:not([data-design=original]) .brand{position:relative;padding-left:44px;font-size:15px;letter-spacing:-.3px}
:root:not([data-design=original]) .brand:before{content:'CF';position:absolute;left:0;top:2px;width:33px;height:33px;display:grid;place-items:center;border-radius:9px;background:var(--accent);color:#fff;font-size:13px;letter-spacing:0}
:root:not([data-design=original]) .brand small{display:block;margin:2px 0 0;font-size:9px;letter-spacing:0}
:root:not([data-design=original]) .nav{gap:4px}
:root:not([data-design=original]) .nav a{padding:7px 10px;font-size:12px}
:root:not([data-design=original]) .who .facets{display:none}
:root:not([data-design=original]) .who>span{display:none}
:root:not([data-design=original]) .who select{border:0;background:var(--surface-2);font-size:11px;padding:7px 10px;color:var(--text);opacity:1}
:root:not([data-design=original]) .who .btn{border:0;font-size:11px;padding:7px}
.workspace-bar{background:var(--surface);border-bottom:1px solid var(--line);min-width:0}
.workspace-heading{display:flex;justify-content:space-between;align-items:center;padding:18px 26px;gap:20px}
.eyebrow{font-size:9px;letter-spacing:1.8px;color:var(--faint);font-weight:600;margin-bottom:5px}
.workspace-heading h1{font-size:23px;line-height:1.3;letter-spacing:-.7px;margin:0;font-weight:650}
.workspace-heading p{margin:6px 0 0;font-size:11px;color:var(--muted)}
.workspace-metrics{display:flex;align-items:center;gap:0;position:relative;padding-bottom:10px}
.workspace-metric{display:flex;align-items:center;gap:16px;min-width:122px;padding:0 20px;border-left:1px solid var(--line)}
.workspace-metric span{font-size:11px;color:var(--muted)}
.workspace-metric b{font-size:24px;font-weight:500;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.workspace-metrics>small{position:absolute;right:20px;bottom:-7px;font-size:9px;color:var(--faint)}
.metric-do b{color:var(--accent)}.metric-triage b{color:var(--warn)}
.record-tabs{display:flex;align-items:center;padding:0 24px;gap:0;overflow-x:auto;min-height:36px;background:var(--surface-2)}
.record-tab{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:10px 15px;font-size:11px;border-right:1px solid var(--line);color:var(--muted);border-top:2px solid transparent}
.record-tab:hover{color:var(--accent);background:var(--surface)}
.record-tab.selected{border-top-color:var(--accent);background:var(--surface);color:var(--accent);font-weight:600}
.record-tab .ui-icon{width:14px;height:14px}
.record-hint{margin-left:auto;padding:0 16px;font-size:10px;color:var(--faint);white-space:nowrap}
.design-group{display:flex;align-items:center;gap:7px;padding:11px 12px;width:100%;font-size:11px;color:var(--muted);text-align:left;background:var(--surface-2);font-weight:600}
.group-count{margin-left:auto;font-size:10px;font-weight:500;min-width:18px;text-align:center}
.group-caret{width:12px;font-size:14px;line-height:1}
.row-person{display:flex;align-items:center;gap:8px;min-width:0}
.contact-avatar{width:29px;height:29px;display:grid;place-items:center;border-radius:8px;background:#e7edf8;color:#4f68a0;font-size:12px;font-weight:600;flex:none}
.avatar-acme{background:#e6eefc;color:#4769a4}.avatar-globex{background:#f3e8de;color:#956e42}.avatar-lonestar{background:#f1e5f7;color:#9850af}
.row-person>span:nth-child(2){min-width:0}
.row-person strong{display:block;font-size:12px;font-weight:550;line-height:1.4}
.row-person small{display:block;color:var(--faint);font-size:10px;margin-top:1px}
.unread-dot{width:6px;height:6px;background:var(--accent);border-radius:50%;margin-left:auto;flex:none}
.design-row{position:relative;min-width:0;padding:14px;display:grid;grid-template-columns:1fr auto;gap:7px 8px;background:var(--surface)}
.design-row .row-content{grid-column:1/-1;min-width:0;display:block}
.design-row .row-subject{display:block;font-size:12px;font-weight:500;line-height:1.6;margin:9px 0 3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.design-row .row-preview{font-size:10.5px;color:var(--muted);line-height:1.7;display:block}
.design-row .row-related{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;font-size:9px;color:var(--faint)}
.row-related>span{padding:1px 4px;border:1px solid var(--line);border-radius:3px;color:var(--muted);font-family:var(--mono);font-size:9px}
.row-state{font-size:9px;border-radius:4px;padding:2px 6px;width:max-content;align-self:center;font-weight:500;white-space:nowrap}
.status-do{background:#e8f0fe;color:#3268ba}.status-triage{background:#fff0d4;color:#9a6a13}.status-others{background:#eceef3;color:#71798a}.status-wait{background:#f0e9fa;color:#8659ab}.status-pool{background:#e9edf3;color:#6b7a8c}
.row-mailbox{font-size:10px;color:var(--faint);justify-self:end;align-self:center}.row-mailbox small{display:block;font-size:9px}
.design-row>time{position:absolute;right:13px;top:16px;color:var(--faint);font-size:9px;max-width:85px;text-align:right}
.design-row .unread-dot{margin-right:65px}
.design-row.selected{background:var(--accent-soft)}
.design-row.unread{box-shadow:none}.design-row.selected{box-shadow:inset 3px 0 var(--accent)}
.design-empty{padding:70px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--faint)}
.design-empty .ui-icon{width:32px;height:32px;margin-bottom:6px}.design-empty b{font-size:13px;font-weight:500;color:var(--muted)}.design-empty span{font-size:11px;line-height:1.8}
.reader-kicker{display:flex;align-items:center;gap:8px;margin:16px 0 10px;font-size:10px;color:var(--faint)}
.reader-kicker>span:first-child{letter-spacing:.5px;color:var(--accent-text)}
.reader-mail-state{margin-left:auto;border-radius:4px;padding:2px 6px;font-size:9px;white-space:nowrap}
:root:not([data-design=original]) .mail-reader{padding:16px 20px}
:root:not([data-design=original]) .reader-title{font-size:19px;letter-spacing:-.4px;line-height:1.5;margin-bottom:10px}
:root:not([data-design=original]) .reader-toolbar{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:0}
:root:not([data-design=original]) .reader-toolbar .btn{font-size:10px;border:0;background:var(--surface-2);padding:5px 7px}
:root:not([data-design=original]) .mail-body{font-size:13px;line-height:1.85;margin-block:20px}
:root:not([data-design=original]) .thread-mail{padding:16px;border-radius:8px}
:root:not([data-design=original]) .thread-old{padding:10px 12px}
:root:not([data-design=original]) .ai-summary{font-size:11px;padding:11px 12px;line-height:1.7}
:root:not([data-design=original]) .related-links{border-left-width:2px;background:var(--surface);padding:9px 10px}
:root:not([data-design=original]) .reply-bar{gap:7px;flex-wrap:wrap;padding-block:3px}
:root:not([data-design=original]) .reply-bar .btn{font-size:11px;padding:7px 12px}
:root:not([data-design=original]) .mail-nav{padding:18px 8px 14px}
:root:not([data-design=original]) .new-mail{border-radius:6px;margin:0 4px 19px;padding:10px;font-size:12px}
:root:not([data-design=original]) .folder-btn{border-radius:5px;padding:9px 12px;margin:2px 0;font-size:11px}
:root:not([data-design=original]) .mail-nav select{font-size:10px;padding:7px 4px;margin:0 4px 12px;width:calc(100% - 8px)}
:root:not([data-design=original]) .scope-label{font-size:10px;margin:0 6px 7px}
:root:not([data-design=original]) .nav-caption{font-size:9px;line-height:1.8;padding:20px 7px 7px}
:root:not([data-design=original]) .mail-account{padding:9px 7px;display:block}
:root:not([data-design=original]) .mail-account b{display:block;font-size:11px}.mail-account small{line-height:1.7}
:root:not([data-design=original]) .nav-view{font-size:11px;padding:8px}
:root:not([data-design=original]) .nav-foot{padding:24px 6px 0;font-size:9px;line-height:1.9}
:root:not([data-design=original]) .nav-foot .note{font-size:9px}
:root:not([data-design=original]) .list-head{padding:14px 12px;gap:11px 4px}
:root:not([data-design=original]) .list-head b{font-size:12px}
:root:not([data-design=original]) .list-head input{padding:8px 10px;font-size:11px;border-radius:5px;background:var(--surface-2);border-color:transparent}
:root:not([data-design=original]) .quick-filters button{font-size:10px;padding:3px 7px;border-radius:4px}
:root:not([data-design=original]) .list-foot{font-size:9px;line-height:1.8;padding:8px 12px}
:root:not([data-design=original]) .business-header{padding:14px 12px;gap:5px;flex-wrap:wrap}
:root:not([data-design=original]) .business-header b{font-size:12px}
:root:not([data-design=original]) .business-header .note{font-size:10px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root:not([data-design=original]) .business-header .btn{font-size:10px;padding:3px 6px}
:root:not([data-design=original]) .business-body{padding:12px;background:var(--surface-2)}
:root:not([data-design=original]) .biz-tabs{padding:3px 6px 0;scrollbar-width:thin}
:root:not([data-design=original]) .biz-tabs button{font-size:10px;padding:8px 7px}
:root:not([data-design=original]) .info-card{border-radius:7px;padding:12px;margin-bottom:12px}
:root:not([data-design=original]) .info-card h4{font-size:11px}
:root:not([data-design=original]) .info-card p{line-height:1.8}
:root:not([data-design=original]) .metric-strip{gap:7px}.metric-strip b{font-variant-numeric:tabular-nums}
:root:not([data-design=original]) .metric-strip div{font-size:9px}
:root:not([data-design=original]) .metric-strip b{font-size:20px}
:root:not([data-design=original]) .profile-note{font-size:10px;line-height:1.8;padding:8px}
:root:not([data-design=original]) .copy-status>span{font-size:9px;padding:5px}
:root:not([data-design=original]) .alert-small{font-size:10.5px;line-height:1.8}
.section-title{display:flex;gap:8px;align-items:center;margin:17px 0 10px;font-size:11px;font-weight:600}
.section-count{font-size:9px;color:var(--faint);font-weight:400}
.quiet-action{font-size:10px;color:var(--accent-text);margin-left:auto;padding:3px 6px;border-radius:4px;white-space:nowrap}
.quiet-action:hover{background:var(--accent-soft)}
.customer-identity{display:flex;align-items:center;gap:9px;padding:4px 0 14px;border-bottom:1px solid var(--line)}
.identity-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--accent-soft);color:var(--accent-text)}
.customer-identity>div{min-width:0;flex:1}
.customer-name{display:block;font-size:13px;font-weight:600;text-align:left;padding:0;color:var(--text)}
.customer-name:hover{color:var(--accent-text)}
.customer-identity>div>span{display:block;font-size:9px;color:var(--faint);margin-top:3px;line-height:1.6}
.identity-tier{font-size:9px;color:var(--accent-text);padding:3px 6px;border-radius:4px;background:var(--accent-soft);white-space:nowrap}
.task-cards{display:flex;flex-direction:column;gap:8px}
.task-card{display:flex;gap:9px;border:1px solid var(--line);border-radius:8px;padding:11px 10px;background:var(--surface)}
.task-symbol{width:23px;height:23px;border-radius:6px;flex:none;display:grid;place-items:center;font-size:10px;background:var(--warn-soft);color:var(--warn)}
.task-symbol .ui-icon{width:14px;height:14px}.task-ok .task-symbol{background:var(--ok-soft);color:var(--ok)}
.task-card>div{min-width:0;flex:1}.task-card-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.task-card-top b{font-size:11px;font-weight:550;line-height:1.7}.task-card-top .chip{font-size:9px;padding:1px 5px;border-radius:4px}
.task-card p{font-size:10px;color:var(--muted);line-height:1.8;margin:5px 0 0}
.task-footnote{font-size:9px;color:var(--faint);margin:7px 0 13px}
.triage-next{display:flex;gap:10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:13px;font-size:11px}
.triage-next>.ui-icon{color:var(--warn)}.triage-next p{font-size:10px;color:var(--muted)}
.reply-focus{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--line);border-radius:8px;margin-bottom:12px;background:var(--surface-2)}
.focus-glyph{color:var(--accent-text);padding-top:2px}
.reply-focus>div{flex:1;min-width:0}.reply-focus strong{display:block;font-size:11px;font-weight:550}
.reply-focus>div>span{display:block;font-size:10px;line-height:1.8;color:var(--muted);margin-top:3px}
/* Salesforce direction: compact console, persistent related-record tabs. */
:root[data-design=salesforce]{--bg:#edf2f7;--surface-2:#f3f6fa;--line:#dce3ec;--text:#1d304a;--muted:#62738b;--accent:#176bd6;--accent-soft:#eaf3ff;--accent-text:#145ba8;--ai:#536da3;--ai-soft:#eff4fc}
[data-design=salesforce] .top{border-top:3px solid #176bd6}
[data-design=salesforce] .brand:before{border-radius:7px;background:#176bd6}
[data-design=salesforce] .nav a.on{background:#eaf3ff;color:#145ba8}
[data-design=salesforce] .workspace-heading{padding:15px 25px}
[data-design=salesforce] .workspace-heading h1{font-size:21px}
[data-design=salesforce] .workspace-heading p{margin-top:4px}
[data-design=salesforce] .mail-shell{border:0;border-radius:0;grid-template-columns:154px 260px minmax(0,1fr) 354px}
[data-design=salesforce] .mail-shell.hide-list{grid-template-columns:154px minmax(0,1fr) 354px}
[data-design=salesforce] .mail-shell.hide-business{grid-template-columns:154px 260px minmax(0,1fr)}
[data-design=salesforce] .mail-shell.hide-list.hide-business{grid-template-columns:154px minmax(0,1fr)}
[data-design=salesforce] .mail-nav{background:#f7f9fc}
[data-design=salesforce] .design-group{background:#f2f5f9;padding:8px 12px;font-size:10px}
[data-design=salesforce] .design-row{padding:12px 13px}
[data-design=salesforce] .design-row .row-preview{display:none}
[data-design=salesforce] .row-person .contact-avatar{border-radius:5px;width:25px;height:25px}
[data-design=salesforce] .design-row .row-subject{font-size:11px}
[data-design=salesforce] .reader-title{font-size:18px}
[data-design=salesforce] .info-card{box-shadow:0 1px 2px #18375505;border-radius:5px}
[data-design=salesforce] .business-drawer{border-top:4px solid var(--accent);border-radius:6px}
/* monday direction: grouped work table and a roomy switchable detail pane. */
:root[data-design=monday]{--bg:#f5f6fa;--surface-2:#f6f7fb;--line:#e2e5ee;--text:#323852;--muted:#6d748e;--accent:#6965db;--accent-soft:#efedff;--accent-text:#5850b7;--ai:#7063b6;--ai-soft:#f3efff}
[data-design=monday] .brand:before{background:#6965db;border-radius:12px 12px 4px 12px}
[data-design=monday] .workspace-heading{padding:21px 26px 18px}
[data-design=monday] .workspace-heading h1{font-size:25px;font-weight:650}
.workspace-spark{margin-left:12px;font-size:19px;color:#f1b956}
[data-design=monday] .workspace-metric{border:0;border-radius:9px;background:#f7f7fc;padding:9px 14px;min-width:125px;margin-left:9px}
[data-design=monday] .workspace-metric b{font-size:22px}
[data-design=monday] .workspace-metrics>small{bottom:-5px}
.board-view-bar{display:flex;align-items:center;border-top:1px solid var(--line);padding:0 24px;gap:20px;min-height:43px}
.board-views,.detail-views{display:flex;align-items:center;gap:4px}
.detail-views{margin-left:auto}
.board-view{display:inline-flex;align-items:center;gap:7px;padding:11px 15px;font-size:11px;color:var(--muted);border-bottom:2px solid transparent}
.board-view .ui-icon{width:14px;height:14px}.board-view.active{color:var(--accent-text);border-bottom-color:var(--accent)}
.board-view-note{font-size:10px;color:var(--faint)}
[data-design=monday] .mail-shell{border:0;border-radius:0;grid-template-columns:176px minmax(0,1fr) 43%;background:var(--surface)}
[data-design=monday] .mail-nav{background:#292f4c;border:0;color:#d9ddec}
[data-design=monday] .mail-nav .new-mail{background:#7772ea;border-color:#7772ea}
[data-design=monday] .mail-nav select{color:#e1e5f5;background:#373e5e;border-color:#464d6a}
[data-design=monday] .mail-nav .scope-label,[data-design=monday] .mail-nav .nav-caption,[data-design=monday] .mail-nav .nav-foot,[data-design=monday] .mail-nav .note{color:#a7afc9}
[data-design=monday] .mail-nav .folder-btn,[data-design=monday] .mail-nav .nav-view{color:#c5cce2}
[data-design=monday] .mail-nav .folder-btn.on{color:#fff;background:#484d75}
[data-design=monday] .mail-nav .folder-btn:hover,[data-design=monday] .mail-nav .mail-account:hover,[data-design=monday] .mail-nav .nav-view:hover{background:#383e5e}
[data-design=monday] .mail-account b{color:#e7eafa}
[data-design=monday] .mail-account small{color:#a7afc9}
[data-design=monday] .mail-list{grid-column:2;grid-row:1;border-right:0;display:grid}
[data-design=monday] .list-head{padding:18px 22px;gap:13px 10px;border-bottom:0}
[data-design=monday] .list-head b{font-size:15px}
[data-design=monday] .list-head input{width:100%;background:var(--surface);border:1px solid var(--line);padding:9px 12px}
[data-design=monday] .quick-filters{gap:5px}
[data-design=monday] .quick-filters button{border:0;background:var(--surface-2);padding:5px 10px}
[data-design=monday] .mail-rows{padding:0 20px 24px}
[data-design=monday] .queue-group{border:1px solid var(--line);border-left:4px solid #8b87e8;border-radius:7px;margin-bottom:23px;overflow:hidden}
[data-design=monday] .group-do{border-left-color:#7480e0}[data-design=monday] .group-triage{border-left-color:#e9b34a}[data-design=monday] .group-others{border-left-color:#9b9eac}[data-design=monday] .group-wait{border-left-color:#ad79ca}[data-design=monday] .group-pool{border-left-color:#8499b1}
[data-design=monday] .design-group{background:var(--surface);font-size:12px;padding:12px;color:#6a65bd}
[data-design=monday] .group-triage .design-group{color:#9a741e}
.board-columns{display:grid;grid-template-columns:minmax(0,1fr) 80px 58px 58px;gap:8px;padding:8px 10px;background:var(--surface-2);font-size:9px;color:var(--faint);border-block:1px solid var(--line)}
[data-design=monday] .design-row{display:grid;grid-template-columns:minmax(0,1fr) 80px 58px 58px;gap:8px;padding:13px 10px;align-items:center}
[data-design=monday] .design-row .row-content{grid-column:auto}
[data-design=monday] .design-row>time{position:static;font-size:9px;line-height:1.8;text-align:center;white-space:normal;max-width:58px;margin:0}
[data-design=monday] .design-row .row-mailbox{justify-self:center;font-size:10px}
[data-design=monday] .design-row .row-state{font-size:9px;justify-self:stretch;text-align:center;padding:7px 3px;border-radius:4px}
[data-design=monday] .design-row .row-subject{font-size:11px;line-height:1.7;margin-top:7px}
[data-design=monday] .design-row .row-preview{display:none}
[data-design=monday] .design-row .row-related{font-size:9px;margin-top:5px}
[data-design=monday] .design-row .unread-dot{margin:0 0 0 auto}
[data-design=monday] .design-row.selected{background:#f3f1ff;box-shadow:none}
[data-design=monday] .design-row .contact-avatar{width:25px;height:25px;border-radius:50%}
[data-design=monday] .row-person strong{font-size:11px}
[data-design=monday] .row-person small{font-size:9px}
[data-design=monday] .mail-reader{grid-column:3;grid-row:1;border-right:0;border-left:1px solid var(--line);box-shadow:-5px 0 16px #20224105;padding:18px 24px}
[data-design=monday] .business-panel{display:none;grid-column:3;grid-row:1;border-left:1px solid var(--line)}
[data-design=monday] .monday-business .business-panel{display:grid}
[data-design=monday] .monday-business .mail-reader{display:none}
[data-design=monday] .business-body{padding:20px;background:var(--surface-2)}
[data-design=monday] .business-header{padding:16px 20px}
[data-design=monday] .biz-tabs{padding-inline:18px}
[data-design=monday] .biz-tabs button{font-size:12px;padding:10px 12px}
[data-design=monday] .task-card{padding:14px;border-left:3px solid #e6ba60;gap:12px}
[data-design=monday] .task-ok{border-left-color:#65b594}
[data-design=monday] .task-card-top{justify-content:space-between}
[data-design=monday] .task-card-top b{font-size:12px}
[data-design=monday] .task-card p{font-size:11px}
[data-design=monday] .task-symbol{border-radius:50%;background:var(--surface-2);color:var(--muted)}
[data-design=monday] .customer-identity{padding-bottom:18px}
[data-design=monday] .mail-shell.hide-list{grid-template-columns:176px minmax(0,1fr)}
[data-design=monday] .mail-shell.hide-list .mail-list{display:none}
[data-design=monday] .mail-shell.hide-list .mail-reader,[data-design=monday] .mail-shell.hide-list .business-panel{grid-column:2}
[data-design=monday] .board-cards .design-row{grid-template-columns:1fr auto;padding:16px}
[data-design=monday] .board-cards .design-row .row-content{grid-column:1/-1}
[data-design=monday] .board-cards .design-row .row-state{justify-self:start;padding:4px 9px}
[data-design=monday] .board-cards .design-row .row-preview{display:block}
[data-design=monday] .board-cards .design-row>time{position:absolute;top:16px;right:16px;max-width:85px}
[data-design=monday] .board-cards .design-row .unread-dot{margin-right:85px}
/* Hybrid direction: calm reading space with an actionable business sidebar. */
:root[data-design=hybrid]{--bg:#f5f7fa;--surface-2:#f6f8fb;--line:#e3e8ef;--text:#243344;--muted:#647387;--accent:#24766f;--accent-soft:#eaf5f1;--accent-text:#236e64;--ai:#5e6ba5;--ai-soft:#f0f2fb}
[data-design=hybrid] .top{background:#203943;border:0;color:#fff}
[data-design=hybrid] .brand:before{background:#b6d8c7;color:#203943;border-radius:9px}
[data-design=hybrid] .brand small{color:#aac1c8}
[data-design=hybrid] .nav a{color:#b5c9ce}[data-design=hybrid] .nav a.on{background:#37545d;color:#fff}
[data-design=hybrid] .who select{background:#37545d;color:#e8f2f3}[data-design=hybrid] .who .btn{background:transparent;color:#b5c9ce}
[data-design=hybrid] .workspace-bar{background:var(--bg);border-bottom:0}
[data-design=hybrid] .workspace-heading{padding:22px 26px 18px}
[data-design=hybrid] .workspace-heading h1{font-size:23px;letter-spacing:.1px}
[data-design=hybrid] .workspace-metric{padding:0 22px;min-width:125px}
.focus-trail{display:flex;align-items:center;gap:10px;margin:0 18px 14px;padding:10px 14px;border:1px solid var(--line);border-radius:7px;background:var(--surface);font-size:10px;color:var(--faint);min-width:0;overflow-x:auto;white-space:nowrap}
.focus-dot{width:6px;height:6px;background:var(--accent);border-radius:50%;flex:none}
.focus-trail b{font-size:11px;color:var(--text);font-weight:550}
.focus-link{font-size:10px;font-family:var(--mono);padding:3px 7px;background:var(--surface-2);border-radius:4px;color:var(--accent-text);white-space:nowrap}
.focus-trail-end{margin-left:auto;font-size:9px}
[data-design=hybrid] .mail-shell{grid-template-columns:145px 265px minmax(0,1fr) 350px;border:0;border-radius:0;background:none;gap:12px;margin:0 18px 16px;overflow:visible}
[data-design=hybrid] .mail-shell.hide-list{grid-template-columns:145px minmax(0,1fr) 350px}
[data-design=hybrid] .mail-shell.hide-business{grid-template-columns:145px 265px minmax(0,1fr)}
[data-design=hybrid] .mail-shell.hide-list.hide-business{grid-template-columns:145px minmax(0,1fr)}
[data-design=hybrid] .mail-nav{border:0;padding:8px 0;background:none}
[data-design=hybrid] .new-mail{border-radius:7px;margin-inline:0}
[data-design=hybrid] .mail-list,[data-design=hybrid] .mail-reader,[data-design=hybrid] .business-panel{border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden;box-shadow:0 2px 4px #263b4b03}
[data-design=hybrid] .mail-reader{overflow:auto;padding:16px 19px}
[data-design=hybrid] .business-body{background:var(--surface-2);padding:12px}
[data-design=hybrid] .design-group{background:var(--surface);padding:11px 12px;color:var(--faint);font-size:10px;border-bottom:1px solid var(--line)}
[data-design=hybrid] .design-row{padding:14px 12px}
[data-design=hybrid] .design-row.selected{background:#f0f8f4;box-shadow:inset 3px 0 #4e9886}
[data-design=hybrid] .design-row .row-subject{font-size:11.5px}
[data-design=hybrid] .design-row .row-preview{font-size:10px}
[data-design=hybrid] .reader-title{font-size:19px}
[data-design=hybrid] .thread-mail{border:0;border-top:1px solid var(--line);border-radius:0;padding:17px 0 8px}
[data-design=hybrid] .mail-body{font-size:13px;line-height:1.9}
[data-design=hybrid] .task-card{border-radius:7px}
[data-design=hybrid] .quote-version>div{padding:10px 8px}
[data-design=hybrid] .quote-version>div.new{border-color:#a3cbbc;background:#f0f8f4}
[data-design=hybrid] .info-card{border-radius:8px}
:root:not([data-design=original]) .business-drawer{width:min(1000px,calc(100vw - 40px));border-radius:10px}
:root:not([data-design=original]) .drawer-body{padding:20px;background:var(--surface-2)}
:root:not([data-design=original]) .drawer-head{padding:15px 18px}
:root:not([data-design=original]) .drawer-body .info-card{padding:16px}
:root:not([data-design=original]) .new-compose{border-radius:12px 12px 0 0;padding:0 18px 18px}
:root:not([data-design=original]) .new-compose .compose-title{margin:0 -18px 12px;padding:12px 18px}
/* Dark palettes keep status labels readable in each design. */
:root[data-theme=dark]:not([data-design=original]){--bg:#141b24;--surface:#1d2632;--surface-2:#242f3e;--line:#354357;--text:#e0e7f1;--muted:#a7b4c7;--faint:#8e9db2;--accent:#81b2ef;--accent-soft:#273e5a;--accent-text:#b7d4f8;--ai:#b7b6e9;--ai-soft:#30324c}
:root[data-theme=dark][data-design=hybrid]{--accent:#79b8a8;--accent-soft:#23443f;--accent-text:#b1d9ce}
:root[data-theme=dark][data-design=monday]{--accent:#aaa4f5;--accent-soft:#383458;--accent-text:#c8c4ff}
[data-theme=dark]:not([data-design=original]) .mail-nav,[data-theme=dark]:not([data-design=original]) .design-group,[data-theme=dark]:not([data-design=original]) .workspace-metric{background:var(--surface-2)}
[data-theme=dark]:not([data-design=original]) .design-row.selected,[data-theme=dark]:not([data-design=original]) .quote-version>div.new{background:var(--accent-soft)}
[data-theme=dark]:not([data-design=original]) .status-do{background:#283f5f;color:#a9cbf5}
[data-theme=dark]:not([data-design=original]) .status-triage{background:#4c3d27;color:#f0ca87}
[data-theme=dark]:not([data-design=original]) .status-wait{background:#403352;color:#cfb3e9}
[data-theme=dark]:not([data-design=original]) .status-others,[data-theme=dark]:not([data-design=original]) .status-pool{background:#354152;color:#c2cddd}
[data-theme=dark]:not([data-design=original]) .contact-avatar{background:#30425c;color:#c2d9f7}
[data-theme=dark]:not([data-design=original]) .nav a.on{background:var(--accent-soft);color:var(--accent-text)}
[data-theme=dark][data-design=monday] .design-group{color:var(--accent-text)}
[data-theme=dark][data-design=monday] .group-triage .design-group{color:#f0ca87}
@media(max-width:1390px){
  :root:not([data-design=original]) .top{padding:11px 18px;gap:13px}
  :root:not([data-design=original]) .nav a{padding:6px 7px;font-size:11px}
  [data-design=salesforce] .mail-shell{grid-template-columns:140px 230px minmax(0,1fr) 330px}
  [data-design=salesforce] .mail-shell.hide-list{grid-template-columns:140px minmax(0,1fr) 330px}
  [data-design=salesforce] .mail-shell.hide-business{grid-template-columns:140px 230px minmax(0,1fr)}
  [data-design=salesforce] .mail-shell.hide-list.hide-business{grid-template-columns:140px minmax(0,1fr)}
  [data-design=hybrid] .mail-shell{grid-template-columns:128px 230px minmax(0,1fr) 320px;gap:9px;margin-inline:12px}
  [data-design=hybrid] .mail-shell.hide-list{grid-template-columns:128px minmax(0,1fr) 320px}
  [data-design=hybrid] .mail-shell.hide-business{grid-template-columns:128px 230px minmax(0,1fr)}
  [data-design=hybrid] .mail-shell.hide-list.hide-business{grid-template-columns:128px minmax(0,1fr)}
  [data-design=monday] .mail-shell{grid-template-columns:155px minmax(0,1fr) 42%}
  [data-design=monday] .mail-rows{padding-inline:14px}
  [data-design=monday] .list-head{padding-inline:15px}
  [data-design=monday] .design-row,[data-design=monday] .board-columns{grid-template-columns:minmax(0,1fr) 68px 44px 44px;gap:5px}
  [data-design=monday] .mail-reader{padding-inline:19px}
  [data-design=monday] .design-row .row-person small{display:none}
  .record-hint{display:none}
}
@media(max-width:1140px){
  :root:not([data-design=original]) .top{gap:12px;min-height:60px}
  :root:not([data-design=original]) .nav a{padding:6px;font-size:10px}
  :root:not([data-design=original]) .nav a:nth-last-child(-n+2){display:none}
  :root:not([data-design=original]) .workspace-heading{padding:16px 20px}
  .workspace-heading h1,[data-design=monday] .workspace-heading h1,[data-design=hybrid] .workspace-heading h1{font-size:20px}
  .workspace-metric{min-width:95px;padding:0 12px;gap:10px}
  .workspace-metric b{font-size:20px}
  [data-design=monday] .workspace-metric{min-width:100px;padding:8px 10px}
  [data-design=hybrid] .workspace-metric{min-width:100px;padding:0 12px}
  [data-design=salesforce] .mail-shell,[data-design=salesforce] .mail-shell.hide-business{grid-template-columns:132px 230px minmax(0,1fr)}
  [data-design=hybrid] .mail-shell,[data-design=hybrid] .mail-shell.hide-business{grid-template-columns:128px 230px minmax(0,1fr)}
  [data-design=salesforce] .mail-shell.hide-list,[data-design=hybrid] .mail-shell.hide-list{grid-template-columns:128px minmax(0,1fr)}
  [data-design=salesforce] .mail-list,[data-design=hybrid] .mail-list{display:grid}
  [data-design=salesforce] .hide-list .mail-list,[data-design=hybrid] .hide-list .mail-list{display:none}
  [data-design=salesforce] .business-panel,[data-design=hybrid] .business-panel{display:none}
  [data-design=salesforce] .business-peek .business-panel,[data-design=hybrid] .business-peek .business-panel{display:grid;position:absolute;right:0;top:0;bottom:0;width:min(410px,90%);z-index:10;box-shadow:var(--dshadow)}
  [data-design=monday] .mail-shell{grid-template-columns:138px minmax(0,1fr) 49%}
  [data-design=monday] .design-row,[data-design=monday] .board-columns{grid-template-columns:minmax(0,1fr) 65px}
  [data-design=monday] .design-row>.row-mailbox,[data-design=monday] .design-row>time,[data-design=monday] .board-columns>span:nth-child(n+3){display:none}
  .focus-trail-end{display:none}
}
@media(max-width:760px){
  .design-bar{gap:5px;padding:5px 8px!important;flex-wrap:wrap}.design-bar>strong,.design-note{display:none}.design-choices{width:100%;justify-content:center}.design-choices button{font-size:10px;padding:5px 8px}
  :root:not([data-design=original]) .top{padding:10px 12px;min-height:58px}.top .nav{display:none}
  :root:not([data-design=original]) .brand{font-size:13px}.who{gap:2px}
  .workspace-heading{padding:13px 14px!important;gap:8px}.workspace-heading h1,[data-design=monday] .workspace-heading h1,[data-design=hybrid] .workspace-heading h1{font-size:17px}
  .workspace-heading p,.workspace-metrics,.eyebrow{display:none}.record-tabs{padding-inline:8px}.record-tab{font-size:10px;padding:9px}
  .focus-trail{margin:0 10px 10px;padding:8px;gap:6px}.focus-trail>span:nth-child(2){display:none}
  .board-view-bar{padding-inline:8px;gap:0}.board-view{font-size:10px;padding:10px}.board-view-note{display:none}
  [data-design=salesforce] .mail-shell,[data-design=salesforce] .mail-shell.hide-business,[data-design=hybrid] .mail-shell,[data-design=hybrid] .mail-shell.hide-business,[data-design=monday] .mail-shell{grid-template-columns:120px minmax(0,1fr);margin:0;gap:0}
  :root:not([data-design=original]) .mail-nav{grid-column:1;grid-row:1}
  :root:not([data-design=original]) .mail-list{grid-column:2;grid-row:1;display:grid}
  :root:not([data-design=original]) .mail-reader,:root:not([data-design=original]) .business-panel{display:none;grid-column:2;grid-row:1}
  :root:not([data-design=original]) .mail-shell.mobile-reader .mail-list{display:none}
  :root:not([data-design=original]) .mail-shell.mobile-reader .mail-reader{display:block}
  :root[data-design=monday] .mail-shell.monday-business .mail-reader{display:none}
  :root[data-design=monday] .mail-shell.monday-business .mail-list{display:none}
  :root[data-design=monday] .mail-shell.monday-business .business-panel{display:grid}
  :root[data-design=salesforce] .business-peek .business-panel,:root[data-design=hybrid] .business-peek .business-panel{display:grid}
  :root:not([data-design=original]) .reader-title{font-size:16px}
  :root:not([data-design=original]) .mail-reader{padding:12px}
  :root:not([data-design=original]) .business-drawer{width:calc(100vw - 16px);right:8px}
  .drawer-body .two-columns{grid-template-columns:1fr}.drawer-head{flex-wrap:wrap}
  .drawer-head>.note{display:none}.draft-compare{grid-template-columns:1fr}
}