@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#1d2333;background:#f6f7fb;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px}.app{min-height:100vh;display:grid;grid-template-columns:254px minmax(600px,1fr);max-width:1600px;margin:auto}.sidebar{height:100vh;position:sticky;top:0;background:#fff;border-right:1px solid #e9ebf1;padding:27px 18px 16px;display:flex;flex-direction:column}.brand{height:43px;display:flex;align-items:center;gap:11px;padding-left:7px;color:#202637;text-decoration:none;font:800 20px Manrope,sans-serif;letter-spacing:-.8px}.brand-mark{width:32px;height:32px;border-radius:11px;background:#6d68e8;color:#fff;display:grid;place-content:center;font-size:21px;box-shadow:0 5px 13px #706be833}.brand-mark span{color:#c4c2ff}.brand-muted{color:#9ca2b1}.primary{border:0;border-radius:9px;background:#6d68e8;color:white;font:600 13px 'DM Sans';padding:12px 17px;cursor:pointer;box-shadow:0 5px 12px #706be82b;transition:.18s}.primary:hover{background:#5954d2;transform:translateY(-1px)}.compose{width:100%;margin:31px 0 34px;text-align:left;height:45px}.compose span{font-size:18px;margin-right:9px;vertical-align:-1px}.nav-label,.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.35px;color:#9da3b1}.nav-label{padding:0 11px 12px}.nav-item{height:42px;width:100%;display:flex;align-items:center;gap:12px;border:0;background:none;padding:0 12px;text-align:left;color:#737b8c;font:500 13px 'DM Sans';border-radius:8px;cursor:pointer}.nav-item:hover{background:#f8f8fc;color:#30374a}.nav-item.active{background:#f0efff;color:#5a55d6;font-weight:600}.nav-icon{font-size:16px;width:18px;text-align:center}.count{margin-left:auto}.sidebar-bottom{margin-top:auto}.storage{padding:15px 10px 19px;border-bottom:1px solid #eef0f4}.storage-title{display:flex;justify-content:space-between;font-size:11px;color:#61697a}.storage-title span:last-child{color:#a0a6b3;font-size:10px}.bar{height:4px;background:#eeeef4;border-radius:5px;margin:11px 0 7px}.bar i{display:block;width:37%;height:4px;border-radius:5px;background:#8b87ec}.storage small{font-size:10px;color:#a0a6b3}.profile{display:flex;align-items:center;padding:17px 4px 0;gap:10px}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e7e5ff;color:#5e58d3;font-weight:700;font-size:13px}.profile-text{display:flex;flex-direction:column;gap:3px}.profile-text strong{font-size:12px}.profile-text small{font-size:10px;color:#969cac}.more{margin-left:auto;border:0;background:none;color:#9096a5;font-size:18px;cursor:pointer}.main{min-width:0;padding:0 42px;max-width:1240px;width:100%;margin:0 auto}.topbar{height:139px;display:flex;align-items:center;justify-content:space-between}.topbar .eyebrow{margin-bottom:8px}.topbar h1{font:700 25px Manrope,sans-serif;letter-spacing:-.8px;margin:0;color:#212638}.top-actions{display:flex;align-items:center;gap:12px}.search{height:39px;width:270px;border:1px solid #e8eaf0;border-radius:8px;background:white;display:flex;align-items:center;padding:0 10px;gap:8px;color:#9aa1af}.search>span{font-size:20px}.search input{min-width:0;border:0;outline:0;font:12px 'DM Sans';flex:1;color:#30374a}.search input::placeholder{color:#a7adba}.search kbd{font:10px 'DM Sans';background:#f5f6f9;border:1px solid #eff0f3;border-radius:4px;padding:3px 5px}.icon-button,.arrow{width:35px;height:35px;display:grid;place-items:center;border:1px solid #e9ebf1;border-radius:8px;background:#fff;color:#737b8c;cursor:pointer;font-size:16px}.icon-button:hover,.arrow:hover{color:#605bd7;border-color:#d7d5fb}.avatar.small{width:32px;height:32px}.mail-card{border:1px solid #e9ebf1;background:white;border-radius:12px;overflow:hidden;min-height:calc(100vh - 208px);box-shadow:0 3px 14px #272d4205}.toolbar{height:53px;border-bottom:1px solid #eff0f4;display:flex;align-items:center;padding:0 19px;gap:14px}.check{display:flex;align-items:center;cursor:pointer}.check input{position:absolute;opacity:0}.check span{width:15px;height:15px;border:1px solid #d8dbe4;border-radius:4px;display:block}.check input:checked+span{background:#6d68e8;border-color:#6d68e8}.check input:checked+span:after{content:'✓';font-size:11px;color:#fff;display:block;text-align:center}.tool{border:0;background:none;color:#7c8391;font:11px 'DM Sans';cursor:pointer}.tool:hover{color:#5c57d7}.tool-spacer{flex:1}.range{font-size:10px;color:#9ca2ae;margin-right:5px}.arrow{height:25px;width:25px;border:0;font-size:21px;background:transparent}.mail-row{height:66px;display:flex;align-items:center;padding:0 19px;gap:14px;border-bottom:1px solid #f0f1f5;cursor:pointer;transition:background .12s}.mail-row:hover{background:#fafaff}.mail-row.unread{background:#fcfcff}.mail-row .row-check{width:15px;height:15px;border:1px solid #daddE5;border-radius:4px;flex:none}.mail-row .star{font-size:16px;color:#c9ccd5;width:15px;cursor:pointer}.mail-row .star:hover{color:#e7b552}.sender{width:170px;flex:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#818898;font-size:12px}.mail-row.unread .sender{color:#272d3e;font-weight:700}.mail-summary{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#a2a7b2;font-size:11px}.mail-row.unread .mail-summary{color:#656d7e}.mail-subject{color:#41485a;margin-right:7px;font-weight:500}.mail-row.unread .mail-subject{color:#262c3e;font-weight:700}.attach{color:#afb4c0;margin-left:6px}.mail-date{width:71px;flex:none;text-align:right;color:#a0a6b2;font-size:10px}.mail-row.unread .mail-date{color:#596174;font-weight:600}.empty{height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.empty-icon{width:58px;height:58px;border-radius:18px;background:#f1f0ff;color:#7772df;display:grid;place-items:center;font-size:25px}.empty h2{font:700 17px Manrope;margin:18px 0 7px}.empty p{font-size:12px;color:#969cac;max-width:320px;line-height:1.7;margin:0 0 19px}.empty .primary{font-size:11px}.hidden{display:none!important}footer{height:47px;display:flex;align-items:center;font-size:10px;color:#9299a8;gap:7px;padding:0 4px}.status-dot{width:6px;height:6px;border-radius:50%;background:#51bb8c}.footer-right{margin-left:auto}.footer-right b{color:#7c81a0;font-size:13px;margin-left:4px}.reader{position:fixed;inset:0 0 0 254px;background:#f6f7fb;padding:0 max(42px,calc((100vw - 254px - 1156px)/2));z-index:2}.reader-top{height:85px;display:flex;align-items:center;gap:11px}.reader-tools{font-size:9px;letter-spacing:1.3px;color:#9da3b1;font-weight:700;margin-left:10px}.message-content{background:#fff;border:1px solid #e9ebf1;border-radius:12px;min-height:400px;padding:35px 42px}.message-content h2{font:700 23px Manrope;margin:0 0 26px}.message-meta{display:flex;align-items:center;gap:12px;border-bottom:1px solid #eff0f4;padding-bottom:20px;font-size:12px}.message-meta small{display:block;color:#969cac;margin-top:4px}.message-body{font-size:13px;line-height:1.8;color:#525b6d;padding-top:25px;white-space:pre-wrap}.dialog-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.dialog-head h2{font:700 21px Manrope;margin:5px 0 0;letter-spacing:-.5px}.close{border:0;background:none;color:#969cac;font-size:23px;cursor:pointer}.field{height:48px;border-top:1px solid #eff0f4;display:flex;align-items:center;gap:17px}.field span{width:57px;font-size:11px;color:#8a91a0}.field input{border:0;outline:0;flex:1;font:12px 'DM Sans';color:#343b4d}.field input::placeholder,textarea::placeholder{color:#b4b9c3}textarea{width:100%;height:230px;border:0;border-top:1px solid #eff0f4;resize:vertical;padding:18px 0;outline:0;font:12px/1.7 'DM Sans';color:#343b4d}.dialog-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #eff0f4;padding-top:15px}.from-label{font-size:10px;color:#9ba1ae}.from-label b{font-weight:500;color:#676f80;margin-left:5px}.send{padding:10px 16px}.send span{margin-left:13px}dialog{border:0;border-radius:14px;padding:28px;width:min(570px,calc(100% - 30px));box-shadow:0 20px 80px #191e3840;color:#252b3d}dialog::backdrop{background:#171a2b62;backdrop-filter:blur(2px)}.form-error{font-size:11px;color:#d25b68;min-height:15px;margin:0 0 7px}
@media(max-width:900px){.app{grid-template-columns:205px minmax(0,1fr)}.sidebar{padding-left:13px;padding-right:13px}.main{padding:0 22px}.sender{width:125px}.search{width:210px}.reader{left:205px;padding:0 22px}}@media(max-width:650px){.app{display:block}.sidebar{height:auto;position:relative;border-right:0;border-bottom:1px solid #e9ebf1;padding:12px 15px;display:block}.brand{height:35px}.compose{position:absolute;right:15px;top:7px;width:auto;height:36px;margin:0;padding:0 12px}.nav-label,.sidebar-bottom{display:none}#folders{display:flex;overflow:auto;margin-top:12px;gap:4px}.nav-item{white-space:nowrap;width:auto;height:34px;padding:0 10px;gap:6px;font-size:11px}.nav-icon{font-size:13px}.main{padding:0 12px}.topbar{height:100px}.topbar h1{font-size:22px}.top-actions{gap:6px}.search{width:36px;border:0;background:transparent;padding:0;justify-content:center}.search>span{font-size:21px}.search input,.search kbd{display:none}.top-actions .avatar{display:none}.mail-card{min-height:calc(100vh - 165px)}.toolbar{padding:0 10px;gap:8px}.tool{font-size:10px}.mail-row{padding:0 10px;gap:8px;height:63px}.sender{width:92px;font-size:11px}.mail-summary{font-size:10px}.mail-date{width:40px;font-size:9px}.reader{inset:0;padding:0 12px}.reader-top{height:72px}.message-content{padding:25px 20px}.message-content h2{font-size:20px}.range{font-size:9px}.footer-right{display:none}}

.row-check.checked{background:#6d68e8;border-color:#6d68e8}.row-check.checked:after{content:'✓';color:#fff;font-size:10px;line-height:14px;display:block;text-align:center}
.auth-screen{min-height:100vh;display:grid;place-items:center;padding:28px;background:radial-gradient(ellipse at 50% 42%,#ebeaff 0,transparent 46%),#f6f7fb}.auth-card{width:min(100%,420px);background:#fff;border:1px solid #eaebf2;border-radius:18px;padding:35px 38px 25px;box-shadow:0 16px 55px #282d490d}.auth-brand{padding:0;margin-bottom:34px}.auth-card .eyebrow{margin-bottom:8px}.auth-card h1{font:700 25px/1.25 Manrope,sans-serif;letter-spacing:-.8px;color:#212638;margin:0}.auth-intro{font-size:12px;color:#9198a7;margin:9px 0 25px;line-height:1.6}.auth-field{display:block;margin:0 0 16px}.auth-field>span{display:block;font-size:11px;font-weight:600;color:#697184;margin-bottom:7px}.auth-field input{width:100%;height:43px;border:1px solid #e5e7ee;border-radius:8px;padding:0 12px;outline:none;font:12px 'DM Sans';color:#343b4d;background:#fff;transition:border .15s,box-shadow .15s}.auth-field input:focus{border-color:#8580ec;box-shadow:0 0 0 3px #7772e51a}.auth-field input::placeholder{color:#b1b6c1}.auth-error{min-height:17px;font-size:11px;color:#d25b68;margin:-3px 0 7px}.auth-submit{width:100%;height:43px;display:flex;align-items:center;justify-content:center;gap:14px}.auth-switch{text-align:center;font-size:11px;color:#858c9b;margin-top:19px}.auth-switch button{border:0;background:none;color:#625dd8;font:600 11px 'DM Sans';cursor:pointer;padding:0 2px}.auth-switch button:hover{text-decoration:underline}.auth-foot{display:flex;justify-content:center;align-items:center;gap:7px;border-top:1px solid #f0f1f5;margin-top:24px;padding-top:17px;font-size:10px;color:#9ba1af}.auth-foot .status-dot{width:6px;height:6px}
@media(max-width:500px){.auth-screen{padding:17px}.auth-card{padding:28px 24px 22px}.auth-card h1{font-size:23px}}
.delete-tool,.delete-icon{color:#d34755}.delete-tool:hover,.delete-icon:hover{color:#b52f3c;background:#fff3f4;border-color:#f3c7cc}.profile-wrap{position:relative}.profile-trigger{width:100%;border:0;background:transparent;cursor:pointer;text-align:left}.profile-trigger:hover{background:#f8f8fc}.profile-chevron{margin-left:auto;color:#9096a5}.account-menu{position:absolute;z-index:10;left:0;bottom:54px;width:218px;padding:8px;background:#fff;border:1px solid #e7e9f0;border-radius:11px;box-shadow:0 12px 35px #1d233326}.menu-title{padding:8px 9px 9px;color:#999faf;font-size:9px;letter-spacing:1px;text-transform:uppercase;font-weight:700}.account-option,.menu-action{width:100%;display:flex;align-items:center;gap:8px;padding:9px;border:0;border-radius:7px;background:transparent;color:#596174;text-align:left;font:500 11px 'DM Sans';cursor:pointer}.account-option:hover,.menu-action:hover{background:#f5f5fb;color:#4f4acb}.account-option.active{background:#f0efff;color:#514cd0;font-weight:700}.account-option .account-check{margin-left:auto}.menu-action{border-top:1px solid #eff0f4;border-radius:0;margin-top:4px;padding-top:11px}.logout-action{color:#858c9b}
.row-delete{border:0;background:transparent;color:#c5cad3;font-size:15px;width:28px;height:28px;border-radius:6px;cursor:pointer;opacity:0;flex:none}.mail-row:hover .row-delete,.row-delete:focus{opacity:1}.row-delete:hover{color:#d34755;background:#fff1f2}
@media(max-width:650px){.nav-label{display:none}.sidebar-bottom{display:block;margin-top:8px}.storage{display:none}.profile{height:38px;padding:0 4px}.row-delete{opacity:1}}