@font-face{font-family:'DSEG7';src:url('/static/dseg7.woff2') format('woff2');font-display:swap}
:root{
  --glass:rgba(255,255,255,.55);--glass2:rgba(255,255,255,.75);
  --border:rgba(255,255,255,.7);--line:rgba(100,116,139,.22);
  --fg:#1f2a44;--dim:#64748b;--accent:#4f7cff;--accent2:#0ea5e9;
  --ok:#059669;--warn:#d97706;--err:#dc2626;--radius:16px;
  --shadow:0 8px 32px rgba(51,88,166,.12);
  font-size:15px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:linear-gradient(135deg,#e9f0ff 0%,#f4efff 35%,#ecf9ff 70%,#fdf1f7 100%) fixed;
  color:var(--fg);
  font-family:-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;min-height:100vh}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(620px 420px at 12% 8%,rgba(99,140,255,.20),transparent 62%),
  radial-gradient(720px 520px at 88% 18%,rgba(56,189,248,.18),transparent 62%),
  radial-gradient(640px 520px at 50% 96%,rgba(217,70,239,.10),transparent 62%)}
input,select,textarea,button{font:inherit;color:inherit}
input[type=text],input[type=password],input[type=number],textarea,select{
  width:100%;background:rgba(255,255,255,.66);border:1px solid var(--line);border-radius:10px;
  padding:8px 11px;outline:none;transition:.15s}
input::placeholder,textarea::placeholder{color:#94a3b8}
input:focus,textarea:focus,select:focus{border-color:var(--accent);background:rgba(255,255,255,.9);
  box-shadow:0 0 0 3px rgba(79,124,255,.15)}
label{display:block;font-size:.85rem;color:var(--dim);margin:10px 0 4px}
.btn{background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:10px;padding:8px 16px;
  cursor:pointer;transition:.15s;white-space:nowrap;backdrop-filter:blur(8px)}
.btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(255,255,255,.85)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;color:#fff;font-weight:600;
  box-shadow:0 4px 14px rgba(79,124,255,.35)}
.btn.primary:hover{filter:brightness(1.07);color:#fff}
.btn.danger:hover{border-color:var(--err);color:var(--err)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.glass{background:var(--glass);backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);border:1px solid var(--border);box-shadow:var(--shadow)}
.card{background:var(--glass);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:18px;box-shadow:var(--shadow)}
.card h3{font-size:1rem;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.card .sub{font-size:.82rem;color:var(--dim);margin-bottom:12px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:0 18px}
/* 流式自适应:列数随可用宽度自然增减,无固定断点。
   同一行卡片等高拉伸,间距统一交给 gap,保证横平竖直 */
/* 概览、设置单列:逐块全宽堆叠,天然对齐 */
#page-overview.active,#page-settings.active{display:grid;gap:18px;grid-template-columns:1fr}
#page-overview.active>*,#page-settings.active>*{margin-bottom:0}
#mailboxes,#rules{display:grid;align-items:stretch;gap:18px;margin-bottom:18px;
  grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr))}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-size:.78rem;
  border:1px solid var(--line);background:rgba(255,255,255,.5)}
.badge .dot,.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.b-ok{color:var(--ok)}.b-ok .dot,.dot.on{background:var(--ok);box-shadow:0 0 8px rgba(5,150,105,.5)}
.b-err{color:var(--err)}.b-err .dot,.dot.off{background:var(--err)}
.b-warn{color:var(--warn)}.b-warn .dot{background:var(--warn)}
.hint{font-size:.78rem;color:var(--dim);margin-top:4px}

/* 登录页 */
#login{display:none;min-height:100vh;align-items:center;justify-content:center;padding:20px}
#login .panel{width:360px;background:var(--glass2);backdrop-filter:blur(24px) saturate(170%);
  -webkit-backdrop-filter:blur(24px) saturate(170%);border:1px solid var(--border);border-radius:22px;
  padding:36px 32px;box-shadow:0 24px 60px rgba(51,88,166,.18)}
#login h1{font-size:1.4rem;text-align:center;margin-bottom:4px}
#login .logo{font-size:2.4rem;text-align:center;display:block;margin-bottom:10px}
#login .sub{text-align:center;color:var(--dim);font-size:.85rem;margin-bottom:20px}
#login .btn{width:100%;margin-top:18px;padding:11px}

/* ===== 侧边栏布局 ===== */
#app{display:none;min-height:100vh}
.shell{display:flex;min-height:100vh}
aside{width:225px;flex-shrink:0;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  padding:22px 14px;background:rgba(255,255,255,.45);backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);border-right:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:10px;padding:4px 10px 18px;font-weight:800;font-size:1.15rem}
.brand .mark{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:1.15rem;
  box-shadow:0 6px 16px rgba(79,124,255,.4)}
.brand span{background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.navi{display:flex;flex-direction:column;gap:4px;flex:1}
.navi .item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;cursor:pointer;
  color:var(--dim);border:1px solid transparent;background:none;text-align:left;transition:.15s;font-size:.95rem}
.navi .item:hover{color:var(--accent);background:rgba(255,255,255,.55)}
.navi .item.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:600;
  box-shadow:0 6px 16px rgba(79,124,255,.35)}
.side-foot{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--line)}
.side-status{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--dim);padding:0 6px 4px}
main{flex:1;min-width:0;padding:26px 30px 40px}
.pagehead{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.pagehead h2{font-size:1.3rem}
.pagehead .desc{color:var(--dim);font-size:.85rem}
@media(max-width:820px){
  .shell{flex-direction:column}
  aside{width:100%;height:auto;position:static;flex-direction:row;align-items:center;gap:8px;
    padding:10px 12px;border-right:none;border-bottom:1px solid var(--border);overflow-x:auto}
  .brand{padding:0 6px;font-size:1rem}.brand .mark{width:30px;height:30px;font-size:.95rem}
  .navi{flex-direction:row;flex:1}
  .navi .item{padding:8px 12px;white-space:nowrap}
  .navi .item .txt{display:none}
  .side-foot{flex-direction:row;border-top:none;padding-top:0}
  .side-status{display:none}
  main{padding:18px 14px 90px}
}
.page{display:none}.page.active{display:block;animation:fadein .18s ease}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* 统计 */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:18px;margin-bottom:18px}
.stat{background:var(--glass);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;box-shadow:var(--shadow)}
.stat .t{font-size:.8rem;color:var(--dim)}
.stat .duo{display:flex;gap:34px;margin-top:8px}
.stat .duo .n{font-family:'DSEG7',ui-monospace,Consolas,monospace;
  font-size:1.5rem;font-weight:700;line-height:1.3;letter-spacing:1px}
.stat .duo em{display:block;font-style:normal;font-size:.75rem;color:var(--dim);margin-top:2px}
.n.blue{color:var(--accent)}.n.green{color:var(--ok)}.n.red{color:var(--err)}
.chart{display:flex;align-items:flex-end;gap:6px;height:130px;padding-top:10px}
.chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;height:100%}
.chart .bars{display:flex;align-items:flex-end;gap:2px;flex:1;width:100%;justify-content:center}
.chart .bar{width:38%;border-radius:3px 3px 0 0;min-height:2px}
.chart .bar.recv{background:#c3d1ef}.chart .bar.fwd{background:linear-gradient(180deg,var(--accent2),var(--accent))}
.chart .d{font-size:.62rem;color:var(--dim)}
.legend{display:flex;gap:16px;font-size:.75rem;color:var(--dim);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* 事件日志 */
.events{max-height:320px;overflow-y:auto;font-family:ui-monospace,Consolas,monospace;font-size:.78rem}
.events .ev{display:flex;gap:10px;padding:5px 2px;border-bottom:1px solid rgba(100,116,139,.14)}
.events .tm{color:var(--dim);flex-shrink:0}
.ev.info{color:#475569}.ev.ok{color:var(--ok)}.ev.warn{color:var(--warn)}.ev.error{color:var(--err)}

/* 历史表 */
table{width:100%;border-collapse:collapse;font-size:.85rem}
th{color:var(--dim);text-align:left;font-weight:500;padding:8px 10px;border-bottom:1px solid var(--line);font-size:.78rem}
td{padding:9px 10px;border-bottom:1px solid rgba(100,116,139,.14);vertical-align:top}
tbody tr{cursor:pointer;transition:.1s}
tbody tr:hover{background:rgba(79,124,255,.07)}
.ellip{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pager{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:12px;color:var(--dim);font-size:.85rem}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:6px;background:rgba(255,255,255,.55);border:1px solid var(--line);
  border-radius:10px;padding:6px;cursor:text}
.chips:focus-within{border-color:var(--accent);background:rgba(255,255,255,.85);
  box-shadow:0 0 0 3px rgba(79,124,255,.15)}
.chip{background:rgba(255,255,255,.85);border:1px solid var(--line);border-radius:8px;padding:3px 8px;
  font-size:.82rem;display:inline-flex;align-items:center;gap:6px;box-shadow:0 1px 3px rgba(51,88,166,.08)}
.chip b{cursor:pointer;color:var(--dim);font-weight:400}
.chip b:hover{color:var(--err)}
.chips input{flex:1;min-width:120px;background:none;border:none;outline:none;padding:3px;box-shadow:none}
.sugg{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.sugg .s{font-size:.75rem;padding:2px 9px;border-radius:99px;border:1px dashed var(--line);
  color:var(--dim);cursor:pointer;background:rgba(255,255,255,.4)}
.sugg .s:hover{color:var(--accent);border-color:var(--accent)}

/* 邮箱 & 规则卡片 */
.entity{background:rgba(255,255,255,.45);backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);border:1px solid var(--border);border-radius:14px;
  padding:16px;box-shadow:var(--shadow)}
.entity .head{display:flex;gap:10px;align-items:center;margin-bottom:4px;flex-wrap:wrap}
.entity .head input[type=text]{flex:1;min-width:120px}
.entity.off{opacity:.55}
.entity.off .head{opacity:1}
.ord{font-size:.75rem;color:var(--dim);background:rgba(255,255,255,.6);
  border:1px solid var(--line);border-radius:8px;padding:3px 8px;flex-shrink:0}
.addbtn{width:100%;padding:12px;border-style:dashed}

/* modal */
.modal{display:none;position:fixed;inset:0;background:rgba(203,213,235,.45);z-index:50;
  align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(8px)}
.modal.open{display:flex}
.modal .box{background:var(--glass2);backdrop-filter:blur(24px) saturate(170%);
  -webkit-backdrop-filter:blur(24px) saturate(170%);border:1px solid var(--border);border-radius:20px;
  max-width:760px;width:100%;max-height:86vh;overflow-y:auto;padding:26px;
  box-shadow:0 24px 60px rgba(51,88,166,.20)}
.modal .box h3{margin-bottom:14px}
.kv{display:grid;grid-template-columns:70px 1fr;gap:6px 12px;font-size:.86rem;margin-bottom:14px}
.kv .k{color:var(--dim)}
pre.mailbody{background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:12px;padding:14px;
  font-size:.82rem;white-space:pre-wrap;word-break:break-all;max-height:320px;overflow-y:auto;
  font-family:inherit;margin-top:8px}
.mailframe{width:100%;height:420px;background:#fff;border:1px solid var(--line);border-radius:12px;margin-top:8px}
.viewtoggle{display:flex;gap:0;margin-left:auto}
.viewtoggle .btn{padding:4px 12px;font-size:.8rem;border-radius:8px 0 0 8px}
.viewtoggle .btn+.btn{border-radius:0 8px 8px 0;border-left:none}
.viewtoggle .btn.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent}
.deliv{border:1px solid var(--line);background:rgba(255,255,255,.5);border-radius:12px;
  padding:10px 14px;margin-top:10px;font-size:.85rem}

/* toast */
#toasts{position:fixed;top:18px;right:18px;z-index:99;display:flex;flex-direction:column;gap:8px}
.toast{background:rgba(255,255,255,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border);border-left:4px solid var(--accent);
  border-radius:12px;padding:11px 16px;box-shadow:0 10px 30px rgba(51,88,166,.18);font-size:.86rem;
  animation:slidein .2s ease}
.toast.ok{border-left-color:var(--ok)}.toast.err{border-left-color:var(--err)}
@keyframes slidein{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.pagehead .save{margin-left:auto}
.switch{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:.88rem;cursor:pointer}
.switch input{width:auto}
.pwdwrap{position:relative}
.pwdwrap input{padding-right:38px}
.pwdwrap .eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:none;background:none;
  cursor:pointer;color:var(--dim);font-size:1rem;padding:4px 6px;line-height:1}
.pwdwrap .eye:hover{color:var(--accent)}