:root{--green:#227650;--deep:#17291f;--ink:#17291f;--muted:#6a786f;--line:#e5eae5;--bg:#f6f8f5;--soft:#edf4ed;--danger:#a8443b}*{box-sizing:border-box}html{font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:14px;color:var(--ink)}body{margin:0;background:var(--bg)}button,input,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #94cead;outline-offset:3px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.skip{position:absolute;top:-100px;left:12px;background:#fff;padding:12px;z-index:100}.skip:focus{top:10px}.icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}.app{display:grid;grid-template-columns:238px minmax(0,1fr);min-height:100dvh}.sidebar{position:sticky;top:0;height:100dvh;padding:32px 20px 22px;background:white;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:21px;z-index:12}.identity{display:flex;align-items:baseline;gap:10px;padding:0 12px;margin-bottom:10px}.brand{font-size:33px;letter-spacing:-2px;font-weight:800}.brand span{color:var(--green)}.brand-note{color:var(--muted);font-size:11px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid #d8e1d9;background:#fff;color:var(--ink);padding:11px 16px;border-radius:8px;font-size:13px;font-weight:600;min-height:42px;white-space:nowrap}.btn:hover{background:#f0f5f0}.btn.primary{background:var(--green);border-color:var(--green);color:white}.btn.primary:hover{background:#185d3d}.btn.danger{color:var(--danger);border-color:#ead6d1}.compose{justify-content:flex-start}.sidebar-label,.eyebrow{font-size:10px;letter-spacing:1.6px;font-weight:750;color:#859487;margin:0 0 5px}.sidebar-label{margin:7px 12px -6px}.folder-nav{display:flex;flex-direction:column;gap:4px}.folder-nav a,.sidebar-link{width:100%;display:flex;align-items:center;gap:13px;padding:12px;border:0;background:none;color:#627467;border-radius:8px;text-align:left;font-size:13px}.folder-nav a:hover,.sidebar-link:hover{background:#f4f7f3}.folder-nav a.active{background:#eaf3eb;color:#185d3d;font-weight:650}.folder-count{margin-left:auto;background:#dfece0;border-radius:5px;padding:2px 6px;font-size:11px}.sidebar-bottom{margin-top:auto}.sidebar-link{font-size:12px}.sidebar-profile{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding:22px 10px 0;margin-top:18px}.profile-mark{width:35px;height:35px;border-radius:9px;background:#e9f1e8;color:var(--green);display:grid;place-items:center;font-weight:700}.sidebar-profile strong,.sidebar-profile small{display:block}.sidebar-profile strong{font-size:12px}.sidebar-profile small{font-size:11px;color:var(--muted);margin-top:4px}.workspace{min-width:0;padding:43px clamp(25px,4.4vw,76px) 70px}.page-header{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:42px}.heading-group,.header-actions{display:flex;align-items:center;gap:17px}.heading-group h1{font-size:32px;letter-spacing:-1.2px;font-weight:700;margin:7px 0 0}.search-field{display:flex;align-items:center;gap:10px;padding:0 13px;background:#fff;border:1px solid var(--line);border-radius:8px;color:#8a9a8c;min-width:250px}.search-field input{border:0;outline:0;background:transparent;padding:13px 0;width:100%;color:var(--ink);font-size:12px}.search-field:focus-within{outline:2px solid #b7d9c1}.account-button{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:6px 11px 6px 6px;color:var(--muted);font-size:12px}.account-button .icon:last-child{width:15px}.account-circle{display:grid;place-items:center;background:#eaf2e9;color:var(--green);width:29px;height:29px;border-radius:6px}.account-circle .icon{width:16px}.panel{border:1px solid var(--line);border-radius:13px;background:white}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:21px 25px;border-bottom:1px solid var(--line)}.panel-head h2{font-size:15px;margin:0;font-weight:650}.panel-head p{color:var(--muted);font-size:12px;margin:5px 0 0}.count-pill{font-size:11px;color:#6b7c70;background:#f1f5f0;border-radius:6px;padding:6px 9px}.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:83px 26px 91px}.empty-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:#e9f3ea;color:var(--green);margin-bottom:24px}.empty-icon .icon{width:26px;height:26px}.empty-state h3{font-size:21px;letter-spacing:-.55px;margin:0 0 10px;font-weight:650}.empty-state p{max-width:400px;color:var(--muted);font-size:13px;line-height:1.7;margin:0 0 23px}.empty-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.status-strip{display:flex;align-items:center;gap:16px;background:#eaf2e9;border:1px solid #dce8db;padding:20px 23px;border-radius:11px;margin-bottom:26px}.status-strip>.icon{color:var(--green);width:23px;height:23px}.status-strip strong{font-size:13px}.status-strip p{font-size:12px;line-height:1.6;color:#607467;margin:5px 0 0}.status-strip .btn{margin-left:auto}.draft-list{list-style:none;margin:0;padding:0}.draft-row{display:flex;align-items:center;gap:13px;padding:18px 23px;border-bottom:1px solid #eef1ed}.draft-row:last-child{border-bottom:0}.draft-symbol{width:37px;height:37px;border-radius:9px;display:grid;place-items:center;background:#edf4ed;color:var(--green)}.draft-summary{display:block;flex:1;min-width:0;border:0;background:none;text-align:left;padding:0}.draft-summary strong,.draft-summary small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.draft-summary strong{font-size:13px;font-weight:650}.draft-summary small{font-size:12px;color:var(--muted);margin-top:7px}.draft-summary:hover strong{color:var(--green)}.draft-date{font-size:11px;color:#88958b;white-space:nowrap}.icon-button{display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:white;color:#627a6a;width:36px;height:36px;flex:none}.icon-button:hover{background:var(--soft)}.menu-toggle{display:none}dialog{padding:0;border:1px solid var(--line);border-radius:14px;box-shadow:0 22px 80px #17291f35;color:var(--ink);max-height:calc(100dvh - 35px);max-width:calc(100vw - 25px);width:680px}dialog::backdrop{background:#10221977;backdrop-filter:blur(2px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:23px 27px;border-bottom:1px solid var(--line)}.dialog-head h2{font-size:21px;letter-spacing:-.5px;margin:7px 0 0}.composer-fields{padding:15px 27px 18px}.composer-row{display:grid;grid-template-columns:75px minmax(0,1fr);align-items:center;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px}.composer-row input{width:100%;border:0;padding:15px 0;outline:0;color:var(--ink)}.composer-row input:focus-visible{outline:0}.message-label{display:block;margin:20px 0 12px;font-size:12px;color:var(--muted)}.composer-fields textarea{display:block;width:100%;min-height:270px;resize:vertical;border:1px solid var(--line);padding:14px;border-radius:8px;line-height:1.7;outline-offset:2px}.form-error{color:var(--danger);font-size:12px}.composer-footer,.dialog-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 27px;background:#fcfdfb;border-top:1px solid var(--line)}.composer-footer-left,.composer-footer-right{display:flex;align-items:center;gap:9px}.saved-note{font-size:11px;color:var(--muted)}.accounts-dialog{max-width:540px}.accounts-body{padding:24px 27px}.muted{color:var(--muted)}.intro-copy{font-size:13px;line-height:1.65;margin:0 0 24px}.provider-list{display:grid;gap:9px}.provider{width:100%;display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px;text-align:left;color:var(--ink)}.provider.active{border-color:#8bb69a;background:#f5faf5}.provider-icon{display:grid;place-items:center;width:40px;height:40px;background:#edf4ed;border-radius:9px;color:var(--green)}.provider>span:nth-child(2){flex:1}.provider strong,.provider small{display:block}.provider strong{font-size:13px}.provider small{font-size:11px;color:var(--muted);margin-top:5px}.provider>.icon:last-child{width:16px;color:var(--green);opacity:0}.provider.active>.icon:last-child{opacity:1}.connection-note{display:flex;gap:13px;background:#f5f8f4;border:1px solid var(--line);border-radius:10px;padding:17px;margin:20px 0}.connection-note>.icon{color:var(--green)}.connection-note strong{font-size:12px}.connection-note p,.setup-status p{font-size:12px;line-height:1.65;color:var(--muted);margin:6px 0 0}.setup-status{display:flex;align-items:flex-start;gap:9px}.setup-status>.icon{color:#89978d;width:17px}.setup-status p{margin:0}.dialog-actions{justify-content:flex-end}.toast{position:fixed;bottom:20px;right:20px;border-radius:9px;padding:13px 18px;color:white;background:#213b2b;box-shadow:0 8px 32px #0002;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:50}.toast.visible{opacity:1}@media(max-width:900px){.workspace{padding:30px 25px}.page-header{align-items:flex-start}.header-actions{gap:8px}.search-field{min-width:170px}}@media(max-width:720px){.app{display:block}.sidebar{position:fixed;left:0;top:0;width:258px;transform:translateX(-100%);transition:transform .22s;box-shadow:0 10px 45px #0001}.sidebar.open{transform:translateX(0)}.sidebar-backdrop:not([hidden]){display:block;position:fixed;inset:0;background:#11231955;z-index:11;border:0;width:100%;height:100%}.workspace{padding:24px 18px 45px}.menu-toggle{display:grid}.page-header{margin-bottom:26px;gap:12px}.heading-group{gap:10px}.heading-group h1{font-size:26px}.search-field{width:40px;min-width:40px;padding:0 10px}.search-field:focus-within{width:175px}.search-field input{width:100%;min-width:0}.search-field:not(:focus-within) input::placeholder{color:transparent}.account-button>span:not(.account-circle){display:none}.status-strip{flex-wrap:wrap;padding:17px}.status-strip .btn{margin-left:0}.empty-state{padding:65px 20px}.composer-footer{flex-wrap:wrap}.composer-footer-left,.composer-footer-right{width:100%;justify-content:space-between}}@media(max-width:420px){.header-actions{gap:5px}.page-header{gap:6px}.heading-group h1{font-size:23px}.search-field:focus-within{position:absolute;right:70px;left:62px;width:auto;background:white;z-index:2}.draft-date{display:none}.draft-row{padding:16px 14px}.composer-fields,.dialog-head,.composer-footer,.dialog-actions,.accounts-body{padding-left:17px;padding-right:17px}.saved-note{font-size:10px}.composer-footer-right .btn{padding:10px;font-size:11px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}

/* Mailbox preview and optional reading pane. Sample content is never mixed into real folders. */
.sidebar{overflow-y:auto}
.sample-accounts{border-top:1px solid var(--line);padding-top:18px;margin-top:2px}
.sample-accounts .sidebar-label{margin:0 12px 9px}
.sample-account{width:100%;display:flex;align-items:center;gap:10px;padding:10px;border:0;border-radius:8px;background:none;color:#607365;text-align:left}
.sample-account:hover{background:#f4f7f3}
.sample-account.active{background:#eaf3eb;color:#185d3d}
.sample-account>.icon{width:17px;height:17px}
.sample-account>span{min-width:0;flex:1}
.sample-account strong,.sample-account small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sample-account strong{font-size:11px;font-weight:650}
.sample-account small{font-size:10px;color:var(--muted);margin-top:4px}
.search-field input:disabled{cursor:not-allowed;color:#9aa79c}
.recipient-line{display:flex;align-items:center;border-bottom:1px solid var(--line)}
.recipient-line .composer-row{flex:1;min-width:0;border-bottom:0}
.recipient-options{display:flex;gap:4px;align-items:center}
.recipient-options button{background:none;border:0;color:var(--green);padding:8px 5px;font-size:11px}
.recipient-options button:hover{text-decoration:underline;text-underline-offset:3px}
.recipient-options button[aria-expanded="true"]{font-weight:700}
.sample-banner{display:flex;align-items:center;gap:12px;padding:12px 15px;background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:15px}
.sample-banner>.icon{color:var(--green);width:18px;height:18px}
.sample-banner>div{flex:1}
.sample-banner strong{font-size:12px}
.sample-banner p{font-size:11px;line-height:1.5;color:var(--muted);margin:3px 0 0}
.btn.small{padding:7px 11px;font-size:11px;min-height:34px}
.panel-utilities{display:flex;align-items:center;gap:8px}
.panel-utilities .btn .icon{width:15px;height:15px}
.sample-panel .panel-head{padding:17px 20px}
.sample-panel .panel-head p{margin:4px 0 0}
.mail-layout{display:grid;grid-template-columns:minmax(285px,.44fr) minmax(0,.56fr);min-height:515px;height:min(690px,calc(100dvh - 260px))}
.message-list-pane{min-width:0;border-right:1px solid var(--line);overflow-y:auto}
.sample-message{display:flex;align-items:center;border-bottom:1px solid #eef1ed;min-width:0;position:relative;background:#fff}
.sample-message:hover{background:#f7faf7}
.sample-message.selected{background:#eef6ee}
.sample-message.unread{background:#fbfdfb}
.sample-message.unread.selected{background:#eaf4ec}
.message-pick{display:flex;gap:12px;min-width:0;flex:1;align-items:flex-start;padding:16px 4px 16px 15px;text-align:left;background:none;border:0;color:var(--ink)}
.message-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#e8f0e6;color:#3f7050;font-size:11px;font-weight:700;flex:none}
.message-info{flex:1;min-width:0;display:block}
.message-top{display:flex;gap:7px;justify-content:space-between;align-items:baseline}
.message-top strong,.message-top time,.message-subject,.message-snippet{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.message-top strong{font-size:12px;font-weight:650}
.message-top time{color:#839184;font-size:10px;white-space:nowrap}
.message-subject{font-size:12px;margin-top:6px;font-weight:550}
.sample-message.unread .message-subject,.sample-message.unread .message-top strong{font-weight:750}
.message-snippet{color:var(--muted);font-size:11px;margin-top:6px;line-height:1.6}
.message-star{border:0;background:none;padding:8px 11px 8px 4px;color:#a4b3a5;flex:none}
.message-star:hover,.message-star[aria-pressed="true"]{color:var(--green)}
.message-star[aria-pressed="true"] .icon{fill:#e1f1e5}
.message-star .icon{width:15px;height:15px}
.reading-pane{min-width:0;overflow-y:auto}
.reader-top{display:flex;justify-content:flex-end;align-items:center;gap:12px;border-bottom:1px solid #edf1ec;padding:10px 18px;min-height:56px}
.reader-toolbar{display:flex;align-items:center;gap:7px}
.reader-top .icon-button{width:34px;height:34px}
.reader-top .icon-button .icon{width:17px;height:17px}
.reader-toolbar button[aria-pressed="true"]{color:var(--green);background:var(--soft)}
.reader-back{display:none}
.reader-content{padding:28px clamp(20px,2.5vw,42px) 40px}
.reader-status{font-size:10px;color:#7f9284;letter-spacing:.03em;margin-bottom:14px}
.reader-content h2{font-size:23px;line-height:1.3;letter-spacing:-.7px;font-weight:650;margin:0 0 23px;overflow-wrap:anywhere}
.reader-person{display:flex;gap:11px;align-items:center;padding-bottom:23px;border-bottom:1px solid #edf1ec}
.reader-person strong{font-size:12px}
.reader-person p{margin:5px 0 0;font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.reader-person p span{color:#89958b}
.reader-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.85;color:#34483b;padding:28px 0 45px}
.reader-actions{display:flex;gap:9px;flex-wrap:wrap}
.reader-actions .btn{font-size:12px}
.reader-actions .icon{width:16px;height:16px}
.reader-placeholder{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;min-height:480px;padding:30px}
.reader-placeholder h3{font-size:15px;margin:0 0 6px}
.reader-placeholder p{font-size:12px;color:var(--muted)}
.sample-list-empty{text-align:center;padding:54px 17px;color:var(--muted);font-size:12px}
.mail-layout.no-pane{grid-template-columns:1fr}
.mail-layout.no-pane .message-list-pane{grid-column:1/-1;border-right:0}
.mail-layout.no-pane .reading-pane{display:none}
.mail-layout.no-pane.reader-focused .message-list-pane{display:none}
.mail-layout.no-pane.reader-focused .reading-pane{display:block;grid-column:1/-1}
.mail-layout.no-pane.reader-focused .reader-back{display:grid}
@media(max-width:1250px){.mail-layout{grid-template-columns:minmax(250px,.44fr) minmax(0,.56fr)}.message-pick{padding-left:12px;gap:9px}.message-avatar{width:32px;height:32px}.message-top time{font-size:9px}}
@media(max-width:1050px){.panel-utilities .count-pill{display:none}.mail-layout{grid-template-columns:minmax(225px,.44fr) minmax(0,.56fr)}.reader-content{padding:24px 20px}.reader-content h2{font-size:20px}.message-avatar{display:none}}
@media(max-width:850px){
  .mail-layout{display:block;min-height:440px;height:auto}
  .mail-layout .message-list-pane{height:auto;max-height:none;border-right:0}
  .mail-layout .reading-pane{display:none}
  .mail-layout.reader-focused .message-list-pane{display:none}
  .mail-layout.reader-focused .reading-pane{display:block}
  .mail-layout.reader-focused .reader-back{display:grid}
  .mail-layout .reader-person .message-avatar{display:grid}
  .message-avatar{display:grid}
  .sample-panel .panel-head{flex-wrap:wrap}
}
@media(max-width:520px){
  .sample-banner{align-items:flex-start;flex-wrap:wrap}
  .sample-banner .btn{margin-left:28px}
  .panel-utilities{width:100%;justify-content:flex-start}
  .sample-panel .panel-head{padding:16px}
  .mail-layout .reader-content{padding:23px 18px}
  .reader-content h2{font-size:20px}
  .reader-body{font-size:13px}
  .recipient-line .composer-row{grid-template-columns:48px minmax(0,1fr)}
  .composer-row{grid-template-columns:48px minmax(0,1fr)}
}


/* Secure read-only mailbox pilot. Retains the existing ZolaHub look. */
.mailbox-connection{border-top:1px solid var(--line);margin-top:20px;padding-top:18px}
.mailbox-connection h3{font-size:14px;margin:0 0 6px}
.mailbox-connection>p{font-size:12px;color:var(--muted);line-height:1.6;margin:0 0 18px}
#imap-form{display:grid;gap:13px}
#imap-form label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:650;color:var(--ink)}
#imap-form input{padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;width:100%;font-size:13px}
.connection-warning{font-size:11px;color:#875c29;background:#fff9ed;border:1px solid #f1e3c8;border-radius:8px;padding:11px 13px;line-height:1.55;margin:3px 0}
.saved-mailboxes{margin-top:20px}
.saved-mailboxes h4{font-size:12px;margin:0 0 8px}
.saved-mailboxes>p{font-size:12px}
.saved-mailbox{border-top:1px solid var(--line);padding:12px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.saved-mailbox strong,.saved-mailbox small{display:block;overflow-wrap:anywhere}
.saved-mailbox strong{font-size:12px}
.saved-mailbox small{font-size:11px;color:var(--muted);margin-top:5px}
.saved-mailbox .btn{flex:none}
.connected-mail-icon{display:flex}
.real-inbox .panel-head{gap:12px}
.real-inbox .panel-head h2{overflow-wrap:anywhere}
.real-mail-layout{display:grid;grid-template-columns:minmax(235px,.46fr) minmax(0,.54fr);min-height:450px}
.real-message-list{border-right:1px solid var(--line);min-width:0}
.real-message-row{width:100%;display:flex;flex-direction:column;align-items:flex-start;text-align:left;background:#fff;border:0;border-bottom:1px solid var(--line);gap:6px;padding:18px 20px}
.real-message-row:hover,.real-message-row.selected{background:#f0f6f0}
.real-message-row>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.real-message-from{font-size:12px;color:var(--ink);font-weight:650}
.real-message-subject{font-size:12px;color:#385343}
.real-message-row small{font-size:10px;color:var(--muted)}
.real-reading{padding:24px;min-width:0}
.real-reading h2{font-size:19px;font-weight:650;letter-spacing:-.02em;line-height:1.3;overflow-wrap:anywhere}
.real-reading dl{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;font-size:12px;margin:24px 0}
.real-reading dt{font-weight:700}
.real-reading dd{margin:0;overflow-wrap:anywhere;color:var(--muted)}
.real-reading p{font-size:12px;line-height:1.7}
.real-loading,.real-error{padding:20px;color:var(--muted);font-size:12px}
.real-error{color:var(--danger);background:#fff8f5}
@media(max-width:880px){.real-mail-layout{display:block}.real-message-list{border-right:0}.real-reading{border-top:1px solid var(--line)}}