:root{font-family:"Segoe UI",sans-serif;color:#142c3b;background:#062e46;color-scheme:light;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;background:#062e46;isolation:isolate}
#ocean-background{position:fixed;inset:-24px;background:#062e46 url('/landscape.svg') center/cover;pointer-events:none;z-index:0}
#ocean-ripples{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
::selection{background:#b9e6ee;color:#12374a}
main{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px}
.panel{width:100%;max-width:408px;padding:42px 36px 36px;background:#f9fcfd;border-radius:16px;box-shadow:0 24px 80px #00000030}
h1{font-size:32px;font-weight:650;letter-spacing:-.035em;margin:0 0 34px;line-height:1.2}
label{display:block;font-size:12px;font-weight:600;line-height:1.5;margin:22px 0 9px;color:#334e60}
input,select{min-width:0;appearance:none;background:#edf3f6;border:1px solid transparent;color:#142c3b;border-radius:8px;font:14px/1.5 "Segoe UI",sans-serif;caret-color:#086c91;transition:background .18s,border-color .18s}
input{width:100%;height:52px;padding:0 15px}
input::placeholder{color:#506778;opacity:1}
input:hover,select:hover{background:#e7f0f4}
input:focus,select:focus{background:#fff;border-color:#2288af;outline:none}
input:focus-visible,button:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid #168db8;outline-offset:3px}
.password-row{position:relative;display:flex;align-items:center}
.password-row input{padding-right:65px}
button{font:600 12px/1.5 "Segoe UI",sans-serif;cursor:pointer;border:0;border-radius:8px;padding:11px 14px;color:#294b60;background:#eaf1f5;transition:background .18s,transform .18s}
button:hover{background:#dfebf1}
.password-row button{position:absolute;right:6px;background:transparent;color:#46657a;font-size:11px;padding:12px}
.password-row button:hover{color:#04749c}
.primary{display:flex;align-items:center;justify-content:space-between;width:100%;height:52px;margin-top:28px;padding:0 17px;background:#086a91;color:#fff;font-size:13px}
.primary:hover{background:#075777;transform:translateY(-1px)}
.primary:active{transform:translateY(0)}
button:disabled{opacity:.5;cursor:default;transform:none}
#status{width:100%;max-width:408px;margin:16px 0 0;font-size:13px;line-height:1.6;color:#294b60;background:#f9fcfd;border-radius:8px;padding:10px 14px;text-align:center;text-wrap:pretty}
#status:empty{display:none}
#login-title{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;text-align:center;font-size:44px;font-weight:650;letter-spacing:-.04em;line-height:1.15;margin-bottom:34px}
.wordmark{display:inline-block;color:#173f53;animation:shore-reveal .85s cubic-bezier(.16,1,.3,1) both}
.wordmark strong{font-weight:700}
#login-title .brand-prefix{font-weight:350;color:#406879}#login-title .brand-dot{display:inline-block;color:#078dab;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.logo-wave{color:#148ba5;overflow:visible}
.logo-wave path{stroke-dasharray:120;stroke-dashoffset:0;animation:wave-draw .95s .15s cubic-bezier(.16,1,.3,1) both}
#login-title:hover .brand-dot{transform:translateY(-3px)}
#login-title:hover .logo-wave path{animation:wave-draw .85s cubic-bezier(.16,1,.3,1) both}
@keyframes shore-reveal{from{clip-path:inset(0 100% 0 0);filter:blur(2px)}to{clip-path:inset(0);filter:blur(0)}}
@keyframes wave-draw{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.mailbox-open main{padding:30px}
.inbox{max-width:1280px;height:calc(100svh - 60px);max-height:940px;min-height:480px;padding:0;display:flex;flex-direction:column;overflow:hidden}
.inbox-top{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:24px 28px;border-bottom:1px solid #dce8ee;flex-shrink:0;background:#f9fcfd}
.mailbox-identity{min-width:0}.inbox-title-row{display:flex;align-items:center;gap:10px;margin-bottom:5px}
h2{font-size:22px;font-weight:650;letter-spacing:-.025em;margin:0}
.count-badge{font-size:11px;font-weight:600;border-radius:6px;background:#e5f0f4;color:#315b70;padding:2px 7px;font-variant-numeric:tabular-nums}
.muted{color:#557083;font-size:12px;line-height:1.6;margin:0;overflow-wrap:anywhere}
.inbox-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
#sync-status{color:#557083;font-size:11px;margin-right:10px}
.quiet-button{background:transparent}.quiet-button:hover{background:#eaf1f5}
.mail-workspace{display:grid;grid-template-columns:350px minmax(0,1fr);min-height:0;flex:1}
.message-pane{display:flex;flex-direction:column;min-height:0;border-right:1px solid #dce8ee;background:#f5f9fb}
.list-tools{padding:20px 18px 12px;display:grid;gap:14px;flex-shrink:0}
.search-wrap{position:relative;display:flex;align-items:center;color:#557083}
.search-wrap>svg{position:absolute;left:12px;pointer-events:none}
.search-wrap input{height:42px;padding:0 36px;background:#e8f0f4;font-size:12px}
.search-wrap kbd{position:absolute;right:13px;font:11px "Segoe UI",sans-serif;color:#557083;pointer-events:none}
.search-wrap:focus-within kbd,.search-wrap:has(input:not(:placeholder-shown)) kbd{display:none}
.filter-row{display:flex;justify-content:space-between;align-items:center;gap:6px}
.message-filters{display:flex;gap:3px;align-items:center}
.message-filters button{padding:7px 9px;font-size:11px;white-space:nowrap;background:transparent;color:#506b7e}
.message-filters button[aria-pressed="true"]{background:#deedf3;color:#174f69}
#unread-count{font-size:11px;padding:0 0 0 3px;font-variant-numeric:tabular-nums}
select{height:34px;padding:0 25px 0 10px;font-size:11px;cursor:pointer;appearance:auto}
#sort{background-color:transparent;max-width:115px}#sender{width:100%;text-overflow:ellipsis}
.list-caption{display:flex;align-items:center;justify-content:space-between;min-height:35px;padding:0 20px 9px;font-size:11px;color:#557083;flex-shrink:0}
#clear-filters{font-size:11px;background:transparent;padding:3px;color:#086a91}
#messages{overflow:auto;overscroll-behavior:contain;flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:#b9d0dc transparent}
#messages:empty{display:none}
.message-row{display:block;width:100%;padding:19px 20px;text-align:left;border-radius:0;background:transparent;border-top:1px solid #e2ebf0;position:relative}
.message-row:hover{background:#eaf2f6}.message-row.selected{background:#e0eef4}
.message-row:focus-visible{outline-offset:-3px}
.row-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.row-sender{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:450;color:#45667a;min-width:0}
.row-top time{font-size:11px;font-weight:400;color:#557083;white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}
.row-subject{display:block;font-size:13px;font-weight:500;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#243e50}
.unread .row-subject{font-weight:650}.unread .row-subject:before{content:"";display:inline-block;vertical-align:middle;width:6px;height:6px;border-radius:50%;background:#087fa7;margin-right:7px;margin-bottom:2px}
.row-preview{display:block;font-size:11px;line-height:1.6;font-weight:400;color:#557083;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-top:4px}
.reader-pane{min-width:0;min-height:0;display:flex;flex-direction:column;background:#fff}
.reader-toolbar{height:62px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 28px;border-bottom:1px solid #e7eef2;flex-shrink:0}
#reader-position{font-size:11px;color:#557083;font-variant-numeric:tabular-nums}
.reader-navigation{display:flex;gap:6px}.reader-navigation button{display:grid;place-items:center;padding:9px;background:transparent}.reader-navigation button:not(:disabled):hover{background:#eaf1f5}
#back-to-list{display:none}
#reader-scroll{overflow:auto;overscroll-behavior:contain;flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:#b9d0dc transparent}
#reader-scroll:focus-visible{outline-offset:-3px}
#reader-content{padding:36px 38px 50px}
#message-subject{font-size:24px;font-weight:650;letter-spacing:-.025em;line-height:1.35;overflow-wrap:anywhere;max-width:35ch}
#message-subject:focus{outline:none}
.message-meta{display:flex;align-items:center;gap:12px;margin:25px 0 30px;min-width:0}
#sender-avatar{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;background:#edf4f7;border-radius:10px;color:#25617d;font-size:13px;font-weight:600}
.message-meta>div{min-width:0}.message-meta p{margin:0}
#message-from{font-size:12px;font-weight:600;line-height:1.6;overflow-wrap:anywhere}
#message-date{font-size:11px;color:#557083;line-height:1.6;margin-left:auto;text-align:right;flex-shrink:0;max-width:125px}
#code-panel{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#eaf5f7;padding:20px 22px;border-radius:12px;margin-bottom:30px}
.code-label{display:block;font-size:11px;font-weight:500;color:#416778;margin-bottom:8px}
#verification-code{font-size:28px;font-weight:600;letter-spacing:.12em;color:#174d65;font-variant-numeric:tabular-nums;user-select:all}
#copy-code{background:#086a91;color:#fff;white-space:nowrap}#copy-code:hover{background:#075777}
#message-body{font-size:14px;line-height:1.9;color:#304f62;white-space:pre-wrap;overflow-wrap:anywhere;max-width:72ch}
.reader-empty{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px;color:#557083}
.reader-empty svg{color:#7194a6;margin-bottom:18px}
.reader-empty h3,.empty-state h3{font-size:16px;font-weight:550;letter-spacing:-.02em;color:#36566a;margin:0 0 8px}
.reader-empty p,.empty-state p{font-size:12px;line-height:1.7;margin:0}
.empty-state{padding:36px 22px;text-align:center;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;color:#557083}
.empty-state button{margin-top:12px}
#inbox-status{flex-shrink:0;margin:0;font-size:11px;line-height:1.5;color:#36566a;background:#edf5f8;padding:10px 24px;border-top:1px solid #dce8ee}
#inbox-status:empty{display:none}
@media(max-width:1050px){.mail-workspace{grid-template-columns:310px minmax(0,1fr)}#reader-content{padding:30px 26px}.message-meta{flex-wrap:wrap}#message-date{flex-basis:100%;margin:0 0 0 48px;max-width:none;text-align:left}#sync-status{display:none}.filter-row{gap:0}.message-filters button{padding:7px}.row-top{gap:8px}}
@media(max-width:760px){body.mailbox-open main{padding:0;justify-content:flex-start}.inbox{max-height:none;height:100svh;min-height:0;border-radius:0;box-shadow:none}.inbox-top{padding:18px 20px;gap:12px}.inbox-actions{gap:2px}.inbox-actions button{padding:10px}.mailbox-identity .muted{max-width:45vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-workspace{display:flex;flex-direction:column;overflow:hidden}.message-pane{border:0;flex:1;min-height:0}.reader-pane{display:none;flex:1;min-height:0}.reading .message-pane{display:none}.reading .reader-pane{display:flex}.reader-toolbar{padding:0 16px;height:58px;gap:8px}#back-to-list{display:block;padding:10px 5px}#reader-position{margin-left:auto}.reader-navigation{gap:0}.reader-navigation button{padding:10px}.list-tools{padding:18px 20px 12px;gap:13px}.message-filters button{padding:8px 12px}#sort{max-width:130px}.row-top time{max-width:140px}.message-row{padding:18px 22px}.row-sender{font-size:12px}.row-subject{font-size:14px}.row-preview{font-size:12px}.list-caption{padding:0 22px 10px}#reader-content{padding:28px 24px 40px}#message-subject{font-size:23px}#inbox-status{padding:9px 20px}#code-panel{padding:18px;gap:12px}#verification-code{font-size:25px}}
@media(max-width:520px){main{padding:24px}.panel:not(.inbox){padding:32px 26px}h1{margin-bottom:28px}}
.motion-toggle{display:block;margin:18px auto -6px;padding:8px 12px;font-size:11px;font-weight:400;background:transparent;color:#557083}
.help-link{display:block;text-align:center;font-size:11px;color:#406879;margin-top:17px;text-underline-offset:3px}
.inbox-help{font-size:12px;color:#294b60;padding:10px 8px;text-decoration:none}
.help-link:focus-visible,.inbox-help:focus-visible{outline:2px solid #168db8;outline-offset:3px}
body.motion-paused *{transition:none!important;animation:none!important}
body.motion-paused #ocean-ripples{display:none}
body.motion-paused #login-title:hover .brand-dot{transform:none}
[hidden]{display:none!important}