:root{--bg:#f6f8fc;--panel:#fff;--panel2:#f1f4f9;--input:#eaf1fb;--line:#dfe3ea;--text:#1f2430;--muted:#5f6b7d;
--accent:#0b57d0;--on-accent:#fff;--danger:#b3261e;--ok:#188038;--sel:#d3e3fd}
@media(prefers-color-scheme:dark){:root{--bg:#131519;--panel:#1b1e24;--panel2:#23272f;--input:#262b34;--line:#2f3541;--text:#e4e7ee;--muted:#9aa4b5;--accent:#8ab4f8;--on-accent:#0b1b33;--danger:#f2a29b;--ok:#6fcf8e;--sel:#2b3b57}}
.login{min-height:100%;display:grid;place-items:center;padding:20px}
.login form{width:min(400px,100%);background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:32px}
.login h1{margin:0 0 4px;font-size:24px;font-weight:500}
.err-text{color:var(--danger);font-size:13px;min-height:1.2em;margin-top:8px}
.top{display:flex;align-items:center;gap:12px;padding:8px 16px;height:60px}
.logo{font-size:20px;font-weight:500;width:208px;flex:none}
.search{flex:1;max-width:720px}
.search input{border-radius:24px;padding:11px 20px;border-color:transparent}
.who{margin-left:auto;font-size:13px;color:var(--muted);display:flex;gap:10px;align-items:center;white-space:nowrap}
.layout{display:grid;grid-template-columns:208px minmax(300px,420px) 1fr;height:calc(100vh - 60px);gap:0 8px;padding:0 8px 8px}
.side{padding:4px 8px}
.side button.f{display:flex;width:100%;justify-content:space-between;background:none;border:0;border-radius:0 24px 24px 0;padding:8px 16px;text-align:left;margin-bottom:2px}
.side button.f:hover{background:var(--panel2)}
.side button.f.on{background:var(--sel);font-weight:600}
.quota{margin:18px 16px;font-size:12px;color:var(--muted)}
.quota i{display:block;height:4px;background:var(--line);border-radius:3px;margin-top:5px;overflow:hidden}
.quota i b{display:block;height:100%;background:var(--accent)}
.list,.reader{background:var(--panel);border-radius:16px;overflow:auto;min-height:0}
.bar{display:flex;gap:8px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:2}
.bar .sp{flex:1}
.item{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:10px 16px;cursor:pointer}
.item:hover{background:var(--panel2)}
.item.sel{background:var(--sel)}
.item .r1{display:flex;justify-content:space-between;gap:10px}
.item .from{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .when{font-size:12px;color:var(--muted);white-space:nowrap}
.item .subj,.item .prev{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .prev{color:var(--muted);font-size:13px}
.item.unread .from,.item.unread .subj{font-weight:700}
.item.unread::before{content:"";float:left;width:8px;height:8px;border-radius:50%;background:var(--accent);margin:7px 8px 0 -10px}
.clip{margin-left:4px}
.reader{display:flex;flex-direction:column}
.empty{display:grid;place-items:center;height:100%;color:var(--muted)}
.rh{padding:18px 24px 10px;border-bottom:1px solid var(--line)}
.rh h2{margin:0 0 8px;font-size:21px;font-weight:500;overflow-wrap:anywhere}
.rh .meta{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.rh .meta b{color:var(--text)}
.atts{display:flex;flex-wrap:wrap;gap:8px;padding:10px 24px;border-bottom:1px solid var(--line)}
.att{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:6px 12px;text-decoration:none;color:var(--text);font-size:13px}
.att:hover{background:var(--panel2)}
.att.blocked{opacity:.55;text-decoration:line-through}
.rb{flex:1;min-height:300px;display:flex;flex-direction:column}
.rb iframe{flex:1;width:100%;border:0;background:#fff;min-height:300px}
.rb pre{margin:0;padding:18px 24px;white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.55 system-ui,sans-serif}
.warn{margin:10px 24px;padding:8px 12px;border-radius:10px;background:var(--panel2);font-size:13px;display:flex;gap:10px;align-items:center;justify-content:space-between}
.back{display:none}
.pg{display:flex;gap:8px;justify-content:center;align-items:center;padding:10px;color:var(--muted)}
@media(max-width:900px){
 .layout{grid-template-columns:1fr;height:calc(100vh - 60px)}
 .side{display:none}.logo{width:auto}.who span{display:none}
 .reader{display:none}.layout.read .list{display:none}.layout.read .reader{display:flex}
 .back{display:inline-block}
}