*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
:root{
  --bg:#f5f6f8; --panel:#fff; --line:#e6e8eb; --txt:#1a1d21; --sub:#6b7280;
  --accent:#0f6cbd; --accent-h:#0d5a9e; --hover:#f0f4f9; --danger:#c0392b;
}
html,body{height:100%}
body{
  font:14px/1.5 "Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
  color:var(--txt); background:var(--bg); overflow:hidden;
}
.app{display:flex; height:100vh}

/* 侧栏 */
.side{width:270px; flex:0 0 270px; background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:14px 12px; gap:10px}
.brand{display:flex; align-items:center; gap:10px; padding:2px 4px 10px}
.logo{width:34px;height:34px;border-radius:8px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px}
.brand-name{font-weight:600;font-size:15px}
.brand-sub{font-size:12px;color:var(--sub)}
.side-search input{width:100%;height:34px;padding:0 10px;border:1px solid var(--line);
  border-radius:6px;font:inherit;outline:none;background:#fafbfc}
.side-search input:focus{border-color:var(--accent);background:#fff}
.acc-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px;margin:0 -4px}
.acc-item{padding:8px 10px;border-radius:6px;cursor:pointer;display:flex;gap:8px;
  align-items:center;border:1px solid transparent}
.acc-item:hover{background:var(--hover)}
.acc-item.active{background:#e8f1fb;border-color:#c7ddf5}
.acc-item .dot{width:6px;height:6px;border-radius:50%;background:#cbd5e1;flex:0 0 auto}
.acc-item.active .dot{background:var(--accent)}
.acc-mail{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-foot{border-top:1px solid var(--line);padding-top:10px}

/* 按钮 */
.btn{height:34px;padding:0 14px;border:1px solid var(--line);background:#fff;border-radius:6px;
  font:inherit;cursor:pointer;color:var(--txt);transition:.15s}
.btn:hover{background:var(--hover)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-h)}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:var(--hover)}
.btn.block{width:100%}
.btn.danger{color:var(--danger);border-color:#f0c9c4}
.btn.danger:hover{background:#fdf1f0}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* 主区 */
.main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--sub);gap:6px}
.empty-icon{font-size:44px;opacity:.35;margin-bottom:6px}
.hint{font-size:12px;color:#9aa3ad}

.mail{flex:1;display:flex;flex-direction:column;min-height:0}
.mail-head{background:var(--panel);border-bottom:1px solid var(--line);
  padding:14px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.mail-head h2{font-size:16px;font-weight:600;word-break:break-all;min-width:0}
.mail-head>div:first-child{min-width:0;flex:1 1 auto}
.meta{font-size:12px;color:var(--sub);margin-top:2px}
.mail-actions{display:flex;gap:8px;align-items:center;flex:0 0 auto}
select{height:34px;padding:0 8px;border:1px solid var(--line);border-radius:6px;
  background:#fff;font:inherit;outline:none;cursor:pointer}

.split{flex:1;display:flex;min-height:0}
/* 列表可收缩，避免窄屏挤压阅读区 */
.list{width:360px;flex:0 1 360px;min-width:220px;overflow-y:auto;background:var(--panel);
  border-right:1px solid var(--line)}
.msg{padding:11px 14px;border-bottom:1px solid #f1f2f4;cursor:pointer}
.msg:hover{background:var(--hover)}
.msg.active{background:#e8f1fb}
.msg-top{display:flex;justify-content:space-between;gap:8px;margin-bottom:3px}
.msg-from{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-time{font-size:11px;color:#9aa3ad;flex:0 0 auto}
.msg-sub{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#3b4149;margin-bottom:2px}
.msg-prev{font-size:12px;color:#8b95a1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reader{flex:1 1 auto;min-width:0;overflow-y:auto;background:var(--panel);padding:22px 26px;min-width:0}
.reader-empty{color:#9aa3ad;text-align:center;padding-top:60px}
.rd-subject{font-size:18px;font-weight:600;margin-bottom:10px;line-height:1.4;word-break:break-word}
.rd-meta{font-size:12px;color:var(--sub);padding-bottom:14px;border-bottom:1px solid var(--line);
  margin-bottom:16px;line-height:1.8;word-break:break-all}
.rd-body{font-size:14px;line-height:1.75;word-break:break-word}
.rd-body pre{white-space:pre-wrap;font:inherit;margin:0}
.state{padding:30px 16px;text-align:center;color:#9aa3ad;font-size:13px}
.state.err{color:var(--danger)}

/* 弹窗 */
.modal-mask{position:fixed;inset:0;background:rgba(17,24,32,.45);display:flex;
  align-items:center;justify-content:center;z-index:50;padding:20px}
.modal{background:var(--panel);border-radius:10px;width:min(720px,100%);
  max-height:88vh;display:flex;flex-direction:column;box-shadow:0 18px 48px rgba(0,0,0,.22)}
.modal-head,.modal-foot{padding:14px 18px;display:flex;align-items:center;justify-content:space-between}
.modal-head{border-bottom:1px solid var(--line)}
.modal-foot{border-top:1px solid var(--line);gap:8px;justify-content:flex-end}
.modal-head h3{font-size:15px;font-weight:600}
.icon-btn{border:none;background:none;font-size:16px;cursor:pointer;color:var(--sub);
  width:28px;height:28px;border-radius:6px}
.icon-btn:hover{background:var(--hover)}
.modal-body{padding:16px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.tip{font-size:12px;color:var(--sub)}
.tip code{background:#f1f3f5;padding:1px 5px;border-radius:4px;font-size:11px}
textarea{width:100%;height:190px;padding:10px;border:1px solid var(--line);border-radius:6px;
  font:12px/1.6 Consolas,Monaco,monospace;resize:vertical;outline:none}
textarea:focus{border-color:var(--accent)}
.file-row{display:flex;align-items:center;gap:10px}
.result{font-size:12px;color:var(--sub);min-height:18px;word-break:break-all}
.result.ok{color:#1e7b34}
.result.err{color:var(--danger)}

.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);
  background:#1f2937;color:#fff;padding:9px 18px;border-radius:8px;font-size:13px;z-index:80;
  box-shadow:0 8px 22px rgba(0,0,0,.25)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#cbd2da;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#aeb7c2}
::-webkit-scrollbar-track{background:transparent}

/* 窄屏：列表收窄 */
@media (max-width: 1100px){
  .side{width:230px;flex:0 0 230px}
  .list{flex:0 1 300px;min-width:200px}
}
@media (max-width: 820px){
  .list{flex:0 1 240px;min-width:170px}
}
[hidden]{display:none !important}

/* ---------- 登录页 ---------- */
.gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#eef3fa 0%,#f7f9fc 55%,#e9eff7 100%);padding:20px}
.gate-card{background:#fff;border-radius:14px;padding:38px 34px 28px;width:min(390px,100%);
  box-shadow:0 18px 60px rgba(24,44,74,.13);text-align:center}
.gate-logo{width:52px;height:52px;border-radius:13px;background:var(--accent);color:#fff;
  font-size:25px;font-weight:700;display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px}
.gate-card h1{font-size:19px;font-weight:600;margin-bottom:6px}
.gate-sub{font-size:13px;color:var(--sub);margin-bottom:20px}
.gate-card input{width:100%;height:42px;padding:0 14px;border:1px solid var(--line);
  border-radius:8px;font:inherit;outline:none;margin-bottom:12px;background:#fafbfc}
.gate-card input:focus{border-color:var(--accent);background:#fff}
.gate-card .btn{height:42px;font-size:15px}
.gate-err{color:var(--danger);font-size:13px;min-height:20px;padding-top:10px}
.gate-tip{font-size:11px;color:#9aa3ad;margin-top:14px;line-height:1.7}

/* ---------- 状态栏 ---------- */
.statusbar{display:flex;align-items:center;gap:8px;padding:7px 20px;background:#fff;
  border-bottom:1px solid var(--line);font-size:12px;color:var(--sub);flex:0 0 auto}
.spacer{flex:1}
.dot-ok{width:7px;height:7px;border-radius:50%;background:#22a06b}
.dot-warn{width:7px;height:7px;border-radius:50%;background:#d98324}
.link-btn{border:none;background:none;color:var(--accent);font:inherit;cursor:pointer;padding:2px 6px}
.link-btn:hover{text-decoration:underline}

/* ---------- 品牌区 ---------- */
.brand-txt{flex:1;min-width:0;overflow:hidden}
.brand-name,.brand-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 账号项 ---------- */
.acc-item{position:relative}
.acc-item .badge{font-size:10px;padding:1px 5px;border-radius:4px;flex:0 0 auto;
  background:#eef1f4;color:#8b95a1}
.acc-item .badge.err{background:#fdecea;color:#c0392b}
.acc-item .badge.ok{background:#e8f6ee;color:#1e7b34}

/* ---------- 日志 ---------- */
.modal.wide{width:min(860px,100%)}
.logbox{font:12px/1.75 Consolas,Monaco,monospace;background:#1f2937;color:#d7dee8;
  border-radius:8px;padding:14px 16px;height:52vh;overflow-y:auto;white-space:pre-wrap;word-break:break-all}
.logbox .lv-WARN{color:#f0b24a}
.logbox .lv-ERROR{color:#ef7c73}
.logbox .ts{color:#7c8798}

/* ---------- 侧栏底部按钮 ---------- */
.side-foot .btn+.btn{margin-top:6px}