:root{--brand:#0F6CBD;--brand-d:#115EA3;--sel:#EBF3FC;--line:#E0E0E0;--text:#242424;--mute:#616161;--bad:#C4314B;--ok:#107C10}
*{box-sizing:border-box}[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{font:14px/1.4 "Segoe UI","Segoe UI Variable",system-ui,-apple-system,Roboto,sans-serif;color:var(--text);background:linear-gradient(135deg,#dfe9f6,#e9e4f3 55%,#f1e8ef);overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid transparent;background:none;border-radius:4px;padding:5px 10px}
button:hover:not(:disabled){background:rgba(15,108,189,.08)}button:disabled{opacity:.4;cursor:default}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,[contenteditable]:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
input,select,textarea{width:100%;border:1px solid #c7c7c7;border-bottom-color:#616161;border-radius:4px;padding:7px 10px;background:#fff}
input[type=checkbox]{width:auto}
.primary{background:var(--brand);color:#fff;border-radius:4px;padding:9px 16px;font-weight:600;width:100%}.primary:hover:not(:disabled){background:var(--brand-d)}.primary.sm{width:auto;padding:6px 16px}
.ghost{color:var(--mute)}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.err{color:var(--bad);min-height:20px;margin:6px 0}.sub{color:var(--mute);margin:0 0 14px}
/* auth */
.auth{display:grid;grid-template-columns:1.1fr 1fr;height:100%}
.auth-art{position:relative;padding:48px;background:linear-gradient(160deg,#0F6CBD,#4b78c9 60%,#7d7cc8);color:#fff;overflow:hidden}
.auth-art h2{font-size:34px;font-weight:600;margin:90px 0 12px;max-width:420px;line-height:1.15}.auth-art p{max-width:400px;opacity:.9}
.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:600}.logo{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:#fff;color:var(--brand);font-weight:700}
.dunes{position:absolute;left:0;right:0;bottom:0;width:100%;height:45%}
.auth-card{margin:auto;width:min(400px,92%);background:rgba(255,255,255,.92);padding:30px;border-radius:10px;box-shadow:0 8px 40px rgba(20,40,80,.14)}
.tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:20px}.tabs button{flex:1;border-radius:0;padding:10px;color:var(--mute);border-bottom:2px solid transparent}.tabs button.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}
.auth h1{font-size:24px;font-weight:600;margin:0 0 4px}
.auth label{display:block;font-size:13px;margin:12px 0 4px;font-weight:600}.auth label.chk{font-weight:400;display:flex;gap:8px;align-items:center;margin:14px 0 6px}
.pw{position:relative}.pw input{padding-right:64px}.eye{position:absolute;right:4px;top:3px;color:var(--brand);font-size:13px}
.alt{text-align:center;color:var(--mute);margin:16px 0 0}.alt a{color:var(--brand)}
.meter{height:4px;background:#e6e6e6;border-radius:2px;margin-top:8px}.meter i{display:block;height:100%;width:0;border-radius:2px;transition:.2s}small{color:var(--mute)}
/* app */
#app{display:flex;flex-direction:column;height:100%}
.top{display:flex;align-items:center;gap:14px;padding:6px 14px;height:48px}
.ib.static{display:grid;place-items:center;width:34px;height:34px;color:var(--text)}.appname{font-size:16px}
.searchbox{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #c7c7c7;border-radius:4px;padding:0 10px;width:min(430px,40%);margin-left:6%}.searchbox input{border:0;padding:6px 0;background:none}.searchbox input:focus-visible{outline:0}.searchbox:focus-within{border-color:var(--brand)}
.grow{flex:1}.usr{position:relative}
.initial{width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;font-weight:600;padding:0}
.pop{position:absolute;right:0;top:40px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.16);padding:12px;min-width:230px;z-index:30;display:flex;flex-direction:column;gap:2px}
.pop span{color:var(--mute);margin-bottom:8px;font-size:13px}.pop button{text-align:left}
.main{flex:1;display:flex;min-height:0}
.rail{width:48px;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:6px}.rail button{width:38px;height:38px;padding:0;color:var(--brand);position:relative}.rail button.on::before{content:"";position:absolute;left:-5px;top:9px;height:20px;width:3px;border-radius:2px;background:var(--brand)}
.work{flex:1;min-width:0;display:flex;flex-direction:column;padding:0 10px 0 0}
.ribbon{position:relative;display:flex;align-items:center;gap:2px;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border-radius:8px;padding:6px 10px;box-shadow:0 1px 4px rgba(0,0,0,.08);overflow-x:auto;white-space:nowrap}
.ribbon button{display:flex;align-items:center;gap:6px;padding:6px 9px;font-size:13.5px}.ribbon .i{display:inline-flex;color:var(--brand)}.ribbon button:disabled .i{color:inherit}
.ribbon .newmail{background:var(--brand);color:#fff;font-weight:600;padding:6px 14px}.ribbon .newmail .i{color:#fff}.ribbon .newmail:hover{background:var(--brand-d)!important}
.vs{width:1px;height:22px;background:var(--line);margin:0 6px}
.ribbon .pop{top:44px;right:auto;left:260px;max-height:300px;overflow:auto}
.cols{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:230px 360px 1fr;gap:0;margin-top:8px;border-radius:8px 8px 0 0;overflow:hidden}
.wall{position:absolute;inset:0;width:100%;height:100%}
.folders,.listpane{position:relative;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);overflow:auto}
.folders{padding:8px 6px;border-radius:8px 0 0 0}.listpane{display:flex;flex-direction:column;border-left:1px solid var(--line);margin:0 8px 0 0;border-radius:0 8px 0 0}
.fh{padding:10px 10px 4px;font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px}
.folders select{margin:4px 0 8px;font-size:13px}
.fi{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:7px 10px;border-radius:4px;position:relative}.fi.on{background:#e8eef7;font-weight:600}.fi.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--brand);border-radius:2px}.fi .ic{color:var(--mute)}.fi b{margin-left:auto;color:var(--brand);font-size:12px}
.lhead{display:flex;justify-content:space-between;align-items:center;padding:8px 14px 0;border-bottom:1px solid var(--line)}
.ltabs button{border-radius:0;padding:10px 8px;font-weight:600;color:var(--mute);border-bottom:2px solid transparent}.ltabs button.on{color:var(--text);border-bottom-color:var(--brand)}#ltitle{color:var(--mute);font-size:12px}
.list{overflow:auto;flex:1}
.msg{display:grid;grid-template-columns:36px 1fr auto;gap:0 10px;padding:9px 12px;border-bottom:1px solid #f0f0f0;cursor:pointer;border-left:3px solid transparent}
.msg:hover{background:#f5f5f5}.msg.on{background:var(--sel);border-left-color:var(--brand)}
.av{grid-row:1/4;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:600;font-size:14px;align-self:center}
.msg .from,.msg .sub1,.msg .pv{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;grid-column:2}
.msg .tm{grid-column:3;grid-row:1;color:var(--mute);font-size:12px}
.msg.unread .from{font-weight:700}.msg.unread .sub1{color:var(--brand);font-weight:600}.msg .pv{color:var(--mute);font-size:13px}.fl{color:#C4314B}
.more{margin:10px auto;display:block;color:var(--brand)}
.reader{position:relative;overflow:auto;display:flex;flex-direction:column}
.reader.has{background:rgba(255,255,255,.96);border-radius:0 8px 0 0}
.rhead{padding:18px 22px 8px}.rhead h1{font-size:20px;font-weight:600;margin:0 0 10px}
.who{display:flex;gap:12px;align-items:flex-start}.who .av{grid-row:auto;width:40px;height:40px}.who div{min-width:0}.who small{display:block;word-break:break-all}
.rbody{padding:6px 22px 16px;flex:1}.rbody iframe{width:100%;border:0;min-height:420px;display:block}
.chip{display:inline-block;border:1px solid var(--line);border-radius:4px;padding:3px 10px;margin:0 6px 6px 0;color:var(--text);text-decoration:none;background:#fafafa}
.rq{display:flex;gap:8px;padding:10px 22px;border-top:1px solid var(--line)}.rq button{border:1px solid #c7c7c7}
.empty{margin:auto;text-align:center;color:var(--mute);padding:30px;max-width:360px}
.empty .box{width:110px;height:100px;margin:0 auto 18px;border-radius:26px 26px 18px 18px;background:linear-gradient(#f3f3f3,#dcdcdc);box-shadow:inset 0 -14px 0 rgba(255,255,255,.7),0 6px 16px rgba(0,0,0,.1)}
.empty h2{font-size:15px;color:var(--text);margin:0 0 4px}.empty .primary{width:auto;margin-top:14px}
/* modals */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.32);display:none;align-items:center;justify-content:center;z-index:50;padding:12px}.modal.open{display:flex}
.card{background:#fff;border-radius:8px;width:min(560px,100%);max-height:94%;overflow:auto;padding:22px;box-shadow:0 16px 60px rgba(0,0,0,.3)}.card.wide{width:min(720px,100%)}
.card h3{margin:0 0 4px;font-size:20px;font-weight:600}.steps{display:flex;gap:6px;margin:10px 0 14px}.steps i{flex:1;height:3px;border-radius:2px;background:var(--line)}.steps i.on{background:var(--brand)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.f{margin-bottom:10px}.f label{display:block;color:var(--mute);font-size:12.5px;margin-bottom:3px}
.foot{display:flex;justify-content:space-between;gap:8px;margin-top:14px}.foot button{border:1px solid #c7c7c7}.foot .primary{border-color:var(--brand)}
.rte{display:flex;gap:4px;margin:8px 0;align-items:center;flex-wrap:wrap}.rte button{border:1px solid #d1d1d1}.rte input[type=color]{width:34px;height:30px;padding:1px}
.ed{min-height:200px;max-height:38vh;overflow:auto;border:1px solid #c7c7c7;border-radius:4px;padding:10px}
.acct{border:1px solid var(--line);border-radius:8px;padding:12px;margin-bottom:10px}.acct .btns{display:flex;gap:6px;margin:8px 0;flex-wrap:wrap}.acct .btns button{border:1px solid #c7c7c7}.acct textarea{margin-top:4px}
.st.ok{color:var(--ok)}.st.bad{color:var(--bad)}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#323232;color:#fff;border-radius:6px;padding:10px 16px;display:none;z-index:99;max-width:92%}
.back{display:none}
@media(max-width:1000px){.cols{grid-template-columns:200px 320px 1fr}}
@media(max-width:820px){.auth{grid-template-columns:1fr}.auth-art{display:none}.cols{grid-template-columns:1fr}.folders,.listpane,.reader{display:none}.cols[data-v=side] .folders,.cols[data-v=list] .listpane,.cols[data-v=read] .reader{display:flex;flex-direction:column}.folders{display:none}.cols[data-v=side] .folders{display:block}.listpane{margin:0}.back{display:inline-flex}.searchbox{width:auto;flex:1;margin:0}.appname{display:none}.rail{display:none}.work{padding:0 6px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}