@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--purple:#5b24d1;--purple-dark:#4315a8;--ink:#171522;--muted:#716d7e;--line:#e8e6ee;--bg:#f7f7fa;--white:#fff;--yellow:#f5b922}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px Inter,Arial,sans-serif;transition:background .2s,color .2s}.topbar{height:72px;background:var(--white);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px;position:sticky;top:0;z-index:5}.brand{display:flex;align-items:baseline;gap:10px;color:var(--ink);text-decoration:none}.brand-mark{font-size:37px;font-weight:800;letter-spacing:-3px;color:var(--purple)}.brand-product{font-size:17px;font-weight:600;color:var(--muted)}.top-actions{display:flex;align-items:center;gap:24px}.top-actions a{color:var(--muted);text-decoration:none;font-weight:500}.icon-button,.square-button{border:0;background:transparent;color:var(--muted);font-size:20px;cursor:pointer}.account{display:flex!important;align-items:center;gap:9px;color:var(--ink)!important}.avatar{background:#e8ddff;color:var(--purple);height:34px;width:34px;display:grid;place-items:center;border-radius:50%;font-size:11px;font-weight:700}.app-shell{display:flex;min-height:calc(100vh - 72px)}.sidebar{width:248px;background:var(--white);border-right:1px solid var(--line);padding:27px 18px 20px;display:flex;flex-direction:column}.compose-button{border:0;border-radius:9px;background:var(--purple);color:white;padding:14px 17px;font-size:14px;font-weight:700;text-align:left;box-shadow:0 6px 15px #5b24d12b;cursor:pointer;margin-bottom:25px}.compose-button:hover,.send-button:hover{background:var(--purple-dark)}.compose-button span{font-size:20px;margin-right:7px;vertical-align:-2px}.folder-nav{display:grid;gap:4px}.folder{color:var(--muted);text-decoration:none;display:flex;align-items:center;gap:13px;border-radius:7px;padding:11px 12px;font-weight:500}.folder:hover{background:#f3f0fc;color:var(--purple)}.folder.active{background:#eee9fc;color:var(--purple);font-weight:700}.folder strong{margin-left:auto;font-size:12px}.folder-icon{width:18px;text-align:center;font-size:18px}.muted-count{color:#96919f}.sidebar-bottom{margin-top:auto;display:grid;gap:5px}.storage{border-top:1px solid var(--line);margin-top:18px;padding:20px 12px 0;color:var(--muted)}.storage-label{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--ink)}.progress{height:6px;border-radius:8px;background:#eeeaf5;margin:10px 0 8px;overflow:hidden}.progress span{display:block;background:var(--purple);height:100%;width:18%}.storage small{font-size:11px}.mail-main{max-width:1150px;width:100%;padding:42px 52px}.mail-header{display:flex;align-items:flex-start;justify-content:space-between}.eyebrow{font-size:11px;letter-spacing:1.4px;color:var(--muted);font-weight:700;margin:0 0 8px}h1{font-size:31px;letter-spacing:-1px;margin:0 0 28px}.view-actions{display:flex;gap:18px}.square-button{font-size:22px;padding:3px 8px}.search-row{display:flex;gap:10px;margin-bottom:23px}.search-box{background:var(--white);border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;gap:10px;padding:0 14px;max-width:630px;width:100%;color:var(--muted);font-size:22px}.search-box input{border:0;outline:0;width:100%;font:14px Inter;background:transparent;padding:14px 0;color:var(--ink)}kbd{font-size:11px;background:#f2f1f5;border:1px solid #dedbe5;border-radius:4px;padding:3px 6px}.filter-button{border:1px solid var(--line);background:var(--white);border-radius:8px;padding:0 16px;color:var(--muted);font-weight:600;cursor:pointer}.toolbar{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:0 10px 15px;color:var(--muted);font-size:12px}.check-wrap{position:relative;display:inline-flex;width:18px;height:18px;cursor:pointer}.check-wrap input{opacity:0;position:absolute}.check-wrap span{width:16px;height:16px;border:1px solid #c8c4d1;border-radius:4px;background:var(--white)}.check-wrap input:checked+span{background:var(--purple);border-color:var(--purple)}.check-wrap input:checked+span:after{content:'✓';color:white;font-size:11px;position:absolute;left:3px;top:0}.toolbar-actions{display:flex;gap:5px;margin-left:18px}.toolbar-actions button{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:6px}.toolbar-actions button:hover{color:var(--purple)}.message-total{margin-left:auto}.message{min-height:69px;display:grid;grid-template-columns:24px 27px 175px 1fr 82px;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:0 10px;color:var(--muted)}.message:hover{background:#fbfaff}.message.unread{color:var(--ink);background:#fff}.message.unread .sender,.message.unread strong{font-weight:700}.star{border:0;background:transparent;color:#aaa5b4;cursor:pointer;font-size:22px;line-height:1}.star.starred{color:var(--yellow)}.message-copy{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.message-copy strong{font-weight:500}.message-copy span{color:var(--muted)}time{text-align:right;font-size:12px;color:var(--muted)}.empty-state{text-align:center;padding:85px 20px;color:var(--muted)}.empty-icon{font-size:40px;color:var(--purple)}.empty-state h2{color:var(--ink);margin:15px 0 5px}.site-footer{max-width:calc(100% - 248px);margin-left:248px;padding:20px 52px;color:var(--muted);display:flex;gap:20px;font-size:12px}.site-footer a{color:var(--muted);text-decoration:none}.modal-backdrop{position:fixed;inset:0;background:#1b153966;z-index:10;display:grid;place-items:center;padding:20px}.compose-modal{background:var(--white);border-radius:14px;width:min(570px,100%);box-shadow:0 20px 60px #20153844}.modal-title{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)}.modal-title h2{font-size:18px;margin:0}.modal-title button{font-size:25px;border:0;background:none;color:var(--muted);cursor:pointer}.compose-modal form{padding:20px 24px}.compose-modal label{display:block;color:var(--muted);font-size:12px;font-weight:600;margin-bottom:15px}.compose-modal input,.compose-modal textarea{display:block;width:100%;border:1px solid var(--line);border-radius:7px;padding:12px;margin-top:7px;font:14px Inter;outline-color:var(--purple);resize:vertical;background:var(--white);color:var(--ink)}.compose-footer{display:flex;align-items:center;justify-content:flex-end;gap:15px}.send-button{border:0;border-radius:7px;background:var(--purple);color:#fff;padding:12px 17px;font-weight:700;cursor:pointer}.toast{position:fixed;bottom:25px;right:25px;background:#241a38;color:white;padding:13px 18px;border-radius:8px;opacity:0;transform:translateY(10px);transition:.25s;z-index:20}.toast.show{opacity:1;transform:translateY(0)}body.dark{--bg:#181621;--white:#24212f;--ink:#f7f5fb;--muted:#aaa5b7;--line:#393445}body.dark .message.unread,body.dark .message:hover{background:#292535}body.dark .folder:hover{background:#322b42}body.dark .search-box input,body.dark .compose-modal input,body.dark .compose-modal textarea{color:var(--ink)}body.dark kbd{background:#393445;border-color:#4d465b}@media(max-width:800px){.topbar{padding:0 18px}.account-name,.top-actions>a:first-child{display:none}.sidebar{width:70px;padding:20px 10px}.compose-button{font-size:0;text-align:center;padding:13px}.compose-button span{font-size:22px;margin:0}.folder{justify-content:center;padding:12px 8px}.folder span:not(.folder-icon),.folder strong,.storage{display:none}.sidebar-bottom{margin-top:auto}.mail-main{padding:30px 18px}.site-footer{max-width:calc(100% - 70px);margin-left:70px;padding:20px 18px}.message{grid-template-columns:20px 24px 1fr 65px;gap:7px}.message-copy{grid-column:3 / 5;grid-row:2;margin:0 0 10px}.sender{grid-column:3;grid-row:1}.message time{grid-column:4;grid-row:1}.search-row{flex-wrap:wrap}.search-box{max-width:none;height:45px}.filter-button{height:42px}.toolbar-actions{margin-left:5px}.toolbar-actions button{font-size:0}.toolbar-actions button:first-letter{font-size:15px}}