:root{font-family:Inter,"Public Sans","Segoe UI",sans-serif;color:#25272a;background:#f3f4f6;--accent:#f97316;--accent-dark:#c6530b;--line:#e8eaed;--muted:#70757d;--surface:#fff;--soft:#f7f8fa}*{box-sizing:border-box}body{margin:0;min-width:320px;background:#f3f4f6}button,input,select,textarea{font:inherit}button{cursor:pointer}.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.email-app{height:calc(100vh - 12px);margin:6px;display:grid;grid-template-columns:300px minmax(0,1fr);overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:4px}.mail-sidebar{display:flex;min-height:0;flex-direction:column;border-right:1px solid var(--line);background:var(--surface)}.sidebar-title{height:80px;display:flex;align-items:center;padding:0 24px;border-bottom:1px solid var(--line)}.sidebar-title h1{margin:0;font-size:21px}.mobile-close{display:none;margin-left:auto;border:0;background:none;font-size:28px}.compose-wrap{padding:24px;border-bottom:1px solid var(--line)}.compose-button{width:100%;height:47px;border:0;border-radius:4px;background:var(--accent);color:#fff;font-weight:700}.compose-button:hover{background:var(--accent-dark)}.folder-nav{padding:13px 0}.folder,.labels>button,.meetings button{width:100%;height:45px;display:flex;align-items:center;gap:15px;padding:0 24px;border:0;background:transparent;color:#282b2f;text-align:left}.folder:hover,.labels>button:hover,.meetings button:hover,.folder.active{background:#fff7ed}.folder.active{color:var(--accent-dark);font-weight:700;border-right:3px solid var(--accent)}.folder b,.labels b{margin-left:auto;padding:3px 7px;border-radius:4px;background:#ffedd5;color:var(--accent-dark);font-size:11px}.folder b.danger{background:#fff0f1;color:#e04758}.labels{padding:8px 0 18px;border-top:1px solid var(--line)}.section-title{height:45px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;color:#73777f;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px}.section-title button{width:25px;height:25px;display:grid;place-items:center;border:0;background:transparent}.section-title svg{width:17px}.labels>button{height:45px}.labels i{width:7px;height:7px;border-radius:50%}.green{background:#169873}.mint{background:#37c88a}.red{background:#e65365}.orange{background:#f0a443}.dark{background:#45494e}.meetings{margin-top:auto;padding:12px 0;border-top:1px solid var(--line)}.mail-sidebar footer{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-top:1px solid var(--line);color:#848990;font-size:11px;letter-spacing:.5px}.mail-sidebar footer a{color:var(--accent-dark);text-decoration:none}.mail-main{display:grid;grid-template-rows:80px minmax(0,1fr) 62px;min-width:0;min-height:0;background:#fbfcfd}.toolbar{display:flex;align-items:center;gap:9px;padding:0 24px;border-bottom:1px solid var(--line)}.toolbar>button{width:39px;height:39px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:#24272b}.toolbar>button:hover{border-color:#f3b084;color:var(--accent-dark);background:#fff7ed}.toolbar-spacer{flex:1}.select-box input,.row-check input{position:absolute;opacity:0;pointer-events:none}.select-box span,.row-check span{width:20px;height:20px;display:block;border:1px solid var(--line);border-radius:4px;background:#f3f4f6}.select-box input:checked+span,.row-check input:checked+span{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 4px #fff}.search-control{width:0;overflow:hidden;display:flex;align-items:center;gap:8px;border:0 solid var(--line);border-radius:20px;transition:.25s}.search-control.open{width:250px;padding:0 12px;border-width:1px}.search-control svg{min-width:18px;color:var(--muted)}.search-control input{width:100%;height:38px;border:0;outline:0;background:transparent}.menu-button{display:none!important}.more-button{font-size:23px}.message-list{min-height:0;overflow:auto}.message-row{height:61px;display:grid;grid-template-columns:28px 32px minmax(140px,170px) minmax(220px,1fr) 180px;align-items:center;gap:13px;padding:0 23px;border-bottom:1px dashed var(--line);background:var(--surface);transition:.15s}.message-row:hover{background:#fff8f2}.message-row.unread .sender,.message-row.unread .subject{font-weight:750;color:#26282b}.star{border:0;background:transparent;color:#92979d;padding:3px}.star svg{width:18px;height:18px}.star.active{color:var(--accent)}.star.active svg{fill:#fed7aa}.sender-cell{display:flex;align-items:center;gap:11px;min-width:0}.avatar{width:31px;height:31px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;color:#663c1f;background:linear-gradient(145deg,#ffedd5,#fdba74);font-size:11px;font-weight:750}.sender,.subject,.preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sender{font-size:14px;font-weight:600}.content{display:flex;min-width:0;gap:5px;font-size:14px}.preview{color:var(--muted)}.date{text-align:right;color:#6f747c;font-size:12px;font-weight:600}.mailbox-pill{display:inline-block;margin-left:7px;padding:2px 5px;border-radius:3px;background:#fff1e7;color:#b64e0c;font-size:9px}.empty{height:100%;display:grid;place-items:center;color:var(--muted)}.pagination{display:flex;align-items:center;gap:22px;padding:0 24px;border-top:1px solid var(--line);background:var(--surface)}.pagination select{height:36px;padding:0 12px;border:1px solid var(--line);border-radius:4px;background:#fff}.pagination>span{margin-left:auto;color:#777d84;font-size:12px}.pagination div{display:flex;gap:8px}.pagination button{width:39px;height:39px;border:1px solid var(--line);border-radius:50%;background:#fff;font-size:27px;line-height:1}.pagination button:disabled{opacity:.35;cursor:default}dialog{width:min(680px,calc(100vw - 24px));border:0;border-radius:8px;padding:0;box-shadow:0 30px 90px #20242a3d}dialog::backdrop{background:#17191d80;backdrop-filter:blur(2px)}form{padding:25px}.dialog-title{display:flex;align-items:flex-start;justify-content:space-between;padding-bottom:15px;border-bottom:1px solid var(--line)}.dialog-title small{color:var(--accent-dark);font-weight:700;text-transform:uppercase}.dialog-title h2{margin:4px 0 0}.dialog-title button{border:0;background:none;font-size:28px}form label{display:grid;grid-template-columns:70px 1fr;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:13px}form input,form select,form textarea{border:0;outline:0;color:#202327;resize:vertical}.message-field{align-items:start}.compose-actions{display:flex;align-items:center;justify-content:space-between;margin-top:18px}.compose-actions button{padding:10px 15px;border-radius:4px;font-weight:650}.secondary{border:1px solid var(--line);background:#fff}.send{margin-left:7px;border:1px solid var(--accent);background:var(--accent);color:#fff}.toast{position:fixed;right:24px;bottom:24px;z-index:20;transform:translateY(20px);opacity:0;padding:12px 17px;border-radius:5px;background:#2d3035;color:#fff;font-size:13px;transition:.2s;pointer-events:none}.toast.show{transform:none;opacity:1}body.dark{--surface:#202226;--soft:#292c31;--line:#363a40;--muted:#a7abb2;color:#f4f4f5;background:#17191c}body.dark .email-app,body.dark .mail-main,body.dark .message-row,body.dark .pagination,body.dark .toolbar>button,body.dark .pagination select{background:#202226;color:#eee}body.dark .folder,body.dark .labels>button,body.dark .meetings button{color:#ddd}body.dark .folder:hover,body.dark .labels>button:hover,body.dark .folder.active,body.dark .message-row:hover{background:#352820}
@media(max-width:900px){.email-app{grid-template-columns:1fr;margin:0;height:100vh;border:0}.mail-sidebar{position:fixed;z-index:15;inset:0 auto 0 0;width:min(300px,88vw);transform:translateX(-105%);transition:.25s;box-shadow:8px 0 30px #0002}.mail-sidebar.open{transform:none}.mobile-close{display:block}.menu-button{display:grid!important}.toolbar{padding:0 14px}.toolbar>button:nth-of-type(4),.toolbar>button:nth-of-type(5),.toolbar>button:nth-of-type(6){display:none}.message-row{grid-template-columns:25px 28px minmax(100px,145px) 1fr 95px;padding:0 13px;gap:7px}.mailbox-pill{display:none}}
@media(max-width:620px){.toolbar{height:64px}.mail-main{grid-template-rows:64px minmax(0,1fr) 56px}.toolbar>button:nth-of-type(2),.toolbar>button:nth-of-type(3),.toolbar>button:last-child{display:none}.search-control.open{position:absolute;left:58px;right:14px;z-index:2;width:auto;background:var(--surface)}.message-row{height:auto;min-height:70px;grid-template-columns:23px 27px 1fr auto;padding:10px 11px}.sender-cell{grid-column:3}.content{grid-column:3/-1}.date{grid-column:4;grid-row:1}.preview{max-width:42vw}.pagination{padding:0 12px}.pagination>span{display:none}}
.compose-button{width:100%;height:47px;border:0;border-radius:4px;background:#f55418;color:#fff;font-weight:700}
@media(min-width:901px){.email-app{grid-template-columns:250px minmax(0,1fr)}}
.sidebar-title{height:68px;padding:0 19px}
.sidebar-title h1{font-size:18px}
.compose-wrap{padding:18px 19px}
.compose-button{height:43px;font-size:13px}
.folder-nav{padding:9px 0}
.folder,.labels>button,.meetings button{height:39px;gap:12px;padding:0 19px;font-size:12px}
.folder svg,.labels svg,.meetings svg{width:17px;height:17px}
.section-title{height:39px;padding:0 19px;font-size:10px}
.labels{padding:5px 0 12px}
.labels>button{height:39px}
.meetings{padding:8px 0}
.mail-sidebar footer{height:50px;padding:0 19px;font-size:10px}

/* Compact the folder and label navigation without changing sidebar width. */
.folder-nav{padding:6px 0}
.folder,.labels>button,.meetings button{height:34px;gap:10px;padding:0 18px;font-size:11px}
.folder svg,.labels svg,.meetings svg{width:15px;height:15px}
.folder b,.labels b{padding:2px 6px;font-size:9px}
.labels{padding:3px 0 8px}
.labels>button{height:34px}
.labels i{width:6px;height:6px}
.section-title{height:34px;padding:0 18px;font-size:9px}
.section-title button{width:22px;height:22px}

.sidebar-title{height:68px;gap:11px;padding:0 18px;background:linear-gradient(135deg,#fff 65%,#fff7ed)}
.sidebar-brand-icon{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:10px;background:#f55418;color:#fff;box-shadow:0 6px 14px #f5541830}
.sidebar-brand-icon svg{width:18px;height:18px;stroke-width:1.9}
.sidebar-brand-copy{min-width:0}
.sidebar-brand-copy h1{margin:0;color:#22252a;font-size:17px;line-height:1.15;font-weight:750;letter-spacing:-.25px}
.sidebar-brand-copy span{display:block;margin-top:3px;color:#8a8f96;font-size:9px;font-weight:600;letter-spacing:.45px;text-transform:uppercase}