html,body,#root{min-width:320px;min-height:100%;margin:0}body{min-height:100vh}:root{color:#15211a;background:#f5f8f3;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}button,input,textarea{font:inherit}button{cursor:pointer}body{margin:0}.shell{background:#fff;grid-template-rows:76px 1fr;grid-template-columns:256px 430px 1fr;height:100vh;display:grid;overflow:hidden}.topbar{background:#fffffff7;border-bottom:1px solid #e8ece7;grid-column:1/-1;grid-template-columns:280px minmax(260px,560px) 1fr auto;align-items:center;gap:22px;padding:0 28px;display:grid}.brand{white-space:nowrap;align-items:center;gap:8px;font-size:22px;display:flex}.brand strong{letter-spacing:-.7px}.brand em{color:#3b8c1e;font-style:normal}.brand-mark{color:#5baa38}.preview{color:#4c7f36;background:#e9f6df;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:700}.search{color:#7e8981;background:#f5f6f5;border-radius:14px;align-items:center;gap:10px;height:44px;padding:0 14px;display:flex}.search input{color:#17221b;background:0 0;border:0;outline:0;width:100%}.status{border:1px solid #dfe8da;border-radius:999px;justify-self:end;align-items:center;gap:8px;min-width:145px;padding:7px 13px;display:flex}.status .dot{background:#3a9b27;border-radius:50%;width:8px;height:8px}.status span:last-child{flex-direction:column;display:flex}.status b{color:#3b7f2b;font-size:11px}.status small{color:#374238;font-size:11px}.avatar{color:#385327;background:#e8f2df;border:0;border-radius:50%;width:38px;height:38px;font-weight:800}.sidebar{background:#fbfcfb;border-right:1px solid #e8ece7;flex-direction:column;grid-area:2/1;min-height:0;padding:18px 16px;display:flex}.compose{color:#fff;text-align:left;background:#3b941d;border:0;border-radius:14px;height:48px;padding:0 22px;font-weight:800;box-shadow:0 4px 12px #3b941d29}.compose span{margin-left:8px}nav{margin-top:16px;overflow:auto}nav button{text-align:left;color:#344039;background:0 0;border:0;border-radius:10px;grid-template-columns:28px 1fr auto;align-items:center;width:100%;height:42px;padding:0 12px;display:grid}nav button.active{color:#14210f;background:#eaf6e4;font-weight:800}nav button:hover{background:#f0f5ed}.nav-icon{font-size:18px}.count{background:#edf0ed;border-radius:999px;padding:4px 8px;font-size:11px}.active .count{background:#cfeabf}.moke-card{background:#f4faef;border:1px solid #dfead8;border-radius:14px;grid-template-columns:32px 1fr auto;align-items:center;gap:8px;margin-top:auto;padding:14px;display:grid}.moke-card div{flex-direction:column;display:flex}.moke-card small{color:#667269;margin-top:2px}.cloud{color:#368b20;font-size:24px}.mail-list{background:#fff;border-right:1px solid #e8ece7;flex-direction:column;grid-area:2/2;min-width:0;display:flex}.panel-head{border-bottom:1px solid #edf0ec;justify-content:space-between;align-items:center;height:76px;padding:18px 22px 12px;display:flex}.panel-head h1{margin:0 0 3px;font-size:21px}.panel-head span{color:#7b857e;font-size:12px}.panel-head button{background:#f4f6f3;border:0;border-radius:10px;width:34px;height:34px}.rows{min-height:0;overflow:auto}.mail-row{text-align:left;color:#273129;background:#fff;border:0;border-bottom:1px solid #eef1ed;grid-template-columns:44px 1fr 68px;gap:12px;width:100%;min-height:82px;padding:14px 16px;display:grid}.mail-row:hover{background:#f8faf7}.mail-row.selected{background:#edf8e7}.mail-row.unread .mail-copy b,.mail-row.unread .mail-copy strong{font-weight:800}.initial{color:#425047;background:#edf0f1;border-radius:50%;flex:none;place-items:center;width:40px;height:40px;font-size:12px;font-weight:800;display:grid}.mail-row.unread .initial{background:#e7f4df}.mail-copy{flex-direction:column;gap:2px;min-width:0;display:flex}.mail-copy b,.mail-copy strong,.mail-copy small{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mail-copy b{font-size:13px}.mail-copy strong{font-size:13px;font-weight:600}.mail-copy small{color:#88908b;font-size:11px}.row-meta{color:#7a857d;flex-direction:column;justify-content:space-between;align-items:flex-end;font-size:11px;display:flex}.row-meta span{color:#879087;font-size:18px}.empty{text-align:center;color:#859088;padding:40px 20px}.reader{background:#fff;grid-area:2/3;min-width:0;overflow:auto}.reader-empty{text-align:center;color:#7f8a82;place-content:center;height:100%;display:grid}.reader-empty h2{color:#344139;margin:10px 0 4px}.reader-empty p{margin:0}.reader-logo{color:#67ab46;font-size:36px}.reader-inner{max-width:960px;margin:0 auto;padding:0 34px 32px}.reader-toolbar{border-bottom:1px solid #edf0ed;align-items:center;gap:10px;height:76px;display:flex}.reader-toolbar span{flex:1}.reader-toolbar button,.reader-title button{color:#5b675f;background:0 0;border:0;font-size:19px}.reader-title{justify-content:space-between;align-items:center;padding:28px 0 20px;display:flex}.reader-title h2{letter-spacing:-.5px;margin:0;font-size:26px}.sender{grid-template-columns:48px 1fr auto;align-items:center;gap:12px;display:grid}.initial.large{width:46px;height:46px}.sender div{flex-direction:column;gap:3px;display:flex}.sender small,.sender time{color:#7e8981;font-size:12px}.sender time{align-self:start;margin-top:4px}article{white-space:pre-wrap;color:#2a352d;min-height:240px;padding:30px 0;font-size:15px;line-height:1.65}.attachments{border-top:1px solid #edf0ed;flex-wrap:wrap;gap:10px;padding:18px 0;display:flex}.attachments b{width:100%}.attachments span{background:#f5f7f4;border:1px solid #e4e9e1;border-radius:10px;padding:9px 12px;font-size:12px}.reply-actions{border-top:1px solid #edf0ed;gap:12px;padding-top:22px;display:flex}.reply-actions button{color:#314038;background:#fff;border:1px solid #dfe5dc;border-radius:12px;padding:11px 18px}.reply-actions button:hover{background:#f5f8f3}.login-page{background:radial-gradient(circle at 20% 10%,#e5f5db,#0000 34%),linear-gradient(145deg,#f7faf5,#eef4eb);place-items:center;min-height:100vh;display:grid}.login-card{background:#fff;border:1px solid #e2e8df;border-radius:22px;width:min(420px,100vw - 32px);padding:36px;box-shadow:0 24px 70px #29432021}.login-logo{color:#5cae37;font-size:40px}.login-card h1{letter-spacing:-1px;margin:4px 0 0;font-size:30px}.login-card h1 em{color:#3f9422;font-style:normal}.login-card>p{color:#778177;margin:6px 0 28px}.login-card label{flex-direction:column;gap:7px;margin:14px 0;font-size:12px;font-weight:700;display:flex}.login-card input{border:1px solid #dfe5dc;border-radius:10px;outline:none;height:44px;padding:0 12px}.login-card input:focus{border-color:#69a64f;box-shadow:0 0 0 3px #edf7e8}.login-card>button{color:#fff;background:#3b941d;border:0;border-radius:11px;width:100%;height:46px;margin-top:8px;font-weight:800}.login-card>small{text-align:center;color:#879087;margin-top:14px;display:block}.error{color:#9a2e25;background:#fff0ef;border:1px solid #f2d0cc;border-radius:9px;padding:10px 12px;font-size:12px}.modal-backdrop{z-index:20;background:#161e1838;place-items:end center;padding:28px;display:grid;position:fixed;inset:0}.composer-window{background:#fff;border-radius:18px;flex-direction:column;width:min(720px,100vw - 40px);height:min(650px,100vh - 56px);display:flex;overflow:hidden;box-shadow:0 30px 90px #1a2a1c3d}.compose-head{background:#f4f8f1;justify-content:space-between;align-items:center;height:64px;padding:0 20px;display:flex}.compose-head div{flex-direction:column;display:flex}.compose-head small{color:#758078;margin-top:2px}.compose-head button{background:0 0;border:0;font-size:26px}.composer-window label{color:#788279;border-bottom:1px solid #edf0ed;grid-template-columns:52px 1fr;align-items:center;height:48px;padding:0 20px;font-size:12px;display:grid}.composer-window label input,.subject-input{border:0;outline:0;width:100%;height:100%}.subject-input{border-bottom:1px solid #edf0ed;height:48px;padding:0 20px}.composer-window textarea{resize:none;border:0;outline:0;flex:1;padding:20px;line-height:1.6}.composer-window footer{border-top:1px solid #edf0ed;justify-content:space-between;align-items:center;height:64px;padding:0 20px;display:flex}.composer-window footer span{color:#7d877f;font-size:11px}.composer-window footer button{color:#fff;background:#3b941d;border:0;border-radius:10px;padding:11px 24px;font-weight:800}.splash{color:#33432f;place-content:center;gap:8px;height:100vh;font-size:22px;font-weight:800;display:grid}.splash .brand-mark{text-align:center;font-size:36px}@media (width<=1050px){.shell{grid-template-columns:220px 360px 1fr}.topbar{grid-template-columns:240px 1fr auto}.status{display:none}.reader-inner{padding:0 22px 28px}}@media (width<=820px){.shell{grid-template-columns:76px 340px 1fr}.sidebar{padding:14px 10px}.compose{text-align:center;padding:0}.compose span,.sidebar nav button span:nth-child(2),.sidebar .count,.moke-card div,.moke-card>span:last-child{display:none}.sidebar nav button{grid-template-columns:1fr;place-items:center;padding:0}.moke-card{grid-template-columns:1fr;place-items:center;padding:10px}.topbar{grid-template-columns:190px 1fr auto;padding:0 14px}.preview{display:none}}@media (width<=680px){.shell{height:auto;min-height:100vh;display:block}.topbar{z-index:4;grid-template-columns:1fr auto;height:68px;position:sticky;top:0}.search{display:none}.sidebar{z-index:5;background:#fff;border:0;border-top:1px solid #e5eae2;flex-direction:row;align-items:center;height:66px;padding:8px;display:flex;position:fixed;bottom:0;left:0;right:0}.compose{flex:none;width:48px;height:48px}.sidebar nav{flex:1;margin:0;display:flex;overflow:auto}.sidebar nav button{flex:none;width:52px}.moke-card{display:none}.mail-list{border:0;min-height:calc(100vh - 134px)}.reader{display:none}.panel-head{height:68px}.mail-row{grid-template-columns:42px 1fr 58px;padding:12px}.modal-backdrop{place-items:stretch stretch;padding:0}.composer-window{border-radius:0;width:100%;height:100vh}}.attachments a{color:#34512d;background:#f5f7f4;border:1px solid #e4e9e1;border-radius:10px;padding:9px 12px;font-size:12px;text-decoration:none}.compose-attachments{border-top:1px solid #edf0ed;align-items:center;gap:8px;min-height:48px;padding:8px 20px;display:flex;overflow:auto}.compose-attachments button{white-space:nowrap;background:#f5f8f3;border:1px solid #dfe5dc;border-radius:8px;padding:7px 10px}.attach-button{cursor:pointer;background:#edf7e8;border-radius:8px;font-weight:700;color:#376a26!important;border:0!important;grid-template-columns:none!important;width:auto!important;height:auto!important;padding:7px 10px!important;display:inline-flex!important}.attach-button input{display:none}.html-message{background:#fff;border:0;width:100%;min-height:360px;padding:24px 0}.compose-footer-actions{align-items:center;gap:10px;display:flex}.composer-window footer .draft-button{color:#3c6f2c;background:#fff;border:1px solid #d6e4cf}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline-offset:2px;outline:3px solid #8bcf6b}.reader-back{display:none}@media (width<=680px){.shell.has-selection .mail-list{display:none}.shell.has-selection .reader{min-height:calc(100vh - 134px);padding-bottom:70px;display:block}.shell.has-selection .reader-inner{padding:0 18px 28px}.reader-back{display:inline-block!important}.shell.has-selection .reader-toolbar{height:60px}.shell.has-selection .reader-title{padding-top:20px}}