/* mail2 后台样式（响应式，手机端优化） */
:root{ --bg:#f5f6f8; --card:#fff; --line:#e3e6ea; --pri:#2563eb; --pri2:#1d4ed8;
       --ok:#16a34a; --bad:#dc2626; --txt:#1f2937; --mut:#6b7280; }
*{ box-sizing:border-box; }
body{ margin:0; font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
     background:var(--bg); color:var(--txt);
     overflow-x:clip; overflow-wrap:anywhere; word-break:break-word; }
a{ color:var(--pri); text-decoration:none; }
.topbar{ display:flex; align-items:center; gap:12px; background:#0f172a; color:#fff; padding:10px 16px; position:sticky; top:0; z-index:50; }
.brand{ font-weight:700; font-size:15px; white-space:nowrap; }
.nav{ display:flex; gap:4px; flex-wrap:wrap; margin-left:auto; }
.nav a{ color:#cbd5e1; padding:6px 10px; border-radius:6px; font-size:13px; white-space:nowrap; }
.nav a.active,.nav a:hover{ background:rgba(255,255,255,.12); color:#fff; }
.nav a.logout{ color:#fca5a5; }
.navtoggle{ display:none; background:none; border:1px solid #475569; color:#fff; border-radius:6px; padding:4px 10px; font-size:18px; }
.wrap{ max-width:1100px; margin:0 auto; padding:16px; }
.foot{ text-align:center; color:var(--mut); padding:18px; font-size:12px; }

.card{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:16px; }
h2{ font-size:16px; margin:0 0 12px; }
h3{ font-size:14px; margin:14px 0 8px; }

table{ width:100%; border-collapse:collapse; background:#fff; }
th,td{ padding:9px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font-size:13px; }
th{ background:#f8fafc; color:var(--mut); font-weight:600; white-space:nowrap; }
tr:hover td{ background:#fafbfc; }
.table-scroll{ overflow-x:auto; }

.btn{ display:inline-block; padding:7px 14px; border-radius:7px; border:1px solid var(--line); background:#fff; color:var(--txt); cursor:pointer; font-size:13px; }
.btn:hover{ background:#f1f5f9; }
.btn.pri{ background:var(--pri); border-color:var(--pri); color:#fff; }
.btn.pri:hover{ background:var(--pri2); }
.btn.sm{ padding:4px 9px; font-size:12px; }
.btn.bad{ background:#fff; border-color:#fecaca; color:var(--bad); }
.btn.bad:hover{ background:#fef2f2; }
.btn.dis,.btn.sm.dis{ opacity:.45; cursor:not-allowed; pointer-events:none; }

input,select,textarea{ width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:7px; font-size:14px; background:#fff; color:var(--txt); }
input:focus,select:focus,textarea:focus{ outline:2px solid #bfdbfe; border-color:var(--pri); }
label{ display:block; margin:10px 0 4px; color:var(--mut); font-size:13px; }
.row{ display:flex; gap:12px; flex-wrap:wrap; }
.row > div{ flex:1; min-width:200px; }
.form-inline{ display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }
.form-inline > div{ flex:1; min-width:160px; }

.pager{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px; font-size:13px; color:var(--mut); }
.pager .psize{ width:auto; }
.badge{ display:inline-block; padding:1px 7px; border-radius:10px; font-size:11px; background:#e0e7ff; color:#3730a3; margin-left:4px; }
.badge.replied{ background:#dcfce7; color:#166534; }
.muted{ color:var(--mut); font-size:12px; }
.flash{ padding:10px 14px; border-radius:8px; margin-bottom:12px; font-size:13px; }
.flash.ok,.flash.good{ background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.flash.bad{ background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
.modal-mask{ display:none; position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:100; align-items:center; justify-content:center; }
.modal-mask.open{ display:flex; }
.modal{ background:#fff; border-radius:12px; padding:20px; width:min(520px,92vw); max-height:90vh; overflow:auto; }
.modal h3{ margin-top:0; }

/* ---------- 发信进度条 ---------- */
.prog-wrap{ margin:14px 0 4px; padding:12px 14px; background:#f8fafc; border:1px solid var(--line); border-radius:9px; }
.prog-head{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--txt); margin-bottom:8px; }
#progPct{ font-weight:700; color:var(--pri); }
.prog-bar{ height:10px; background:#e5e7eb; border-radius:999px; overflow:hidden; }
.prog-bar > i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--pri),#60a5fa);
               border-radius:999px; transition:width .18s ease; }
.prog-bar > i.ok{ background:linear-gradient(90deg,#16a34a,#4ade80); }
.prog-bar > i.warn{ background:linear-gradient(90deg,#d97706,#fbbf24); }
.prog-bar > i.bad{ background:linear-gradient(90deg,#dc2626,#f87171); }
#progDetail{ margin-top:8px; }

/* ---------- 右下角新邮件提醒 ---------- */
.mail-bell{ position:fixed; right:18px; bottom:18px; z-index:300; width:52px; height:52px; border-radius:50%;
            border:none; background:var(--pri); color:#fff; cursor:pointer; box-shadow:0 6px 18px rgba(37,99,235,.42);
            font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center;
            transition:transform .15s ease, box-shadow .15s ease; }
.mail-bell:hover{ transform:translateY(-2px); box-shadow:0 9px 22px rgba(37,99,235,.5); }
.mail-bell.has{ animation:bellPulse 1.8s ease-in-out infinite; }
@keyframes bellPulse{ 0%,100%{ box-shadow:0 6px 18px rgba(37,99,235,.42); } 50%{ box-shadow:0 6px 26px rgba(37,99,235,.85); } }
.mail-bell-ico{ transform:translateY(-1px); }
.mail-bell-count{ position:absolute; top:-4px; right:-4px; min-width:22px; height:22px; padding:0 6px;
                  border-radius:11px; background:#dc2626; color:#fff; font-size:12px; font-weight:700;
                  display:flex; align-items:center; justify-content:center; border:2px solid #fff; }

.mail-toast-wrap{ position:fixed; right:18px; bottom:82px; z-index:299; display:flex; flex-direction:column; gap:10px;
                  max-width:min(340px,86vw); }
.mail-toast{ background:#fff; border:1px solid var(--line); border-left:4px solid var(--pri); border-radius:10px;
             padding:12px 14px; box-shadow:0 10px 28px rgba(15,23,42,.18); cursor:pointer;
             animation:toastIn .28s ease; }
.mail-toast.out{ opacity:0; transform:translateY(8px); transition:opacity .35s ease, transform .35s ease; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }
.mail-toast-head{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--txt); }
.mail-toast-dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); flex:0 0 auto; }
.mail-toast-x{ margin-left:auto; color:var(--mut); font-size:13px; padding:0 2px; }
.mail-toast-x:hover{ color:var(--bad); }
.mail-toast-sub{ margin-top:6px; font-size:13px; font-weight:600; color:var(--txt);
                 overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.mail-toast-from{ margin-top:3px; font-size:12px; color:var(--mut); word-break:break-all; }
.mail-toast-foot{ margin-top:8px; font-size:12px; }

/* ---------- 手机端优化 ---------- */
@media (max-width:768px){
  .navtoggle{ display:block; }
  .nav{ display:none; position:absolute; top:52px; right:12px; left:12px; flex-direction:column;
        background:#0f172a; border-radius:10px; padding:8px; margin:0; }
  .nav.open{ display:flex; }
  .nav a{ display:block; }
  .wrap{ padding:10px; }
  .row > div{ min-width:100%; }
  table{ font-size:12px; }
  th,td{ padding:7px 6px; }
  input,select,textarea{ font-size:16px; } /* 防 iOS 聚焦缩放 */
  .btn{ font-size:14px; }
  .form-inline{ flex-direction:column; align-items:stretch; }
  .form-inline > div{ min-width:100%; }
  .modal{ width:94vw; }
  /* 手机端表格防溢出：长邮箱/主题断词换行，宽表格可横向滚动 */
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  th,td{ white-space:normal; word-break:break-word; overflow-wrap:anywhere; }
  /* 手机端提醒位置微调 */
  .mail-bell{ right:12px; bottom:12px; width:48px; height:48px; font-size:20px; }
  .mail-toast-wrap{ right:12px; left:12px; bottom:70px; max-width:none; }
}