:root{--brand: #0f6cbd;--brand-hover: #115ea3;--brand-pressed: #0c3b5e;--accent: #0078d4;--sel-bg: #ebf3fc;--hover-bg: #f5f5f5;--stroke: #edebe9;--stroke-strong: #d1d1d1;--bg: #faf9f8;--surface: #ffffff;--fg: #242424;--fg-secondary: #616161;--fg-tertiary: #8a8886;--danger: #c50f1f;--rail-w: 48px;--folder-w: 256px;--list-w: 360px;--header-h: 48px;--font: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);font-size:14px;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer}.hdr{height:var(--header-h);background:var(--brand);display:flex;align-items:center;gap:4px;padding:0 4px 0 0;color:#fff;flex:0 0 auto;position:relative;z-index:30}.hdr-btn{width:48px;height:48px;display:grid;place-items:center;background:none;border:0;color:#fff;border-radius:0}.hdr-btn:hover{background:#ffffff2e}.hdr-brand{font-size:16px;font-weight:600;padding:0 12px 0 4px;letter-spacing:-.01em;white-space:nowrap}.hdr-search{flex:1 1 auto;max-width:720px;margin:0 auto;position:relative;display:flex;align-items:center}.hdr-search svg{position:absolute;left:10px;opacity:.8;pointer-events:none}.hdr-search input{width:100%;height:32px;border:0;border-radius:4px;padding:0 12px 0 34px;font-size:14px;font-family:inherit;background:#ffffff2e;color:#fff}.hdr-search input::placeholder{color:#ffffffd9}.hdr-search input:focus{outline:none;background:#fff;color:var(--fg)}.hdr-search input:focus+.ph,.hdr-search input:focus~svg{color:var(--fg);opacity:1}.hdr-right{display:flex;align-items:center;margin-left:auto}.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;color:#fff;background:#8764b8;flex:0 0 auto;-webkit-user-select:none;user-select:none}.avatar.lg{width:40px;height:40px;font-size:15px}.hdr .avatar{margin:0 8px;box-shadow:0 0 0 2px #fff6}.shell{display:flex;height:100%;flex-direction:column}.body{display:flex;flex:1 1 auto;min-height:0}.rail{width:var(--rail-w);flex:0 0 var(--rail-w);background:var(--bg);border-right:1px solid var(--stroke);display:flex;flex-direction:column;align-items:center;padding-top:8px;gap:2px}.rail-btn{width:40px;height:40px;border:0;border-radius:4px;background:none;color:var(--fg-secondary);display:grid;place-items:center;position:relative}.rail-btn:hover{background:#ebebeb}.rail-btn.on{color:var(--brand);background:#e1efff}.rail-btn.on:before{content:"";position:absolute;left:-4px;top:8px;width:3px;height:24px;border-radius:2px;background:var(--brand)}.folders{width:var(--folder-w);flex:0 0 var(--folder-w);background:var(--bg);border-right:1px solid var(--stroke);display:flex;flex-direction:column;padding:8px;overflow-y:auto}.newmail{display:flex;align-items:center;gap:8px;height:32px;margin-bottom:12px;padding:0 12px;background:var(--brand);color:#fff;border:0;border-radius:4px;font-size:14px;font-weight:600;align-self:flex-start}.newmail:hover{background:var(--brand-hover)}.newmail:active{background:var(--brand-pressed)}.fgroup{font-size:12px;font-weight:600;color:var(--fg-secondary);padding:8px 8px 4px}.fitem{display:flex;align-items:center;gap:8px;width:100%;height:32px;padding:0 8px;border:0;border-radius:4px;background:none;color:var(--fg);font-size:14px;text-align:left}.fitem:hover{background:#ebebeb}.fitem.on{background:#e1efff;font-weight:600}.fitem .nm{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fitem .ct{font-size:12px;color:var(--fg-secondary);font-weight:600}.fitem.on .ct{color:var(--brand)}.list{width:var(--list-w);flex:0 0 var(--list-w);background:var(--surface);border-right:1px solid var(--stroke);display:flex;flex-direction:column;min-height:0}.list-hdr{padding:8px 12px 0;border-bottom:1px solid var(--stroke);flex:0 0 auto}.list-title{display:flex;align-items:center;justify-content:space-between}.list-title h2{margin:0;font-size:15px;font-weight:600}.pivots{display:flex;gap:16px;margin-top:6px}.pivot{background:none;border:0;padding:6px 0 8px;font-size:14px;color:var(--fg-secondary);position:relative}.pivot.on{color:var(--brand);font-weight:600}.pivot.on:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brand);border-radius:2px}.rows{flex:1 1 auto;overflow-y:auto;min-height:0}.row{display:flex;gap:10px;padding:8px 12px 8px 10px;border-bottom:1px solid #f3f2f1;cursor:pointer;position:relative;background:var(--surface)}.row:hover{background:var(--hover-bg)}.row.on{background:var(--sel-bg)}.row.on:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand)}.row.unread .sender{font-weight:700}.row.unread .subj{color:var(--brand);font-weight:600}.row.unread:after{content:"";position:absolute;left:4px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--brand)}.row-main{flex:1 1 auto;min-width:0}.row-line{display:flex;align-items:baseline;gap:8px}.sender{flex:1 1 auto;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.when{flex:0 0 auto;font-size:12px;color:var(--fg-secondary)}.subj{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}.prev{font-size:12px;color:var(--fg-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}.row-icons{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--fg-tertiary);flex:0 0 auto}.star{background:none;border:0;padding:0;color:var(--fg-tertiary);display:grid;place-items:center}.star.on{color:#f2c811}.reader{flex:1 1 auto;background:var(--surface);display:flex;flex-direction:column;min-width:0}.cmdbar{display:flex;align-items:center;gap:2px;padding:6px 12px;border-bottom:1px solid var(--stroke);flex:0 0 auto;flex-wrap:wrap}.cmd{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;background:none;border:0;border-radius:4px;font-size:14px;color:var(--fg)}.cmd:hover{background:var(--hover-bg)}.cmd:disabled{color:var(--fg-tertiary);cursor:default}.cmd:disabled:hover{background:none}.cmd.danger:hover{color:var(--danger)}.sep{width:1px;height:20px;background:var(--stroke);margin:0 6px}.reader-body{flex:1 1 auto;overflow-y:auto;padding:20px 32px 40px;min-height:0}.reader h1{font-size:21px;font-weight:600;margin:0 0 16px;line-height:1.3}.msg-hdr{display:flex;gap:12px;align-items:flex-start;margin-bottom:20px}.msg-hdr-main{flex:1 1 auto;min-width:0}.msg-from{font-size:14px;font-weight:600}.msg-to{font-size:12px;color:var(--fg-secondary);margin-top:2px;overflow-wrap:anywhere}.msg-date{font-size:12px;color:var(--fg-secondary);white-space:nowrap}.msg-content{font-size:14px;line-height:1.6;overflow-wrap:anywhere}.msg-content img{max-width:100%;height:auto}.msg-content pre{white-space:pre-wrap;font-family:inherit;margin:0}.msg-content blockquote{margin:12px 0;padding-left:12px;border-left:2px solid var(--stroke-strong);color:var(--fg-secondary)}.atts{margin:16px 0;display:flex;gap:8px;flex-wrap:wrap}.att{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--stroke);border-radius:4px;background:var(--bg);font-size:13px;color:var(--fg);text-decoration:none}.att:hover{background:#f0f0f0}.empty{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--fg-secondary);text-align:center;padding:40px}.empty h3{margin:0;font-size:17px;font-weight:600;color:var(--fg)}.empty p{margin:0;font-size:13px;max-width:320px}.compose{position:fixed;right:24px;bottom:0;width:640px;max-width:calc(100vw - 48px);height:560px;max-height:calc(100vh - 80px);background:var(--surface);border:1px solid var(--stroke-strong);border-bottom:0;border-radius:6px 6px 0 0;box-shadow:0 8px 32px #00000038;display:flex;flex-direction:column;z-index:40}.compose-hdr{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--stroke);background:var(--bg);border-radius:6px 6px 0 0}.compose-hdr strong{flex:1 1 auto;font-size:14px;font-weight:600}.icon-btn{width:28px;height:28px;border:0;border-radius:4px;background:none;color:var(--fg-secondary);display:grid;place-items:center}.icon-btn:hover{background:#e5e5e5;color:var(--fg)}.field{display:flex;align-items:center;border-bottom:1px solid var(--stroke);padding:0 12px}.field label{width:58px;flex:0 0 58px;font-size:13px;color:var(--fg-secondary)}.field input{flex:1 1 auto;height:36px;border:0;outline:none;font-size:14px;font-family:inherit;color:var(--fg)}.compose textarea{flex:1 1 auto;border:0;outline:none;resize:none;padding:12px;font-size:14px;font-family:inherit;line-height:1.6;color:var(--fg);min-height:0}.compose-foot{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--stroke)}.send{display:flex;align-items:center;gap:6px;height:32px;padding:0 16px;background:var(--brand);color:#fff;border:0;border-radius:4px;font-size:14px;font-weight:600}.send:hover:not(:disabled){background:var(--brand-hover)}.send:disabled{background:#c8c6c4;cursor:default}.note{font-size:12px;margin-left:auto}.note.err{color:var(--danger)}.note.ok{color:#0e700e}.login{height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#0f6cbd,#0c3b5e);padding:24px}.login-card{width:100%;max-width:400px;background:#fff;padding:40px 44px;border-radius:2px;box-shadow:0 2px 12px #00000040}.login-card h1{margin:0 0 4px;font-size:24px;font-weight:600}.login-card p.sub{margin:0 0 24px;font-size:13px;color:var(--fg-secondary)}.login-card label{display:block;font-size:13px;margin:14px 0 4px;font-weight:600}.login-card input{width:100%;height:36px;padding:0 10px;border:1px solid var(--stroke-strong);border-radius:2px;font-size:14px;font-family:inherit}.login-card input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}.login-card .send{width:100%;justify-content:center;margin-top:24px;height:36px}.login-err{margin-top:14px;font-size:13px;color:var(--danger)}.login-hint{margin-top:24px;padding-top:16px;border-top:1px solid var(--stroke);font-size:12px;color:var(--fg-secondary);line-height:1.7}.login-hint code{background:var(--bg);padding:1px 5px;border-radius:3px;font-size:11px}.spin{width:20px;height:20px;border-radius:50%;border:2px solid var(--stroke-strong);border-top-color:var(--brand);animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.center{display:grid;place-items:center;padding:40px}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:#323130;color:#fff;padding:12px 20px;border-radius:4px;font-size:14px;z-index:60;box-shadow:0 4px 16px #0000004d;max-width:90vw}.toast.err{background:var(--danger)}@media(max-width:1100px){:root{--list-w: 300px;--folder-w: 220px}}@media(max-width:860px){.folders{display:none}.list{flex:1 1 auto;width:auto}.reader{display:none}.reader.open{display:flex;position:fixed;inset:var(--header-h) 0 0 0;z-index:20}.compose{right:0;left:0;width:auto;max-width:none}}