:root{--ink:#0c1722;--nav:#07131f;--muted:#728091;--line:#e7ebef;--accent:#5be0b5;--paper:#fff;--soft:#f5f7f8}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:var(--soft)}button,input,textarea{font:inherit}.hidden{display:none!important}.brand{display:flex;align-items:center;gap:11px}.brand .mark{display:grid;place-items:center;width:38px;height:38px;background:var(--accent);color:var(--nav);border-radius:12px;font:800 20px Georgia}.brand strong,.brand small{display:block}.brand strong{letter-spacing:-.3px}.brand small{font-size:9px;letter-spacing:3px;color:#82909d;margin-top:2px}.login{min-height:100vh;display:grid;grid-template-columns:minmax(420px,46%) 1fr;background:var(--paper)}.login-card{width:min(390px,calc(100vw - 44px));margin:auto}.login h1{font:500 clamp(36px,4vw,54px) Georgia,serif;letter-spacing:-2px;margin:72px 0 12px}.login p{color:var(--muted);margin:0 0 38px}.login label{display:block;font-size:12px;font-weight:700;margin:17px 0 7px}.login input,.composer input{width:100%;border:1px solid #dbe1e5;border-radius:10px;padding:14px;outline:none}.login input:focus,.composer input:focus{border-color:#3bbd95;box-shadow:0 0 0 3px #5be0b522}.login form button,.composer footer button{width:100%;border:0;border-radius:10px;padding:14px;background:var(--nav);color:#fff;font-weight:700;margin-top:22px;cursor:pointer}.error{color:#c33;font-size:13px;min-height:21px;margin-top:12px}.login-card>footer{color:#98a2ac;font-size:11px;margin-top:45px}.login aside{position:relative;overflow:hidden;margin:18px;border-radius:20px;background:radial-gradient(circle at 75% 20%,#164c4b,transparent 28%),linear-gradient(145deg,#07131f,#0b2631);color:white}.orb{position:absolute;width:560px;height:560px;border:1px solid #5be0b555;border-radius:50%;right:-200px;top:-150px;box-shadow:0 0 100px #5be0b51c inset}.login blockquote{position:absolute;bottom:8%;left:8%;font:400 clamp(34px,4vw,62px) Georgia,serif;line-height:1.05;margin:0}.app{height:100vh;display:grid;grid-template-columns:245px 1fr}.app nav{background:var(--nav);color:white;padding:26px 18px;display:flex;flex-direction:column}.app nav .brand{padding:0 8px 25px}.compose{border:0;border-radius:12px;padding:13px;background:var(--accent);color:var(--nav);font-weight:800;text-align:left;cursor:pointer}.folders{margin-top:28px}.folder{width:100%;border:0;background:transparent;color:#9ba8b3;padding:11px 12px;border-radius:8px;text-align:left;cursor:pointer;text-transform:capitalize}.folder.active,.folder:hover{background:#ffffff0d;color:white}.account{margin-top:auto;display:flex;align-items:center;gap:9px;border-top:1px solid #ffffff14;padding:20px 4px 0;min-width:0}.account>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#183443;color:var(--accent);font-weight:800}.account div{min-width:0;flex:1}.account b,.account small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account b{font-size:12px}.account small{font-size:9px;color:#82909d}.account button{border:0;background:none;color:#9ba8b3;cursor:pointer}.mail{min-width:0;background:white;margin:12px 12px 12px 0;border-radius:18px;overflow:hidden;box-shadow:0 8px 35px #1d31400b}.mail>header{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--line)}.mail h2{margin:0;font:500 25px Georgia,serif}.mail header span{color:var(--muted);font-size:11px}.mail header input{border:0;background:var(--soft);border-radius:20px;padding:10px 16px;width:230px;outline:none}.columns{height:calc(100vh - 108px);display:grid;grid-template-columns:390px 1fr}.messages{border-right:1px solid var(--line);overflow:auto}.message{padding:20px 22px;border-bottom:1px solid var(--line);cursor:pointer}.message:hover,.message.active{background:#f7faf9}.message.unread{border-left:3px solid var(--accent)}.message-top{display:flex;justify-content:space-between;gap:10px}.message b{font-size:13px}.message time{font-size:10px;color:var(--muted)}.message h3{font-size:13px;margin:8px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reader{padding:40px 48px;overflow:auto}.reader.empty{text-align:center;display:grid;place-content:center;color:var(--muted)}.empty-icon{font-size:30px;color:#4abf99}.reader h1{font:500 28px Georgia,serif}.meta{color:var(--muted);font-size:12px;border-bottom:1px solid var(--line);padding-bottom:22px}.body{white-space:pre-wrap;line-height:1.7;margin-top:28px}.reader .delete{float:right;border:1px solid var(--line);background:white;border-radius:8px;padding:8px 12px;cursor:pointer}dialog{border:0;border-radius:16px;padding:0;width:min(620px,90vw);box-shadow:0 30px 100px #07131f55}dialog::backdrop{background:#07131f88}.composer form{padding:0}.composer header{display:flex;justify-content:space-between;padding:18px 22px;background:var(--nav);color:white}.composer header button{border:0;background:none;color:white;font-size:24px}.composer label{display:flex;align-items:center;gap:12px;padding:8px 20px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}.composer input{border:0;box-shadow:none!important}.composer textarea{display:block;width:100%;height:260px;border:0;padding:20px;resize:vertical;outline:none}.composer footer{padding:0 20px 20px;display:flex;align-items:center;gap:16px}.composer footer button{width:auto;margin:0;padding:11px 22px}.composer footer span{font-size:12px;color:var(--muted)}@media(max-width:800px){.login{grid-template-columns:1fr}.login aside{display:none}.app{grid-template-columns:76px 1fr}.app nav{padding:20px 10px}.app nav .brand div,.compose,.folder,.account div,.account button{font-size:0}.compose{font-size:0;height:48px}.compose:after{content:'+';font-size:24px}.folder:before{content:'•';font-size:20px}.columns{grid-template-columns:1fr}.reader{position:fixed;inset:12px;background:white;z-index:3;border-radius:14px}.reader.empty{display:none}.mail{margin:6px}.mail header input{width:145px}}