:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:#263833;background:#fafbf8;font-size:14px}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer;border:0;background:transparent;color:inherit;border-radius:8px;padding:10px 13px}button:hover{background:#e7eee7}button:focus-visible,a:focus-visible{outline:2px solid #39795d;outline-offset:3px}input,textarea{outline-color:#39795d}button:disabled{opacity:.5;cursor:wait}.app{display:flex;min-height:100vh}aside{width:240px;flex-shrink:0;padding:35px 22px 20px;background:#eff3ed;border-right:1px solid #dde5db;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{display:flex;gap:9px;text-decoration:none;color:#244c38;font-size:30px;font-weight:750;letter-spacing:-1.5px;padding:0 10px}.dot,h1 span,h2 span{color:#8b9e64}.primary{background:#315f47;color:#fff;border:1px solid #315f47}.primary:hover{background:#244c38}.compose{margin:35px 0 23px;display:flex;gap:15px;align-items:center;justify-content:center;padding:14px}nav{display:grid;gap:5px}nav button{display:flex;gap:13px;align-items:center;text-align:left;padding:12px 14px;color:#68746a}nav button.active{color:#294d37;background:#dfe8dc;font-weight:650}nav button .badge{margin-left:auto;font-size:11px;background:#315f47;color:#fff;border-radius:5px;padding:2px 6px}.sidebar-bottom{margin-top:auto}.label{font-size:9px;letter-spacing:1.7px;color:#889185;display:block;margin:32px 10px 10px}.storage{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-top:35px}.pill{font-size:8px;padding:4px;background:#e0e7d8;border-radius:4px;letter-spacing:1px}.meter{height:4px;background:#dfe5da;border-radius:9px;margin:12px 0}.meter i{display:block;height:4px;width:8%;background:#8ca379}small{font-size:10px;color:#83907f}.profile{display:flex;gap:12px;align-items:center;border-top:1px solid #dce3d7;margin-top:26px;padding-top:22px}.avatar{display:grid;place-items:center;width:36px;height:36px;background:#e3e9d7;border-radius:50%;color:#5e774c;font-size:13px;font-weight:650}.profile b{font-size:11px}.profile small{display:block;margin-top:4px}main{flex:1;min-width:0;padding:0 38px}header{height:85px;border-bottom:1px solid #e7ebe3;display:flex;align-items:center;justify-content:space-between;font-size:11px}.breadcrumb{color:#8b948b}.breadcrumb span{margin:0 14px;color:#b6bfb3}.breadcrumb b{color:#52634f;font-weight:500}.private{font-size:10px;color:#71816b}.heading{display:flex;justify-content:space-between;align-items:center;padding:39px 0 27px}.eyebrow{font-size:9px;letter-spacing:2px;color:#919d87}h1{font-family:Georgia,serif;font-size:45px;letter-spacing:-1.6px;font-weight:400;margin:10px 0}p{line-height:1.7}.heading p{color:#85907e;font-size:12px;margin:0}.search{display:flex;align-items:center;border:1px solid #e1e7dc;border-radius:8px;background:#fff;padding:10px 12px;gap:10px}.search span{font-size:22px;color:#7f8d78}.search input{border:0;background:transparent;font-size:11px;width:165px}.search kbd{color:#8d9984;border:1px solid #e5e9e0;border-radius:3px;padding:1px 5px}.demo-note{display:flex;align-items:center;gap:14px;background:#edf1e5;border:1px solid #e4ead8;border-radius:8px;padding:11px 16px;margin:0 0 25px}.demo-note>span{font-size:25px;color:#7c9163}.demo-note p{font-size:10px;color:#7b886d;flex:1;margin:0}.demo-note b{color:#526644;margin-right:6px;font-weight:600}.demo-note button{font-size:10px;white-space:nowrap;color:#5a7049}.mail-layout{display:grid;grid-template-columns:minmax(270px,38%) 1fr;border:1px solid #e1e7dc;border-radius:10px;background:#fff;min-height:490px;overflow:hidden}.mail-list{border-right:1px solid #e5e9e0}.list-toolbar{height:49px;border-bottom:1px solid #edf0e8;display:flex;align-items:center;justify-content:space-between;padding:0 15px;font-size:10px;color:#8b9584}.list-toolbar button{font-size:10px}.message{display:block;text-align:left;width:100%;border-radius:0;padding:20px 17px;border-bottom:1px solid #edf0e8;position:relative}.message.selected{background:#f0f4e9;border-left:3px solid #6d8b56;padding-left:14px}.message-top{display:flex;align-items:center;gap:8px;margin-bottom:9px}.message-top b{font-size:11px;flex:1;font-weight:500}.message.unread .message-top b{font-weight:750}.message time{font-size:9px;color:#9aa38f}.unread-dot{width:5px;height:5px;border-radius:50%;background:#6b8854}.message strong{font-size:11px;display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message.unread strong{font-weight:650}.message p{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:6px 0 0;color:#95a08c}.reader{min-width:0}.empty{text-align:center;display:grid;align-content:center;height:100%;min-height:360px;color:#8b9780;padding:30px}.empty>span{font-size:42px;color:#b6c4a5}.empty h2{font-family:Georgia,serif;font-size:28px;font-weight:400;color:#53694a;margin-bottom:0}.empty p{font-size:12px}.reader-toolbar{display:flex;align-items:center;gap:5px;justify-content:flex-end;padding:8px 13px;border-bottom:1px solid #edf0e8;min-height:49px}.reader-toolbar button{font-size:11px}.reader-content{padding:30px}.reader-content h2{font-family:Georgia,serif;font-weight:400;line-height:1.35;font-size:25px;margin:0 0 25px}.sender{display:flex;align-items:center;gap:12px}.sender b{font-size:11px}.sender small{display:block;margin-top:5px}.reader-body{white-space:pre-wrap;font-size:12px;line-height:1.9;color:#62715b;margin:28px 0;overflow-wrap:anywhere}.reply{border:1px solid #dce4d3;font-size:11px;padding:9px 18px}footer{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.2px;color:#a0aa95;padding:25px 0}footer span{letter-spacing:0}dialog{border:1px solid #dce4d3;border-radius:14px;padding:26px;width:560px;max-width:calc(100vw - 30px);box-shadow:0 30px 100px #1d372530}dialog::backdrop{background:#172c2455;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.dialog-title{display:flex;justify-content:space-between;align-items:center}.dialog-title h2{font-family:Georgia,serif;font-weight:400;font-size:28px;margin:0}.hint{font-size:11px;color:#87927c}form label{display:flex;align-items:center;gap:18px;border-bottom:1px solid #e5e9e0;padding:10px 0;font-size:11px;color:#839176}form input{flex:1;border:0;padding:8px;min-width:0}textarea{width:100%;height:220px;resize:vertical;border:0;padding:20px 0;font-size:13px;line-height:1.8}.dialog-actions{display:flex;justify-content:space-between;border-top:1px solid #e5e9e0;padding-top:17px}.dialog-actions button{font-size:12px}#compose-error{color:#a84132;font-size:12px}#setup-dialog>p,#setup-dialog li{font-size:12px}#setup-dialog li{padding:8px}#setup-dialog li p{margin:4px 0;color:#7b8972}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%);background:#294f3a;color:#fff;border-radius:8px;padding:13px 22px;display:none;font-size:12px}.no-messages{padding:35px 20px;color:#8b9780;text-align:center;font-size:12px}@media(min-width:1500px){main{padding:0 65px}.mail-layout{min-height:580px}}@media(max-width:1000px){aside{width:195px;padding:30px 14px}main{padding:0 22px}.mail-layout{grid-template-columns:42% 1fr}.reader-content{padding:22px}.private{display:none}.demo-note b{display:block}.demo-note button{padding:5px}.heading{gap:16px}.search input{width:110px}}@media(max-width:700px){aside{width:65px;padding:25px 7px}.brand{font-size:28px;padding:0 10px}.brand>span,.compose span,.sidebar-bottom,.nav-label,.badge{display:none!important}.compose{padding:11px;margin:30px 0 20px}nav button{padding:13px;justify-content:center}main{padding:0 15px}header{height:64px}.heading{display:block;padding:25px 0 20px}h1{font-size:36px}.search{margin-top:20px}.search input{width:100%}.demo-note{padding:10px;gap:8px}.demo-note button{display:none}.mail-layout{display:block;min-height:450px}.mail-list{border-right:0}.reader{border-top:1px solid #dce4d3}.reader:has(.empty){display:none}.message{padding:15px}.reader-content{padding:22px}.reader-content h2{font-size:22px}footer span{display:none}.heading p{font-size:11px}}#toast.visible{display:block}.login-screen{min-height:100vh;display:grid;place-items:center;padding:24px;background:#eff3ed}.login-card{background:#fff;border:1px solid #dce4d3;border-radius:16px;width:420px;max-width:100%;padding:35px}.login-card .brand{padding:0;font-size:26px}.login-card h1{margin-top:35px}.login-card p{font-size:12px;color:#7b8972}.login-card label{display:block;margin-top:15px}.login-card input{display:block;width:100%;border:1px solid #dce4d3;border-radius:6px;margin-top:8px;padding:12px}.login-card>.primary{width:100%;margin-top:15px}