:root{
  --bg:#f4f6fb; --panel:#fff; --ink:#1f2733; --muted:#6b7686; --line:#e3e8f0;
  --brand:#3b6ef5; --brand-d:#2c54c9; --ok:#1f9d55; --warn:#c9740b; --err:#d23b3b;
  --star:#f5b50a; --shadow:0 1px 3px rgba(20,30,60,.08),0 4px 14px rgba(20,30,60,.05);
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.topbar{height:54px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 18px;gap:14px;position:sticky;top:0;z-index:20}
.topbar .logo{font-weight:700;font-size:18px;color:var(--brand);display:flex;align-items:center;gap:8px}
.topbar .logo .dot{width:10px;height:10px;border-radius:50%;background:var(--brand)}
.topbar .spacer{flex:1}
.topbar .who{color:var(--muted)}
.topbar a.btn{padding:6px 12px}
.layout{display:flex;min-height:calc(100vh - 54px)}
.sidebar{width:210px;background:var(--panel);border-right:1px solid var(--line);padding:14px 10px;flex-shrink:0}
.sidebar a{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:8px;color:var(--ink);margin-bottom:2px}
.sidebar a:hover{background:#eef2fb;text-decoration:none}
.sidebar a.active{background:#e7eefe;color:var(--brand-d);font-weight:600}
.sidebar .badge{background:var(--brand);color:#fff;border-radius:10px;padding:0 7px;font-size:12px;line-height:18px}
.sidebar .sect{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:16px 12px 6px}
.compose-btn{display:block;background:var(--brand);color:#fff;text-align:center;padding:10px;border-radius:8px;font-weight:600;margin-bottom:12px}
.compose-btn:hover{background:var(--brand-d);text-decoration:none}
.main{flex:1;padding:18px 22px;min-width:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.card-pad{padding:18px 20px}
h1{font-size:20px;margin:0 0 16px}
h2{font-size:16px;margin:0 0 12px}
.flash{padding:10px 14px;border-radius:8px;margin-bottom:14px}
.flash.ok{background:#e7f7ee;color:var(--ok);border:1px solid #b8e7cb}
.flash.err{background:#fdeaea;color:var(--err);border:1px solid #f4c4c4}
.btn{display:inline-block;background:var(--brand);color:#fff;border:none;border-radius:8px;padding:9px 16px;font-size:14px;cursor:pointer}
.btn:hover{background:var(--brand-d);text-decoration:none}
.btn.sec{background:#eef1f6;color:var(--ink)}
.btn.sec:hover{background:#e2e7ef}
.btn.danger{background:var(--err)}
.btn.sm{padding:5px 10px;font-size:13px}
input,textarea,select{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit;background:#fff;color:var(--ink)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brand)}
label{display:block;margin:12px 0 5px;font-weight:600;font-size:13px}
.row{display:flex;gap:12px}
.row>*{flex:1}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.maillist{list-style:none;margin:0;padding:0}
.maillist li{display:grid;grid-template-columns:22px 24px 180px minmax(0,1fr) 108px;align-items:center;column-gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.maillist li:hover{background:#f8faff}
.maillist li.unread{background:#fbfdff;font-weight:600}
.maillist .star{color:#cdd4df;font-size:18px;width:20px;text-align:center}
.maillist .star.on{color:var(--star)}
.maillist .from{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.maillist .subj{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.maillist .subj .snip{color:var(--muted);font-weight:400}
.maillist .date{text-align:right;color:var(--muted);font-size:12px}
.maillist .clip{color:var(--muted)}
.maillist li .rowchk{margin:0;cursor:pointer;width:16px;height:16px}
.maillist li .inline-form{display:flex;align-items:center;justify-content:center;margin:0}
.empty{padding:50px;text-align:center;color:var(--muted)}
.auth-wrap{max-width:380px;margin:60px auto}
.auth-wrap .card-pad{padding:26px 28px}
.auth-wrap .logo{font-size:22px;font-weight:700;color:var(--brand);text-align:center;margin-bottom:6px}
.auth-wrap .sub{text-align:center;color:var(--muted);margin-bottom:18px}
.muted{color:var(--muted)}
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600}
.pill.green{background:#e7f7ee;color:var(--ok)}
.pill.gray{background:#eef1f6;color:var(--muted)}
.pill.red{background:#fdeaea;color:var(--err)}
.pill.blue{background:#e7eefe;color:var(--brand-d)}
.pill.amber{background:#fdf2e0;color:var(--warn)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow)}
.stat .n{font-size:26px;font-weight:700}
.stat .l{color:var(--muted);font-size:13px;margin-top:2px}
.mailhead{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px}
.mailhead .subj{font-size:20px;font-weight:700;margin-bottom:8px}
.mailbody{white-space:pre-wrap;word-break:break-word;line-height:1.7}
.mailbody-html{line-height:1.7}
.toolbar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.toolbar .spacer{flex:1}
.attach{display:inline-flex;align-items:center;gap:6px;background:#f3f6fc;border:1px solid var(--line);border-radius:8px;padding:6px 12px;margin:4px 6px 0 0}
.code{background:#0f1830;color:#d7e3ff;border-radius:8px;padding:12px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;overflow-x:auto;white-space:pre;word-break:break-all}
.dns-row td{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;word-break:break-all}
.note{background:#fff8e8;border:1px solid #f3e2b3;border-radius:8px;padding:12px 14px;color:#7a5a10;margin:10px 0}
.tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.tabs a{padding:9px 14px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.active{color:var(--brand-d);border-color:var(--brand);font-weight:600}
.tabs a:hover{text-decoration:none;color:var(--ink)}
.pager{display:flex;gap:8px;justify-content:center;margin-top:16px}
.inline-form{display:inline}
@media(max-width:760px){
  .sidebar{display:none}
  .maillist li{grid-template-columns:20px 22px 110px minmax(0,1fr) 64px;column-gap:6px}
}

/* 富文本编辑器 */
.rte{border:1px solid var(--border,#e2e8f0);border-radius:8px;overflow:hidden;background:#fff}
.rte-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 8px;background:#f8fafc;border-bottom:1px solid var(--border,#e2e8f0)}
.rte-toolbar button{border:1px solid transparent;background:transparent;border-radius:6px;padding:4px 8px;cursor:pointer;font-size:14px;line-height:1;color:#334155}
.rte-toolbar button:hover{background:#e2e8f0}
.rte-toolbar select,.rte-toolbar input[type=color]{height:28px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;cursor:pointer}
.rte-toolbar select{font-size:13px;min-width:78px}
.rte-color{display:inline-flex;align-items:center;justify-content:center;width:30px;height:28px;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;position:relative;font-weight:700;font-size:13px;color:#334155;overflow:hidden}
.rte-color input[type=color]{position:absolute;inset:0;opacity:0;width:100%;height:100%;border:none;cursor:pointer}
.rte-editor img{max-width:100%}
.rte-editor h1{font-size:1.6em}.rte-editor h2{font-size:1.35em}.rte-editor h3{font-size:1.15em}
.rte-editor pre{background:#f1f5f9;padding:10px;border-radius:6px;overflow:auto}
.rte-sep{width:1px;height:20px;background:#e2e8f0;margin:0 4px}
.rte-editor{min-height:280px;max-height:520px;overflow:auto;padding:14px;font-size:14px;line-height:1.7;outline:none}
.rte-editor:empty:before{content:attr(data-ph);color:#94a3b8}
.rte-editor blockquote{border-left:3px solid #cbd5e1;margin:8px 0;padding:4px 12px;color:#475569}

/* 选择/批量操作栏：勾选后才显示操作按钮 */
.selbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;margin-bottom:12px;background:#f8fafc;border:1px solid var(--border,#e2e8f0);border-radius:10px}
.selbar .chk{display:flex;align-items:center;gap:6px;font-size:13px;color:#475569;cursor:pointer;white-space:nowrap}
.selbar .btn,.batch-actions .btn{white-space:nowrap}
.selbar .bcount{font-size:12px;color:#2563eb;min-width:44px}
.selbar .spacer{flex:1}
.batch-actions{display:none;flex-wrap:wrap;align-items:center;gap:6px}
.batch-actions select.sm{height:28px;min-width:100px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;font-size:13px}

.dropdown{position:relative;display:inline-block}
.dropdown-menu{display:none;position:absolute;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--border,#e2e8f0);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);min-width:180px;z-index:50;overflow:hidden}
.dropdown-menu.show{display:block}
.dropdown-menu a,.dropdown-menu button{display:block;width:100%;text-align:left;padding:9px 14px;background:none;border:none;font-size:14px;color:#334155;cursor:pointer;text-decoration:none;box-sizing:border-box}
.dropdown-menu a:hover,.dropdown-menu button:hover{background:#f1f5f9}
.dropdown-menu form{margin:0}
/* 新建文件夹输入 */
.newfolder{margin:4px 0;display:flex;gap:4px}
.newfolder input{flex:1;min-width:0;box-sizing:border-box;padding:7px 10px;border:1px dashed #cbd5e1;border-radius:8px;background:transparent;font-size:13px;color:#475569}
.newfolder input:focus{border-style:solid;background:#fff}
.nf-btn{flex:0 0 auto;border:1px solid var(--brand,#2563eb);background:var(--brand,#2563eb);color:#fff;border-radius:8px;padding:0 10px;font-size:13px;cursor:pointer;white-space:nowrap}
.nf-btn:hover{opacity:.9}
/* 打印时只显示邮件正文 */
@media print{.topbar,.sidebar,.toolbar,.pager,.batchbar{display:none!important}.layout,.main,.card{display:block!important;margin:0!important;box-shadow:none!important;border:none!important}}

/* ============ 邮箱界面主题（不同整体样式，非仅换色）============ */
body.theme-default{}

/* Element / Vue 清爽风：细边框、适中圆角、蓝色主色、轻阴影 */
body.theme-element{--bg:#f5f7fa;--brand:#409eff;--brand-d:#337ecc;--line:#e4e7ed;--ink:#303133;--muted:#909399}
body.theme-element .card{border:1px solid #e4e7ed;box-shadow:0 1px 8px rgba(0,0,0,.04);border-radius:8px}
body.theme-element .btn{border-radius:6px;font-weight:500;box-shadow:none}
body.theme-element .btn.sec{background:#fff;border:1px solid #dcdfe6;color:#606266}
body.theme-element .btn.sec:hover{color:#409eff;border-color:#c6e2ff;background:#ecf5ff}
body.theme-element input,body.theme-element textarea,body.theme-element select{border:1px solid #dcdfe6;border-radius:6px}
body.theme-element input:focus,body.theme-element textarea:focus{border-color:#409eff}
body.theme-element .topbar{box-shadow:0 1px 4px rgba(0,0,0,.06);border-bottom:none}
body.theme-element .sidebar a.active{background:#ecf5ff;color:#409eff}
body.theme-element .srctab.active{background:#409eff;border-color:#409eff}

/* 扁平方正风：无圆角、无阴影、色块分明 */
body.theme-flat{--bg:#eceff1;--brand:#455a64;--brand-d:#37474f;--line:#cfd8dc;--star:#ff9800}
body.theme-flat .card{border-radius:0;box-shadow:none;border:1px solid #cfd8dc}
body.theme-flat .btn{border-radius:0;text-transform:none;box-shadow:none;font-weight:600}
body.theme-flat .btn.sec{border-radius:0}
body.theme-flat input,body.theme-flat textarea,body.theme-flat select{border-radius:0}
body.theme-flat .topbar{box-shadow:none;border-bottom:2px solid #455a64}
body.theme-flat .sidebar a{border-radius:0}
body.theme-flat .srctab{border-radius:0}
body.theme-flat .pill,body.theme-flat .badge{border-radius:0}

/* 柔和圆润风：大圆角、柔和阴影、暖色背景 */
body.theme-soft{--bg:#fdf2f8;--brand:#ec4899;--brand-d:#db2777;--line:#f6d9e7;--ink:#4a2c3a;--muted:#a87e90;--star:#f59e0b}
body.theme-soft .card{border-radius:18px;box-shadow:0 6px 24px rgba(236,72,153,.10);border:none}
body.theme-soft .btn{border-radius:999px;box-shadow:0 4px 12px rgba(236,72,153,.20)}
body.theme-soft .btn.sec{background:#fff;box-shadow:none;border:1px solid #f6d9e7}
body.theme-soft input,body.theme-soft textarea,body.theme-soft select{border-radius:12px;border:1px solid #f6d9e7}
body.theme-soft .sidebar a{border-radius:12px}
body.theme-soft .sidebar a.active{background:#fce7f3;color:#db2777}
body.theme-soft .topbar{border-bottom:none;box-shadow:0 2px 12px rgba(236,72,153,.08)}
body.theme-soft .srctab{border-radius:999px}

/* 薄荷清新风：绿色主色、清爽留白 */
body.theme-mint{--bg:#f0fdf9;--brand:#10b981;--brand-d:#059669;--line:#cdeee1;--ink:#134e42;--muted:#6b9d8d;--star:#f59e0b}
body.theme-mint .card{border-radius:12px;box-shadow:0 2px 12px rgba(16,185,129,.08);border:1px solid #cdeee1}
body.theme-mint .btn{border-radius:8px}
body.theme-mint .btn.sec{background:#fff;border:1px solid #cdeee1;color:#059669}
body.theme-mint input,body.theme-mint textarea,body.theme-mint select{border-radius:8px;border:1px solid #cdeee1}
body.theme-mint .sidebar a.active{background:#d1fae5;color:#059669}
body.theme-mint .topbar{border-bottom:none;box-shadow:0 1px 8px rgba(16,185,129,.10)}

/* 暗夜模式：深色 + 精致 */
body.theme-dark{--bg:#0f172a;--panel:#1e293b;--ink:#e2e8f0;--muted:#94a3b8;--line:#334155;--brand:#60a5fa;--brand-d:#3b82f6;--star:#fbbf24;--border:#334155;--shadow:0 1px 3px rgba(0,0,0,.4)}
body.theme-dark .topbar,body.theme-dark .card,body.theme-dark .sidebar{background:var(--panel)}
body.theme-dark .card{border:1px solid #334155;border-radius:12px}
body.theme-dark input,body.theme-dark textarea,body.theme-dark select,body.theme-dark .rte,body.theme-dark .rte-editor{background:#0f172a;color:var(--ink);border-color:#334155}
body.theme-dark .selbar,body.theme-dark .rte-toolbar{background:#243244}
body.theme-dark .btn.sec{background:#334155;color:#e2e8f0;border-color:#475569}
body.theme-dark .sidebar a.active{background:#334155}
body.theme-dark .note{background:#243244}

/* 主题选择器 */
.theme-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.theme-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 14px;border:2px solid var(--line);border-radius:10px;cursor:pointer;min-width:88px}
.theme-opt.sel{border-color:var(--brand)}
.theme-opt input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.theme-swatch{width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.theme-name{font-size:12px;color:var(--muted)}

/* ============ 登录/注册页风格 ============ */
.auth-body{min-height:100vh;background-size:cover;background-position:center;background-repeat:no-repeat}
/* 渐变风格 */
.auth-body.style-gradient{background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 40%,#ec4899 100%)}
.auth-body.style-gradient .auth-wrap .card{backdrop-filter:blur(6px);background:rgba(255,255,255,.94)}
/* 极简风格 */
.auth-body.style-minimal{background:#fff}
.auth-wrap.style-minimal .card{box-shadow:none;border:1px solid var(--line)}
/* 左右分栏风格 */
.auth-wrap.style-split{max-width:860px;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0;overflow:hidden;border-radius:16px;box-shadow:var(--shadow);background:var(--panel)}
.auth-wrap.style-split::before{content:"GoMail";display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-d));letter-spacing:2px}
.auth-wrap.style-split .card{box-shadow:none;border:none;border-radius:0;display:flex;flex-direction:column;justify-content:center}
/* 有背景图时卡片半透明增强可读性 */
.auth-body[style*="login-bg"] .auth-wrap .card{background:rgba(255,255,255,.95)}
@media(max-width:640px){.auth-wrap.style-split{grid-template-columns:1fr}.auth-wrap.style-split::before{display:none}}
/* 后台：登录页外观选择器 */
.style-grid{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}
.style-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border:2px solid var(--line);border-radius:10px;cursor:pointer;width:104px}
.style-opt.sel{border-color:var(--brand)}
.style-opt input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.style-prev{width:80px;height:52px;border-radius:6px;border:1px solid var(--line)}
.style-prev.classic{background:#f4f6fb}.style-prev.classic::after{content:"";display:block;width:44px;height:28px;margin:12px auto;background:#fff;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.style-prev.gradient{background:linear-gradient(135deg,#6366f1,#ec4899)}
.style-prev.minimal{background:#fff}
.style-prev.split{background:linear-gradient(90deg,var(--brand) 50%,#fff 50%)}

/* 服务器资源监控 */
.res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.res{padding:12px 14px;border:1px solid var(--border,#e2e8f0);border-radius:10px;background:var(--panel)}
.res-top{display:flex;justify-content:space-between;font-weight:600;margin-bottom:8px}
.bar{height:10px;background:#eef2f7;border-radius:6px;overflow:hidden}
.bar-fill{height:100%;border-radius:6px;transition:width .5s ease,background .5s ease;background:#16a34a}
body.theme-dark .bar{background:#334155}

/* 邮件列表（表格版，全浏览器兼容） */
.maillist2{width:100%;table-layout:fixed;border-collapse:collapse}
.maillist2 .mrow:hover{background:#f8faff}
.maillist2 .mrow.unread{background:#fbfdff}
.maillist2 .mrow.unread .mcell b{font-weight:700}
.maillist2 .mcell b{font-weight:600}
.maillist2 .star{color:#cdd4df}
.maillist2 .star.on{color:var(--star)}
body.theme-dark .maillist2 .mrow:hover{background:#243244}
body.theme-dark .maillist2 .mrow.unread{background:#243244}
body.theme-dark .maillist2 td{border-bottom-color:#334155 !important}

/* 来源筛选标签 */
.srcfilter{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:12px}
.srcfilter-label{font-size:13px;color:var(--muted)}
.srctab{padding:4px 12px;border:1px solid var(--border,#e2e8f0);border-radius:16px;font-size:13px;color:var(--ink);text-decoration:none;background:var(--panel)}
.srctab:hover{border-color:var(--brand);text-decoration:none}
.srctab.active{background:var(--brand);color:#fff;border-color:var(--brand)}
/* 代收来源标记 */
.src-badge{display:inline-block;font-size:11px;padding:1px 7px;border-radius:10px;background:#e0f2fe;color:#0369a1;font-weight:600;vertical-align:middle}
body.theme-dark .src-badge{background:#0c4a6e;color:#bae6fd}
/* 弹窗 */
.modal-mask{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:200;align-items:center;justify-content:center}
.modal-box{background:var(--panel);border-radius:14px;padding:22px;width:min(90vw,420px);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-box .btn{width:100%;text-align:left}

/* 服务异常告警条 */
.svc-alert{background:#fef2f2;border:1px solid #fecaca;border-left:4px solid #dc2626;color:#991b1b;padding:14px 16px;border-radius:10px;margin-bottom:18px;line-height:1.6}
.svc-alert code{background:#fff;padding:1px 6px;border-radius:4px;color:#b91c1c}

/* 已读/未读明显区分 */
.maillist2 .mrow td{transition:background .15s}
.maillist2 .mrow.unread{background:#eff6ff}
.maillist2 .mrow.unread td{border-left:none}
.maillist2 .mrow.unread .mcell,.maillist2 .mrow.unread .mcell b{color:#0b2447;font-weight:700}
.maillist2 .mrow.unread td:first-child{box-shadow:inset 3px 0 0 var(--brand,#2563eb)}
/* 已读行：整体变灰、更淡 */
.maillist2 .mrow:not(.unread) .mcell{color:#8a94a6;font-weight:400}
.maillist2 .mrow:not(.unread) .mcell b{color:#6b7280;font-weight:500}
.maillist2 .mrow:not(.unread){background:#fff}
/* 未读圆点标记 */
.unread-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brand,#2563eb);margin-right:6px;vertical-align:middle}
body.theme-dark .maillist2 .mrow.unread{background:#1e293b}
body.theme-dark .maillist2 .mrow.unread .mcell,body.theme-dark .maillist2 .mrow.unread .mcell b{color:#dbeafe}
body.theme-dark .maillist2 .mrow:not(.unread){background:#0f172a}