@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--ink:#20232d;--muted:#858997;--line:#e9eaf0;--soft:#f7f7fa;--purple:#6857d9;--purple-dark:#5143bb;--sidebar:#fbfbfd;--white:#fff}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#fff;font-family:'DM Sans',sans-serif;font-size:14px}button,input,textarea{font:inherit}button,a{cursor:pointer}a{color:inherit;text-decoration:none}.app-shell{display:flex;min-height:100vh}.sidebar{width:248px;background:var(--sidebar);border-right:1px solid var(--line);padding:27px 16px 20px;display:flex;flex-direction:column;flex-shrink:0}.brand{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk';font-size:21px;font-weight:700;padding:0 13px 34px}.brand-mark{width:28px;height:28px;background:var(--purple);color:white;border-radius:9px;display:grid;place-items:center;font-size:16px}.brand-light{font-weight:500;color:#9799a5}.compose-button{height:46px;border:0;border-radius:11px;background:var(--purple);color:white;font-weight:600;box-shadow:0 5px 12px #6857d932;margin:0 4px 28px;transition:.2s}.compose-button:hover,.send-button:hover{background:var(--purple-dark);transform:translateY(-1px)}.compose-button span{font-size:20px;vertical-align:-1px;margin-right:7px}.mail-nav{display:grid;gap:4px}.nav-item{height:42px;display:flex;align-items:center;gap:12px;padding:0 13px;border-radius:9px;color:#696c79}.nav-item:hover{background:#f0f0f6;color:var(--ink)}.nav-item.active{background:#edebfd;color:var(--purple);font-weight:600}.nav-item strong{font-size:12px;margin-left:auto;color:var(--purple)}.nav-icon{font-size:18px;width:17px;text-align:center}.nav-section-title{display:flex;justify-content:space-between;color:#a1a3ad;font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;padding:31px 13px 11px}.nav-section-title a{font-size:17px;color:var(--purple)}.secondary .nav-item{height:38px}.folder-dot{width:8px;height:8px;border-radius:50%;margin:0 5px}.blue{background:#63a5ee}.purple{background:#a778dd}.amber{background:#e8af51}.sidebar-bottom{margin-top:auto;border-top:1px solid var(--line);padding:17px 13px 0;display:grid;gap:14px;color:#888b96}.sidebar-bottom a{display:flex;gap:12px}.main-content{min-width:0;flex:1}.topbar{height:83px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 4.4%;gap:20px}.search-wrap{height:42px;max-width:500px;flex:1;background:var(--soft);border:1px solid #f0f0f4;border-radius:10px;display:flex;align-items:center;padding:0 13px;color:#999ba6}.search-icon{font-size:25px;line-height:0;margin-right:9px}.search-wrap input{border:0;outline:0;background:transparent;width:100%;color:var(--ink)}.search-wrap kbd{font-size:11px;white-space:nowrap;border:1px solid #dddde4;background:white;border-radius:5px;padding:3px 6px;color:#a0a1aa}.top-actions{display:flex;align-items:center;gap:21px;margin-left:auto}.icon-button{font-size:23px;color:#777b88;position:relative}.notification-dot{position:absolute;width:6px;height:6px;border:1px solid white;background:#e86b70;border-radius:50%;top:1px;right:0}.avatar{width:34px;height:34px;border-radius:50%;background:#292d3b;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700}.content-wrap{max-width:1100px;margin:0 auto;padding:44px 4.5%}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:37px}.eyebrow{color:var(--purple);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px}.page-heading h1{font-family:'Space Grotesk';font-size:31px;letter-spacing:-.04em;margin:0 0 8px}.subheading{color:var(--muted);margin:0}.upgrade-link{color:var(--purple);font-weight:600;font-size:13px}.upgrade-link span{font-size:18px;margin-left:6px}.inbox-toolbar{height:55px;border:1px solid var(--line);border-radius:10px 10px 0 0;display:flex;align-items:center;padding:0 16px;gap:14px}.checkbox-label{display:flex;align-items:center;position:relative;cursor:pointer}.checkbox-label input{position:absolute;opacity:0}.custom-check{width:16px;height:16px;border:1.5px solid #c9cad3;border-radius:4px;background:white;display:inline-block}.checkbox-label input:checked+.custom-check{background:var(--purple);border-color:var(--purple);box-shadow:inset 0 0 0 3px white}.tool-button,.pager{border:0;background:transparent;color:#9295a0;font-size:19px;padding:5px}.tool-button:hover,.pager:hover{color:var(--purple)}.toolbar-divider{height:20px;width:1px;background:var(--line)}.toolbar-spacer{flex:1}.message-count{color:#9a9ca6;font-size:12px}.pager{font-size:23px}.tabs{height:54px;display:flex;align-items:end;border-bottom:1px solid var(--line);gap:29px}.tab{border:0;background:none;color:#989aa5;padding:0 2px 15px;font-weight:600;font-size:13px;position:relative}.tab span{font-size:11px;background:#f0effb;color:var(--purple);border-radius:10px;padding:3px 6px;margin-left:4px}.tab.active{color:var(--purple)}.tab.active:after{content:'';height:2px;background:var(--purple);position:absolute;bottom:-1px;left:0;right:0;border-radius:3px}.message-list{border-bottom:1px solid var(--line)}.message{min-height:88px;border-bottom:1px solid #f0f0f3;display:flex;align-items:center;gap:14px;padding:14px 10px;transition:background .15s}.message:hover{background:#fafaff}.message.unread{background:#fcfcff}.message.unread:hover{background:#f8f7ff}.star{border:0;background:none;color:#c3c5ce;font-size:20px;padding:3px}.star.starred{color:#ecac42}.sender-avatar{width:35px;height:35px;border-radius:50%;color:white;display:grid;place-items:center;font-size:11px;font-weight:700;flex-shrink:0}.coral{background:#e9786e}.blue{background:#5e9bd3}.dark{background:#272c38}.green{background:#63a78b}.violet{background:#7664c6}.pink{background:#df6e9d}.message-main{min-width:0;flex:1}.message-top{display:flex;justify-content:space-between;gap:15px;margin-bottom:4px}.message-top strong{font-size:13px}.message-top time{color:#9a9ca6;font-size:12px;white-space:nowrap}.subject{font-weight:600;font-size:13px}.message p{color:#92949f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:5px 0 0;font-size:12px}.attachment{color:#a7a9b5;margin-left:8px}.empty-state{display:none;text-align:center;padding:70px;color:var(--muted)}.empty-state.visible{display:block}.empty-state div{font-size:35px;color:#b3b0ea}.empty-state h2{font-family:'Space Grotesk';color:var(--ink);margin:10px 0 5px}.toast{position:fixed;right:25px;bottom:25px;background:#272b38;color:#fff;padding:13px 18px;border-radius:9px;box-shadow:0 8px 30px #2223;transform:translateY(100px);opacity:0;transition:.3s}.toast.show{transform:translateY(0);opacity:1}.modal-backdrop{display:none;position:fixed;inset:0;background:#16172855;z-index:4;align-items:flex-end;justify-content:flex-end;padding:25px}.modal-backdrop.open{display:flex}.compose-modal{width:min(520px,100%);background:white;border-radius:13px;box-shadow:0 20px 60px #1e203044;overflow:hidden}.compose-modal header{display:flex;align-items:center;justify-content:space-between;background:#292d3b;color:#fff;padding:16px 20px}.compose-modal h2{font-family:'Space Grotesk';font-size:16px;margin:0}.compose-modal header button{background:none;border:0;color:#fff;font-size:25px}.compose-modal form{padding:5px 20px 20px}.compose-modal label{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);padding:12px 0;color:#9496a0;font-size:13px}.compose-modal label input{border:0;outline:0;flex:1;color:var(--ink)}.compose-modal .body-label{display:block;border:0}.body-label span{display:block;padding:12px 0}.body-label textarea{width:100%;height:160px;resize:vertical;border:1px solid var(--line);border-radius:8px;padding:12px;outline-color:var(--purple)}.compose-modal footer{display:flex;align-items:center;gap:15px;margin-top:12px}.send-button{background:var(--purple);border:0;color:#fff;border-radius:8px;padding:11px 17px;font-weight:600}.discard-button{border:0;background:none;color:#9b9da6}.mobile-menu{display:none;border:0;background:none;font-size:21px;color:var(--ink)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:760px){.sidebar{position:fixed;z-index:3;inset:0 auto 0 0;transform:translateX(-100%);transition:.25s;box-shadow:10px 0 30px #20233322}.sidebar.open{transform:translateX(0)}.mobile-menu{display:block}.topbar{height:70px;padding:0 18px}.top-actions{gap:13px}.content-wrap{padding:30px 18px}.page-heading{align-items:flex-start;gap:20px}.page-heading h1{font-size:25px}.upgrade-link{display:none}.message{padding:14px 2px;gap:9px}.message p{display:none}.sender-avatar{width:32px;height:32px}.star{font-size:18px}.inbox-toolbar{padding:0 10px;gap:9px}.message-count{display:none}.tabs{gap:18px;overflow:auto}.tab{white-space:nowrap}.search-wrap kbd{display:none}.modal-backdrop{padding:12px}.compose-modal{margin-bottom:0}.sidebar-bottom{padding-bottom:10px}}