:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;height:100%;min-height:100%;overflow:hidden}
body{--bg:#f4f5f7;--paper:#fff;--sidebar:#f9fafb;--ink:#202733;--softink:#465366;--mute:#84909f;--line:#e7eaee;--line-strong:#d9dfe6;--soft:#f3f5f7;--hover:#f0f3f6;--selected:#fff2e8;--selected-ink:#ac5219;--accent:#f18b42;--accent-hover:#f59a57;--accent-strong:#c96b29;--reader:#f6f7f8;--shadow:0 16px 55px #1d293a17;--white:#fff;--soft2:#eff1f4;--line-highlight:#d9dfe6;background:var(--bg);color:var(--ink);font-size:13px;line-height:1.5}
body.dark{color-scheme:dark;--bg:#151b23;--paper:#222b36;--sidebar:#1b242f;--ink:#edf0f4;--softink:#d0d6df;--mute:#9aa7b8;--line:#34404e;--line-strong:#465262;--soft:#273440;--hover:#2c3a48;--selected:#523926;--selected-ink:#ffc38d;--accent:#f18b42;--accent-hover:#ffa566;--accent-strong:#f9aa71;--reader:#19222c;--shadow:0 18px 60px #05090ed0;--white:#f8fafc;--soft2:#2a3544;--line-highlight:#465262}
button,input,textarea,select{font:inherit}
button{cursor:pointer;border:1px solid var(--line-strong);border-radius:9px;color:var(--ink);background:var(--paper);padding:9px 12px;transition:background .16s,border .16s,transform .16s}
button:hover{background:var(--hover);border-color:var(--accent)}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button:disabled{opacity:.5;cursor:not-allowed}
input,textarea,select{display:block;width:100%;border:1px solid var(--line-strong);background:var(--paper);border-radius:9px;color:var(--ink);padding:11px 12px;min-width:0}
input::placeholder,textarea::placeholder{color:var(--mute)}
textarea{resize:vertical;min-height:115px}
label{display:block;margin:12px 0;font-size:12px;font-weight:680;color:var(--softink)}
label input,label select,label textarea{margin-top:6px;font-weight:400}
h1,h2,h3,p{margin-top:0}
p{color:var(--mute)}
h1{font-size:26px;letter-spacing:-.9px;line-height:1.2}
h2{font-size:20px;letter-spacing:-.5px}
h3{font-size:15px}
small,.hint{font-size:11px;color:var(--mute)}
[hidden],.svg-defs{display:none!important}
.ico{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.primary{background:var(--accent);color:#2e2013;border-color:var(--accent);font-weight:750}
.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.eyebrow,.nav-label{color:var(--mute);font-size:10px;font-weight:850;letter-spacing:1.4px}
.brand{display:flex;align-items:center;gap:8px;font-size:24px;font-weight:850;letter-spacing:-1.1px;white-space:nowrap;color:var(--ink)}
.brand b{color:var(--accent-strong)}
.brand-mark{color:var(--accent);font-size:25px;line-height:1}
.brand .kw-mail-brand-img{display:none}
.brand.has-kw-logo{font-size:0;min-height:32px}
.brand.has-kw-logo .kw-mail-brand-img{display:block;width:auto;max-width:min(228px,95%);max-height:50px;object-fit:contain}
.brand.has-kw-logo .brand-mark,.brand.has-kw-logo>span:not(.kw-mail-brand-img){display:none}
.top-brand.has-kw-logo .kw-mail-brand-img{max-width:155px;max-height:35px}
.icon-button{display:inline-grid;place-items:center;width:35px;height:35px;padding:0;border-color:transparent;background:transparent;color:var(--softink)}
.icon-button:hover{background:var(--soft);border-color:var(--line)}
.icon-button .ico{width:18px;height:18px}
.auth{display:grid;place-items:center;position:relative;overflow:auto;min-height:100dvh;padding:22px;background:radial-gradient(ellipse at 76% 16%,#f6b17b38,transparent 35%),linear-gradient(145deg,var(--bg),var(--reader))}
.auth-glow{width:560px;height:560px;border:1px solid #f18b4233;transform:rotate(24deg);border-radius:85px;position:absolute;right:-110px;top:-250px;pointer-events:none}
.panel{z-index:1;width:min(430px,100%);padding:34px 38px 23px;border-radius:22px;border:1px solid var(--line);background:var(--paper);box-shadow:var(--shadow)}
.auth-kicker{font-weight:800;letter-spacing:2px;font-size:10px;color:var(--accent-strong);margin-bottom:17px}
.auth-logo{font-size:23px;margin-bottom:31px}
.auth h1{font-size:31px;line-height:1.2;margin-bottom:12px}
.auth h1 em{font-style:normal;color:var(--accent-strong)}
.auth p{font-size:12px;margin-bottom:26px}
.auth .auth-submit{margin-top:15px;width:100%;display:flex;align-items:center;justify-content:space-between;padding:13px 15px}
.auth-submit span{font-size:20px;font-weight:400}
.auth .error{color:#c74342;min-height:20px;margin:12px 0}
.auth-footer{border-top:1px solid var(--line);padding-top:15px;color:var(--mute);font-size:10px}
.auth.has-kw-login-background{background-image:linear-gradient(110deg,#0f1620b8,#0f162078),var(--kw-mail-login-background);background-position:center;background-size:cover;background-repeat:no-repeat}
.auth.has-kw-login-background .panel{background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(18px)}
.topbar{height:64px;background:var(--paper);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 20px;gap:15px}
.top-left,.top-right{display:flex;align-items:center;gap:14px;min-width:0}
.top-brand{font-size:23px}.top-brand .brand-mark{font-size:25px}
.top-context{font-size:11px;font-weight:550;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-separator{height:22px;width:1px;background:var(--line-strong)}
.workspace-state{font-size:11px;color:var(--mute);white-space:nowrap}
.live-dot{display:inline-block;width:7px;height:7px;margin-right:6px;border:2px solid var(--accent);border-radius:50%}
.user-avatar{width:31px;height:31px;background:var(--selected);border:1px solid #eead7d66;color:var(--selected-ink);display:grid;place-items:center;border-radius:10px;font-size:10px;font-weight:900}
.nav-toggle{display:none}
.layout{height:calc(100dvh - 64px);min-height:0;display:grid;grid-template-columns:238px clamp(310px,31vw,395px) minmax(270px,1fr)}
.layout>aside,.layout>section,.layout>article{min-width:0;min-height:0}
#sidebar{background:var(--sidebar);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:auto;padding:19px 12px 12px}
.sidebar-main{flex:1}
.compose-btn{height:42px;width:100%;display:flex;justify-content:center;align-items:center;gap:9px;border-radius:10px;box-shadow:0 6px 15px #ec84332b}
.nav-label{margin:28px 9px 10px}
.nav-label.label-with-action{display:flex;align-items:center;justify-content:space-between}
.small-icon-btn{padding:2px;border:0;background:transparent;display:grid;place-items:center;color:var(--mute)}
.small-icon-btn .ico{width:16px;height:16px}
#accounts,#folders,#smartNav{display:grid;gap:3px}
.nav-item{width:100%;display:flex;align-items:center;gap:10px;padding:10px 11px;border:0;background:transparent;text-align:left;color:var(--softink);border-radius:9px;min-width:0;font-size:12px}
.nav-item>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.nav-item:hover{background:var(--hover);border-color:transparent}
.nav-item.active{background:var(--selected);color:var(--selected-ink);font-weight:740}
.nav-item.active .ico{color:var(--accent-strong)}
.nav-item .ico{width:17px;height:17px}
.counter{padding:1px 6px;font-size:10px;min-width:18px;text-align:center;background:var(--soft);border-radius:6px;color:var(--softink)}
.nav-item.active .counter{background:#e6ba9555;color:var(--selected-ink)}
.account-row .account-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-left:5px}
.account-row.is-catchall .account-dot{background:#8d9cae}
.account-row .account-indicator{font-weight:800;color:var(--mute);font-size:10px}
.sidebar-bottom{border-top:1px solid var(--line);padding-top:13px;margin-top:18px}
.sidebar-notice{display:flex;align-items:center;gap:11px;padding:10px 11px;margin:0 0 9px;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.notice-symbol{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border-radius:10px;background:#f18b4222;color:var(--accent-strong);font-size:20px}
.sidebar-notice b,.sidebar-notice small{display:block;font-size:11px;line-height:1.45}
.sidebar-notice small{font-size:10px}
.settings-btn{color:var(--mute)}
.list-panel{background:var(--paper);border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;min-height:0}
.list-top{flex-shrink:0;padding:26px 20px 0;border-bottom:1px solid var(--line)}
.list-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin:7px 0 18px}
.list-heading h1{font-size:25px;margin:0 0 4px}
.list-heading p{font-size:11px;margin:0}
.sync-btn{border:1px solid var(--line);background:var(--soft);flex:0 0 36px}
.sync-btn.syncing .ico{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.search-box{display:flex;align-items:center;gap:9px;background:var(--soft);border:1px solid transparent;border-radius:10px;padding:0 10px;color:var(--mute)}
.search-box:focus-within{border-color:var(--accent)}
.search-box>.ico{width:16px;height:16px}
.search-box input{padding:11px 0;background:transparent;border:0;outline:0;box-shadow:none;width:100%;font-size:12px}
.search-box input:focus{outline:0}
.search-box kbd{border:1px solid var(--line);border-radius:5px;font:10px/1 ui-sans-serif,system-ui,sans-serif;padding:4px 5px;white-space:nowrap}
.list-filters{display:flex;justify-content:space-between;align-items:center;margin:17px 0 12px;gap:8px}
.filter-group{display:flex;gap:4px}
.filter-button{font-size:11px;font-weight:650;padding:6px 12px;border-color:transparent;background:transparent;border-radius:7px;color:var(--mute)}
.filter-button.selected{background:var(--selected);color:var(--selected-ink)}
.filter-counter{font-size:10px;color:var(--mute);white-space:nowrap}
.messages{min-height:0;overflow:auto;flex:1}
.item{display:flex;gap:11px;align-items:flex-start;min-width:0;position:relative;cursor:pointer;padding:15px 17px;border-bottom:1px solid var(--line);transition:background .12s}
.item:hover{background:var(--soft)}
.item.active{background:var(--selected)}
.item.unread:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;background:var(--accent);border-radius:0 3px 3px 0}
.avatar-initials{width:37px;height:37px;flex:0 0 37px;display:grid;place-items:center;border-radius:12px;background:var(--soft);color:var(--softink);font-size:12px;font-weight:850}
.item.unread .avatar-initials{background:#f18b4229;color:var(--accent-strong)}
.item-main{flex:1;min-width:0}
.item-line{display:flex;justify-content:space-between;gap:6px;align-items:baseline}
.item strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:650;max-width:70%}
.item.unread strong,.item.unread .subject{font-weight:850}
.item time{font-size:10px;white-space:nowrap;color:var(--mute)}
.item .subject{font-size:12px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px}
.item .sub{font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mute);margin-top:4px}
.item-account{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:var(--mute);margin-top:5px}
.item-account:before{content:"";width:5px;height:5px;background:var(--accent);border-radius:50%}
.list-footer{display:flex;justify-content:space-between;gap:10px;padding:11px 17px;border-top:1px solid var(--line);font-size:10px;color:var(--mute);white-space:nowrap}
.list-footer span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.reader-panel{background:var(--reader);position:relative;min-height:0;overflow:auto;padding:20px}
.read-empty{min-height:100%;max-width:350px;margin:auto;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:20px;gap:7px}
.read-empty h2{font-size:24px;margin:4px 0}
.read-empty p{max-width:300px;font-size:12px;line-height:1.7;margin:0}
.empty-illustration{position:relative;height:172px;width:180px;margin:0 0 18px}
.illus-card{position:absolute;border-radius:14px;background:var(--paper);border:1px solid var(--line-strong);height:98px;width:135px;left:23px;top:25px;box-shadow:0 8px 20px #0000000a}
.illus-card.one{transform:rotate(-14deg);left:5px;top:26px}
.illus-card.two{transform:rotate(9deg);left:35px;top:12px}
.illus-envelope{width:94px;height:78px;display:grid;place-items:center;background:var(--accent);border-radius:20px;position:absolute;left:44px;top:55px;box-shadow:0 12px 26px #f18b4248;transform:rotate(-5deg);color:#fff}
.illus-envelope .ico{height:45px;width:45px;stroke-width:1.3}
.read-card{background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:23px;max-width:850px;min-height:calc(100% - 2px);box-shadow:0 6px 28px #00000005}
.reader-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.reader-actions,.buttons{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.reader-actions button{display:flex;align-items:center;gap:7px;font-size:11px}
.reader-actions .ico{width:14px;height:14px}
.reader-header .back-button{display:none}
.read-card h2{font-size:25px;letter-spacing:-.7px;overflow-wrap:anywhere;line-height:1.25;margin:25px 0 14px}
.reader-person{display:flex;gap:11px;align-items:center;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.reader-person .avatar-initials{width:42px;height:42px;flex-basis:42px}
.reader-address{flex:1;min-width:0}
.reader-address strong,.reader-address small{display:block;overflow-wrap:anywhere}
.reader-address strong{font-weight:800}
.reader-address small{margin-top:2px}
.reader-date{font-size:10px;color:var(--mute);text-align:right}
.reader-body{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.75 Inter,ui-sans-serif,system-ui,sans-serif;margin:24px 0;color:var(--ink)}
.reader-placeholder{font-size:12px;line-height:1.65;padding:15px;background:var(--soft);border-radius:10px}
.reader-attachments{border-top:1px solid var(--line);padding-top:16px;margin-top:26px}
.attachment-row{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-top:8px;font-size:11px;overflow-wrap:anywhere}
.attachment-row .ico{color:var(--accent-strong)}
.attachment-row small{margin-left:auto}
.reader-bottom{display:flex;gap:8px;padding-top:20px;margin-top:20px;border-top:1px solid var(--line)}
.reader-bottom button{display:flex;gap:7px;align-items:center;font-size:11px}
.reader-bottom .primary{color:#2e2013}
.reader-bottom .ico{width:15px;height:15px}
.state-container{min-height:290px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:27px}
.state-icon{display:grid;place-items:center;width:54px;height:54px;background:var(--selected);border-radius:17px;color:var(--accent-strong)}
.state-icon .ico{width:26px;height:26px}
.state-container h2{margin:7px 0 0;font-size:17px}
.state-container p{max-width:280px;font-size:12px;margin:0 0 10px;line-height:1.6}
.state-container .primary{font-size:12px}
.state-container .hint{max-width:300px}
.overlay{position:fixed;inset:0;background:#0c1624ac;display:grid;place-items:center;padding:15px;z-index:90}
.dialog{width:min(730px,100%);max-height:min(92dvh,800px);overflow:auto;overscroll-behavior:contain;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:23px 25px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:15px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.modal-head h2{margin:4px 0 0;font-size:21px}
.modal-head .eyebrow{font-size:9px}
.dialog h3{margin:20px 0 8px}
.dialog .primary{font-size:12px}
.dialog .buttons{margin:12px 0}
.dialog .hint{line-height:1.6}
.dialog label{font-size:12px}
.dialog .check{display:flex;gap:9px;align-items:center;font-weight:500}
.dialog .check input{display:inline-block;width:17px;height:17px;margin:0;flex:0 0 17px;accent-color:var(--accent)}
.dialog .account{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--line);border-radius:11px;padding:12px;margin:10px 0}
.dialog .account-details{display:grid;gap:2px;min-width:0;overflow-wrap:anywhere}
.dialog .account-details strong{font-size:13px}
.dialog .account-details span{font-size:11px;color:var(--mute)}
.dialog .account .buttons{margin:0}
.connection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 13px}
.connection-heading{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}
.connection-notice{padding:12px 14px;border:1px solid var(--line);background:var(--soft);border-radius:10px;font-size:11px;color:var(--softink);margin:14px 0}
.server-settings{margin-top:14px;padding:0 14px;border:1px solid var(--line);border-radius:10px}
.server-settings summary{padding:13px 0;cursor:pointer;font-weight:750;display:flex;justify-content:space-between;align-items:center}
.server-settings summary span{color:var(--accent-strong)}
.server-settings[open] summary{border-bottom:1px solid var(--line)}
.server-settings[open] summary span{transform:rotate(180deg)}
.connection-actions{margin-top:18px}
.compose-form label{margin:12px 0}.compose-form textarea{min-height:220px;line-height:1.65}
.compose-fields{display:grid;grid-template-columns:1fr;gap:0}
.compose-actions{border-top:1px solid var(--line);padding-top:14px;display:flex;gap:8px;align-items:center;justify-content:space-between}
.compose-actions button{display:flex;align-items:center;gap:7px}
.compose-actions .ico{width:15px;height:15px}
.toast{position:fixed;bottom:18px;right:18px;max-width:min(420px,calc(100vw - 24px));padding:13px 18px;background:var(--ink);color:var(--paper);font-size:12px;border-radius:12px;box-shadow:var(--shadow);z-index:110}
.mobile-scrim{display:none}
@media (max-width:1100px){.layout{grid-template-columns:205px 330px minmax(240px,1fr)}#sidebar{padding:16px 9px}.list-top{padding:21px 15px 0}.item{padding:13px}.reader-panel{padding:12px}.read-card{padding:18px}.reader-actions button{padding:7px}.reader-actions .ico{width:13px}}
@media (max-width:880px){
 .nav-toggle{display:grid}
 .top-context{display:none}
 #sidebar{position:fixed;z-index:60;top:64px;bottom:0;left:0;width:255px;box-shadow:var(--shadow);transform:translateX(-110%);transition:transform .2s ease}
 body.nav-open #sidebar{transform:translateX(0)}
 body.nav-open .mobile-scrim{display:block;position:fixed;z-index:55;inset:64px 0 0;background:#0b13256b}
 .layout{grid-template-columns:minmax(300px,42%) minmax(290px,1fr)}
 .topbar{padding:0 12px}.workspace-state{display:none}
}
@media (max-width:640px){
 .layout{display:block}.list-panel{height:100%;border-right:0}
 .reader-panel{display:none}
 .reader-panel.open{display:block;position:fixed;z-index:40;inset:64px 0 0;overflow:auto;padding:12px}
 .reader-header .back-button{display:flex}
 .list-top{padding:18px 15px 0}
 .reader-panel .read-card{min-height:100%}
 .top-brand{font-size:20px}
 .top-right{gap:5px}
 .top-separator{display:none}
 .search-box kbd{display:none}
 .dialog{max-height:95dvh;padding:18px}
}
@media (max-width:450px){.connection-grid{grid-template-columns:1fr}.auth .panel{padding:28px 25px}.auth h1{font-size:26px}.list-heading h1{font-size:22px}.top-brand .brand-mark{display:none}.sidebar-notice{display:none}.reader-actions{gap:5px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* Short NOVA windows: keep the first-account call to action fully visible. */
@media(max-height:640px){
 .list-top{padding-top:12px}
 .list-heading{margin:4px 0 10px}
 .list-heading h1{font-size:21px}
 .search-box input{padding:8px 0}
 .list-filters{margin:9px 0 8px}
 .list-footer{padding:7px 11px}
 .state-container{min-height:0;padding:10px 14px;gap:5px}
 .state-icon{width:39px;height:39px;border-radius:12px}
 .state-icon .ico{width:20px;height:20px}
 .state-container h2{font-size:15px;margin:3px 0 0}
 .state-container p{font-size:11px;line-height:1.45;margin:0 0 5px}
 .state-container .hint{display:none}
 .state-container .primary{padding:7px 11px;font-size:11px}
 .read-empty{padding:10px}
 .empty-illustration{height:130px;transform:scale(.85);margin-bottom:0}
}

/* Personal account / login security: separate from provider mailbox credentials. */
.user-avatar{padding:0;cursor:pointer;flex-shrink:0}.user-avatar:hover{border-color:var(--accent)}.my-account-summary{display:flex;gap:12px;align-items:center;background:var(--soft);border:1px solid var(--line);padding:12px;border-radius:12px;margin-bottom:16px}.my-account-summary strong,.my-account-summary small{display:block}.my-account-summary strong{font-size:14px}.my-account-summary small{color:var(--mute);margin-top:2px}.profile-avatar{width:40px;height:40px;flex-shrink:0;cursor:default;pointer-events:none}.form-error{border:1px solid #d56b6b;background:color-mix(in srgb,#d56b6b 10%,transparent);padding:9px 11px;border-radius:9px;font-size:12px;color:#b63c3c}.dark .form-error{color:#ffaaa0}#loginError.success{color:#37835b}.dark #loginError.success{color:#83dcaa}.account-security-actions{padding-top:6px;gap:8px}.account-security-actions button{min-height:37px}#changePasswordForm .hint{margin:6px 0 10px}#changePasswordForm input:focus{border-color:var(--accent)}