:root{
  --bg:#FBFAF8; --surface:#FFFFFF; --soft:#F5F2ED;
  --ink:#1A1815; --ink2:#56514A; --ink3:#948D85;
  --line:#EAE4DC; --line2:#DCD5CA;
  --gold:#B0894F; --gold-d:#96703B; --gold-soft:#F7F1E7;
  --ok:#3F7D5B; --ok-soft:#EEF5F0; --warn:#B4531F; --warn-soft:#FBF0E8; --bad:#A33A2E; --bad-soft:#FBEDEB;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.6}
a{color:var(--gold-d);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-weight:700}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}

/* ---------- 通用控件 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;padding:0 16px;border-radius:3px;border:1px solid var(--line2);
  background:#fff;color:var(--ink2);cursor:pointer;font-weight:600;letter-spacing:.02em;
  transition:.15s ease;white-space:nowrap;
}
.btn:hover{border-color:var(--gold);color:var(--gold-d)}
.btn-primary{background:var(--gold);border-color:var(--gold);color:#fff}
.btn-primary:hover{background:var(--gold-d);border-color:var(--gold-d);color:#fff}
.btn-sm{height:28px;padding:0 10px;font-size:12.5px}
.btn-ghost{background:transparent}
.btn:disabled{opacity:.5;cursor:not-allowed}
.input,select.input,textarea.input{
  width:100%;height:38px;padding:0 12px;border:1px solid var(--line2);border-radius:3px;
  background:#fff;outline:none;transition:.15s ease;
}
textarea.input{height:auto;padding:10px 12px;resize:vertical;line-height:1.65}
.input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
label.f{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin:0 0 6px}
.field{margin-bottom:16px}
.muted{color:var(--ink3)}
.small{font-size:12.5px}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}
.tag{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.7}
.tag-ok{background:var(--ok-soft);color:var(--ok)}
.tag-wait{background:var(--gold-soft);color:var(--gold-d)}
.tag-off{background:var(--bad-soft);color:var(--bad)}
.tag-user{background:var(--soft);color:var(--ink2)}
.msg{padding:10px 12px;border-radius:3px;font-size:13px;margin-bottom:14px;display:none}
.msg.on{display:block}
.msg-err{background:var(--bad-soft);color:var(--bad)}
.msg-ok{background:var(--ok-soft);color:var(--ok)}

/* ---------- 登录页 ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 16px}
.auth-card{width:100%;max-width:420px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:32px 30px 28px}
.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.auth-brand .dot{width:9px;height:9px;border-radius:50%;background:var(--gold)}
.auth-brand b{font-size:17px;letter-spacing:.02em}
.auth-sub{color:var(--ink3);font-size:13px;margin:0 0 22px}
.tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin-bottom:22px}
.tabs button{
  background:none;border:0;padding:0 0 10px;cursor:pointer;font-weight:600;color:var(--ink3);
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.tabs button.on{color:var(--ink);border-bottom-color:var(--gold)}
.pane{display:none}
.pane.on{display:block}

/* ---------- 应用外壳 ---------- */
.app{display:flex;flex-direction:column;height:100vh}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:56px;padding:0 20px;background:#fff;border-bottom:1px solid var(--line);flex-shrink:0;
}
.topbar .brand{display:flex;align-items:center;gap:9px;font-weight:700}
.topbar .brand .dot{width:8px;height:8px;border-radius:50%;background:var(--gold)}
.topbar .who{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink2)}
.main{flex:1;display:flex;min-height:0}
.side{width:210px;flex-shrink:0;border-right:1px solid var(--line);background:#fff;padding:14px 10px;overflow:auto}
.side .ftab{
  display:block;width:100%;text-align:left;padding:8px 12px;border-radius:4px;border:0;background:none;
  cursor:pointer;color:var(--ink2);font-weight:600;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.side .ftab:hover{background:var(--soft)}
.side .ftab.on{background:var(--gold-soft);color:var(--gold-d)}
.side .grp{font-size:11.5px;color:var(--ink3);padding:12px 12px 6px;font-weight:700;letter-spacing:.06em}
.list-pane{width:360px;flex-shrink:0;border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;background:#fff}
.list-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);gap:8px}
.list-body{flex:1;overflow:auto}
.mail-item{padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.mail-item:hover{background:var(--soft)}
.mail-item.on{background:var(--gold-soft)}
.mail-item .r1{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.mail-item .from{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-item .date{color:var(--ink3);font-size:12px;flex-shrink:0}
.mail-item .subj{margin-top:2px;font-size:13px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-item.unread .from,.mail-item.unread .subj{color:var(--ink);font-weight:700}
.mail-item.unread .subj{font-weight:600}
.pager{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink3)}
.read-pane{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--surface)}
.read-head{padding:16px 22px;border-bottom:1px solid var(--line)}
.read-head h2{font-size:17px;line-height:1.45;margin-bottom:8px}
.read-meta{font-size:12.5px;color:var(--ink3);display:flex;flex-direction:column;gap:3px}
.read-body{flex:1;overflow:auto;padding:0}
.read-body iframe{width:100%;height:100%;border:0;background:#fff}
.read-text{padding:20px 22px;white-space:pre-wrap;word-break:break-word;font-size:14px}
.attach-bar{padding:12px 22px;border-top:1px solid var(--line);font-size:13px;background:var(--soft)}
.attach-bar .it{display:flex;align-items:center;gap:8px;margin-top:6px}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--ink3);gap:8px;padding:40px;text-align:center}

/* ---------- 弹层 ---------- */
.modal{position:fixed;inset:0;background:rgba(26,24,21,.45);display:none;align-items:center;justify-content:center;z-index:80;padding:24px}
.modal.on{display:flex}
.modal-card{width:100%;max-width:560px;background:#fff;border-radius:8px;padding:24px;max-height:88vh;overflow:auto}
.modal-card h3{font-size:16px;margin-bottom:18px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}

/* ---------- 管理台 ---------- */
.page{max-width:1120px;margin:0 auto;padding:24px 20px 60px}
.page h1{font-size:20px;margin-bottom:6px}
.cards{display:flex;gap:14px;margin:18px 0 22px;flex-wrap:wrap}
.card{flex:1;min-width:150px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px 18px}
.card .k{font-size:12.5px;color:var(--ink3)}
.card .v{font-size:24px;font-weight:700;margin-top:2px}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
th{background:var(--soft);font-size:12.5px;color:var(--ink2);font-weight:700;white-space:nowrap}
tr:last-child td{border-bottom:0}
.acts{display:flex;gap:6px;flex-wrap:wrap}
.toolbar{display:flex;gap:10px;align-items:center;margin:0 0 14px;flex-wrap:wrap}
.sect{display:none}
.sect.on{display:block}
.navtabs{display:flex;gap:20px;border-bottom:1px solid var(--line);margin:20px 0 22px}
.navtabs button{background:none;border:0;padding:0 0 10px;cursor:pointer;font-weight:600;color:var(--ink3);border-bottom:2px solid transparent;margin-bottom:-1px}
.navtabs button.on{color:var(--ink);border-bottom-color:var(--gold)}

@media (max-width:820px){
  .side{position:fixed;left:0;top:56px;bottom:0;z-index:60;width:200px;transform:translateX(-100%);transition:.2s;box-shadow:2px 0 12px rgba(0,0,0,.08)}
  .side.open{transform:none}
  .list-pane{width:100%}
  .read-pane{display:none}
  .main.reading .list-pane{display:none}
  .main.reading .read-pane{display:flex}
  .cards{gap:10px}
  .card{min-width:calc(50% - 5px)}
}

/* ---------- 折叠式帮助说明 ---------- */
details.help{margin:14px 0 0;font-size:12.5px;color:var(--ink3);background:var(--gold-soft);
  border:1px solid var(--line);border-radius:3px;padding:0 12px}
details.help[open]{padding:10px 12px}
details.help summary{cursor:pointer;font-weight:600;color:var(--gold-d);padding:9px 0;list-style:none;outline:none}
details.help summary::-webkit-details-marker{display:none}
details.help summary::before{content:"？ ";font-weight:700}
details.help ol{margin:2px 0 4px;padding-left:20px;line-height:1.85}
details.help li{margin-bottom:6px}
details.help b{color:var(--ink2)}
details.help a{text-decoration:underline}
details.help code{background:#fff;border:1px solid var(--line);border-radius:2px;padding:0 4px;font-size:12px}