*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}:root{--font:"Inclusive Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif}body{font-family:var(--font);background-color:#f5f5f7}a{color:inherit;text-decoration:none}button:disabled{pointer-events:none;cursor:default!important}#root{height:100svh}@media (width>=768px){body{overflow:hidden}}header{align-items:center;padding:8px 8px 0;display:flex}.brand{flex-shrink:0;align-items:center;gap:1rem;padding-right:8px;display:flex}.menu{cursor:pointer;background-color:#e9e9ee;border:0;border-radius:24px;place-items:center;width:48px;height:48px;display:grid}.menu:hover{background-color:#dddde5}.menu svg{width:20px;height:20px}.brand .logo{display:none}.logo{align-items:center;gap:10px;font-size:20px}.logo img{width:30px;height:30px}.search{cursor:text;background-color:#e9e9ee;border:1px solid #0000;border-radius:30px;align-items:center;gap:6px;width:100%;padding:3px 6px;display:flex}.search[data-disabled=true]{cursor:default!important}.search:has(input:focus){background-color:#fff;border-color:#e2e8f0;box-shadow:0 0 5px #0000001a,0 0 1px #0000001a}.search button{cursor:pointer;background-color:#0000;border:0;border-radius:20px;flex-shrink:0;place-items:center;width:40px;height:40px;display:grid}.search button:hover{background-color:#dddde5}.search svg{width:20px;height:20px}.search input{width:100%;font-family:var(--font);background-color:#0000;border:0;outline:0;font-size:17px}@media (width>=768px){header{padding-left:1rem}.brand{width:15rem}.menu{display:none}.brand .logo{display:flex}.search{max-width:45rem}}aside{z-index:1;background-color:#0006;width:100%;height:100%;display:none;position:fixed;top:0;left:0}aside:target{display:block}body:has(#sidebar:target){overflow:hidden}.sidebar{background-color:#fff;flex-direction:column;width:100%;max-width:16rem;height:100%;padding:1rem 8px;display:flex;overflow:auto}.sidebar .logo{border-bottom:1px solid #e2e8f0;margin-bottom:1rem;padding-bottom:1rem;padding-left:1rem;display:flex}.sidebar .logo img{width:25px;height:25px}aside a{border-radius:20px;align-items:center;gap:10px;width:100%;max-width:240px;padding:10px 1rem;display:flex}aside a:hover,aside a.active{background-color:#e9e9ee}aside a svg{width:18px;height:18px}aside a p{line-height:1}@media (width>=768px){aside{background-color:#0000;width:100%;max-width:16rem;height:calc(100% - 64px);display:block;top:64px}.sidebar{background-color:#0000;max-width:none;height:100%;padding:8px 0}.sidebar .logo{display:none}aside a{border-radius:0 20px 20px 0;padding:7px 2rem}}main{flex-direction:column;gap:8px;min-height:calc(100% - 56px);margin-inline:8px;padding-block:8px;display:flex}.info{background-color:#fff;border-radius:1rem;flex-direction:column;gap:1rem;padding:1rem;display:flex}.email{word-break:break-all;line-height:1}.email .skeleton{width:100%;max-width:300px;height:16px}.countdown{word-break:break-all;color:#40566d;line-height:1}.countdown:empty{display:none}.countdown .skeleton{width:100%;max-width:250px;height:16px}.actions{grid-template-columns:repeat(2,1fr);gap:1rem;display:grid}.actions .skeleton{width:100%;height:34px}.actions button{font-family:var(--font);cursor:pointer;background-color:#e9e9ee;border:0;border-radius:20px;place-items:center;padding:8px 1rem;font-size:15px;display:grid}.actions button:hover{background-color:#dddde5}.detail{background-color:#fff;border-radius:1rem;flex-grow:1;flex-shrink:0;overflow:auto}.mail-btn{width:100%;font-family:var(--font);text-align:start;cursor:pointer;background-color:#0000;border:0;border-bottom:1px solid #f5f5f7;flex-direction:column;gap:8px;padding:1rem;display:flex}.mail-btn:hover{background-color:#f0f0f4}.mail-btn span:first-child{white-space:nowrap;text-overflow:ellipsis;width:100%;font-size:16px;font-weight:500;overflow:hidden}.mail-btn span:nth-child(2){white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:15px;overflow:hidden}.timestamp{color:#40566d;margin-left:auto;font-size:13px}.placeholder{text-align:center;color:#1a1a1b;padding-block:2rem;font-size:17px}.placeholder span{color:#40566d;margin-top:6px;font-size:15px;display:block}.mail-body{flex-direction:column;gap:1rem;padding:1rem;display:flex}.mail-body h2{font-size:20px;font-weight:400}.metadata{flex-direction:column;gap:1rem;display:flex}.metadata span{word-break:break-all;margin-bottom:2px;display:block}.from span:first-child,.to span:first-child{font-weight:500}.mail hr{border:0;border-bottom:1px solid #dddde5}@media (width>=480px){.actions{flex-wrap:wrap;align-items:center;display:flex}.actions .skeleton{max-width:130px;height:30px}.actions button{padding-block:6px}}@media (width>=768px){main{height:calc(100% - 56px);margin-left:16rem;overflow:auto}.mail-btn{flex-direction:row;align-items:center;gap:1rem}.mail-btn span:first-child{max-width:100px}}@media (width>=1024px){.mail-btn span:first-child{max-width:150px}.metadata{flex-direction:row;justify-content:space-between}.to{text-align:end}}@media (width>=1280px){.mail-btn span:first-child{max-width:200px}}.skeleton{background-color:#f2f2f2;background-image:linear-gradient(90deg,#f2f2f2 0%,#e6e6e6 20%,#f2f2f2 40% 100%);background-size:200% 100%;border-radius:20px;animation:1.5s ease-in-out infinite shimmer;display:block}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}