/* ==========================================================
   小白邮箱 mail.aizhong.net —— 126 经典版风格
   ========================================================== */

/* ---------- 图标字体兜底：两个目录都放一份，缺任何一份都能显示图标 ---------- */
@font-face{
  font-family: layui-icon;
  src: url(../layui/font/iconfont.woff2?v=282) format('woff2'),
       url(../font/iconfont.woff2?v=282) format('woff2'),
       url(../layui/font/iconfont.woff?v=282) format('woff'),
       url(../font/iconfont.woff?v=282) format('woff'),
       url(../layui/font/iconfont.ttf?v=282) format('truetype'),
       url(../font/iconfont.ttf?v=282) format('truetype');
  font-display: block;
}
/* 万一字体文件全部缺失，退化为纯文本按钮（不出现方框/XX） */
.layui-icon{
  font-family: layui-icon !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  min-width: 1em;
  text-align: center;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

/* ==========================================================
   主题色变量：JS 通过 html[data-theme] 覆盖 --az-main
   主色衍生色（深/浅）由 JS 依据主色计算后写入 --az-dark / --az-light
   ========================================================== */
:root {
  --az-main: #1e73be;      /* 主色 */
  --az-dark: #1a68ac;      /* 深色（渐变下端/hover） */
  --az-light: #4aa3f0;     /* 浅色（渐变上端/强调） */
  --az-tint: #e9f0f9;      /* 浅底（hover 背景） */
  --az-soft: #f7fbff;      /* 更浅底（列表 hover） */
  --az-pale: #eaf4ff;      /* 选中底 */
  --az-mid: #2b8ade;       /* 渐变中间色 */
  --az-deep: #1a5fa8;      /* 渐变末端深色 */
}
body {
  font: 16px/1.6 "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color: #333; background: #eef1f5; overflow: hidden;
}
a { color: var(--az-main); text-decoration: none; }
ul, li { list-style: none; }
input, textarea, select { font-family: inherit; }

/* ---------- 登录页 ---------- */
.az-login { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.az-login-bg {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(135deg, var(--az-main) 0%, var(--az-mid) 45%, var(--az-deep) 100%);
}
.az-login-bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.16) 0, transparent 45%),
              radial-gradient(circle at 80% 80%, rgba(255,255,255,.10) 0, transparent 40%);
}
.az-login-box {
  position: relative; z-index: 1; width: 380px; background: #fff;
  border-radius: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.25); padding: 34px 34px 26px;
}
.az-login-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.az-login-mark {
  width: 50px; height: 50px; border-radius: 8px; background: linear-gradient(135deg,var(--az-main),var(--az-light));
  color: #fff; font-size: 28px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.az-login-txt h1 { font-size: 20px; color: var(--az-main); font-weight: 700; letter-spacing: 1px; }
.az-login-txt p { font-size: 16px; color: #8a94a6; margin-top: 2px; }
.az-login-form .layui-form-item { position: relative; margin-bottom: 16px; }
.az-input-icon {
  position: absolute; left: 1px; top: 1px; width: 42px; height: 40px; z-index: 2;
  display: flex; align-items: center; justify-content: center; color: #9aa4b5; font-size: 16px;
  border-right: 1px solid #e6e6e6;
}
.az-input { height: 42px; padding-left: 50px !important; border-radius: 3px; }
.az-login-row { margin: -4px 0 14px; }
.az-login-btn { width: 130px; height: 40px; margin: 0 auto; display: block; font-size: 15px; letter-spacing: 4px; border-radius: 3px; }
.az-login-foot { display: none; }
.az-login-foot span { cursor: pointer; }
.az-login-foot span:hover { color: var(--az-main); }
.az-dot { margin: 0 8px; }
.az-login-copy { position: relative; z-index: 1; margin-top: 22px; color: rgba(255,255,255,.72); font-size: 16px; }

/* ---------- 主框架 ---------- */
.az-main { display: flex; flex-direction: column; height: 100vh; }
.az-top {
  height: 54px; background: linear-gradient(180deg, var(--az-main), var(--az-dark));
  display: flex; align-items: center; padding: 0 16px; color: #fff; flex: none;
}
.az-top-logo { display: flex; align-items: center; gap: 9px; width: 210px; flex: none; }
.az-top-mark {
  width: 32px; height: 32px; border-radius: 5px; background: rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700;
}
.az-top-title b { font-size: 16px; display: block; line-height: 1.2; letter-spacing: 1px; }
.az-top-title i { font-style: normal; font-size: 11px; opacity: .75; }
.az-top-search { flex: 1; display: flex; justify-content: center; }
.az-search-input {
  width: 520px; max-width: 46vw; height: 34px; border: none; border-radius: 3px 0 0 3px;
  padding: 0 12px; font-size: 16px; outline: none; color: #333;
}
.az-search-btn {
  width: 44px; height: 34px; border: none; background: #f2f2f2; border-radius: 0 3px 3px 0;
  cursor: pointer; color: #666; font-size: 16px;
}
.az-search-btn:hover { background: #e6e6e6; }
/* 顶栏右侧：固定 500px，含账号下拉 + 主题/设置/退出 */
/* 关键：所有文字 nowrap，避免「主题/设置/退出」被挤成两行 */
.az-top-right { display: flex; align-items: center; gap: 16px; width: 640px; justify-content: flex-end; flex: none; }
.az-top-right a {
  color: #fff; opacity: .9; font-size: 16px;
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap; flex: none; line-height: 1;
}
.az-top-right a span { white-space: nowrap; }
.az-top-right a:hover { opacity: 1; }
.az-top-user { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; }
/* 顶栏发信账号下拉 */
.az-top-acc { display: flex; align-items: center; gap: 6px; flex: none; min-width: 0; }
.az-top-acc .layui-icon { color: rgba(255,255,255,.9); font-size: 16px; flex: none; }
.az-top-acc-sel {
  height: 32px; width: 320px; border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.14); color: #fff; border-radius: 3px;
  padding: 0 6px; font-size: 16px; outline: none; cursor: pointer;
  white-space: nowrap; text-overflow: ellipsis; flex: none;
}
.az-top-acc-sel option { color: #333; background: #fff; }
/* layui 渲染后的顶栏下拉：白色文字改深色，宽度保持 320px */
.az-top-acc .layui-form-select { width: 320px; flex: none; }
.az-top-acc .layui-form-select .layui-input {
  height: 32px; line-height: 32px; border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.14); color: #fff;
}
.az-top-acc .layui-form-select .layui-edge { border-top-color: rgba(255,255,255,.75); }
.az-top-acc .layui-form-selected .layui-edge { border-top-color: transparent; border-bottom-color: rgba(255,255,255,.75); }
.az-top-acc .layui-form-select dl { top: 34px; }
.az-top-acc .layui-form-select dl dd { color: #333; }

.az-body { flex: 1; display: flex; min-height: 0; background: #fff; }

/* ---------- 左侧栏 ---------- */
.az-side {
  width: 180px; flex: none; background: #f7f9fc; border-right: 1px solid #e3e8ef;
  padding: 12px 10px; overflow-y: auto;
}
.az-write-btn { width: 100%; height: 38px; line-height: 38px; font-size: 16px; margin-bottom: 12px; }
.az-folder li {
  height: 42px; line-height: 42px; padding: 0 10px; border-radius: 3px; cursor: pointer;
  color: #444; display: flex; align-items: center; gap: 7px; white-space: nowrap;
}
.az-folder li:hover { background: var(--az-tint); }
.az-folder li.on { background: var(--az-main); color: #fff; }
.az-folder li.on .layui-icon { color: #fff; }
.az-folder li .layui-icon { font-size: 15px; color: #6d7c8f; }
.az-folder li .fname { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.az-folder li .badge {
  background: #e65251; color: #fff; border-radius: 9px; padding: 0 6px;
  font-size: 11px; line-height: 16px; min-width: 18px; text-align: center; font-style: normal;
}
.az-folder li.on .badge { background: rgba(255,255,255,.3); }
.az-side-split { height: 1px; background: #e3e8ef; margin: 10px 4px; }
.az-folder-sub li { color: #5b6a7d; }
.az-quota { margin-top: 18px; padding: 0 6px; color: #8a94a6; }
.az-quota-txt { margin-bottom: 5px; }
.az-quota-bar { height: 5px; background: #e3e8ef; border-radius: 3px; overflow: hidden; }
.az-quota-bar i { display: block; height: 100%; background: linear-gradient(90deg,var(--az-main),var(--az-light)); }

/* ---------- 内容区 ---------- */
.az-content { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.az-view { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

.az-tabbar {
  height: 44px; flex: none; border-bottom: 1px solid #e3e8ef; display: flex;
  align-items: center; padding: 0 16px; gap: 10px; background: #fcfdfe;
}
.az-tab-title { font-size: 15px; font-weight: 700; color: #222; }
.az-tab-count { color: #8a94a6; }
.az-tab-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.az-mini-input { height: 30px; border: 1px solid #e0e5ec; border-radius: 3px; padding: 0 8px; width: 200px; outline: none; }
.az-inline select { height: 30px; border: 1px solid #e0e5ec; border-radius: 3px; padding: 0 6px; outline: none; }

.az-toolbar {
  height: 46px; flex: none; border-bottom: 1px solid #e3e8ef; display: flex;
  align-items: center; padding: 0 12px; gap: 4px; background: #fbfcfe;
}
.az-tb-btn {
  height: 34px; line-height: 34px; padding: 0 9px; border: none; background: transparent;
  color: #54657a; cursor: pointer; border-radius: 3px; font-size: 16px;
  display: inline-flex; align-items: center; gap: 3px;
}
.az-tb-btn:hover { background: var(--az-tint); color: var(--az-main); }
.az-tb-btn.az-danger:hover { background: #fdeaea; color: #e65251; }
.az-tb-btn .layui-icon { font-size: 16px; }
.az-check { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; color: #54657a; cursor: pointer; }
.az-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.az-page-txt { color: #8a94a6; padding: 0 6px; }

/* ---------- 邮件列表 ---------- */
.az-list-head {
  height: 38px; flex: none; display: flex; align-items: center; padding: 0 12px;
  background: #f5f7fa; border-bottom: 1px solid #e3e8ef; color: #8a94a6; font-size: 16px;
}
.az-list-head .c-chk { width: 30px; flex: none; }
.az-list-head .c-star { width: 26px; flex: none; }
.az-list-head .c-from { width: 500px; flex: none; }
.az-list-head .c-subj { flex: 1; min-width: 0; }
.az-list-head .c-time { width: 150px; flex: none; text-align: right; white-space: nowrap; }

.az-list { flex: 1; overflow-y: auto; }
.az-list li {
  display: flex; align-items: center; padding: 0 12px; height: 50px; cursor: pointer;
  border-bottom: 1px solid #f0f3f7; font-size: 16px;
}
.az-list li:hover { background: var(--az-soft); }
.az-list li.on { background: var(--az-pale); }
.az-list li.unread { font-weight: 700; color: #111; }
.az-list li .c-chk { width: 30px; flex: none; }
.az-list li .c-star { width: 26px; flex: none; color: #d8dee7; font-size: 16px; }
.az-list li .c-star.on { color: #f5a623; }
.az-list li .c-from {
  width: 500px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #33475e; font-weight: inherit;
}
.az-list li .c-subj {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
  overflow: hidden; white-space: nowrap;
}
.az-list li .c-subj .s-icon { color: #e65251; font-size: 16px; flex: none; }
.az-list li .c-subj .s-tag {
  background: #eef4fb; color: #5b7ea8; border-radius: 2px; padding: 0 4px;
  font-size: 11px; flex: none; font-weight: 400;
}
.az-list li .c-subj .s-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.az-list li .c-subj .s-pre { color: #9aa4b5; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.az-list li .c-time { width: 150px; flex: none; text-align: right; color: #8a94a6; font-weight: 400; white-space: nowrap; }
.az-list li.unread .c-from, .az-list li.unread .s-txt { color: #111; }

.az-empty { padding: 80px 0; text-align: center; color: #b6bfcc; }
.az-empty .layui-icon { font-size: 52px; display: block; margin-bottom: 10px; }
.az-empty p { font-size: 13px; }

/* ---------- 读信 ---------- */
.az-read { flex: 1; overflow-y: auto; padding: 18px 24px 40px; }
.az-read-subj { font-size: 18px; font-weight: 700; color: #1a1a1a; margin-bottom: 14px; line-height: 1.5; }
.az-read-meta {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding-bottom: 14px; border-bottom: 1px solid #edf0f4; margin-bottom: 14px;
}
.az-read-from { display: flex; gap: 10px; }
.az-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg,var(--az-main),var(--az-light));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; flex: none; text-transform: uppercase;
}
.az-read-name b { font-size: 14px; color: #222; }
.az-read-name span { color: #8a94a6; }
.az-read-to { color: #8a94a6; margin-top: 3px; max-width: 620px; word-break: break-all; }
.az-read-time { color: #8a94a6; white-space: nowrap; }
.az-attach { background: #fafbfd; border: 1px solid #edf0f4; border-radius: 4px; padding: 10px 12px; margin-bottom: 16px; width: 640px; max-width: 100%; }
.az-attach-t { color: #54657a; margin-bottom: 8px; }
.az-attach ul { display: flex; flex-wrap: wrap; gap: 8px; }
.az-attach li {
  border: 1px solid #e3e8ef; background: #fff; border-radius: 3px; padding: 6px 11px;
  display: flex; align-items: center; gap: 6px; width: 100%; max-width: 100%;
}
.az-attach li .an { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.az-attach li .as { color: #a3adba; }
/* 收件箱附件「下载」按钮样式 */
.az-attach li .az-dl { margin-left: 4px; padding: 2px 10px; border: 1px solid var(--az-main); color: var(--az-main); border-radius: 3px; font-size: 12px; white-space: nowrap; text-decoration: none; transition: background .15s, color .15s; }
.az-attach li .az-dl:hover { background: var(--az-main); color: #fff; }
.az-attach li .az-pv { margin-left: 4px; padding: 2px 10px; border: 1px solid #52a675; color: #52a675; border-radius: 3px; font-size: 12px; white-space: nowrap; text-decoration: none; transition: background .15s, color .15s; }
.az-attach li .az-pv:hover { background: #52a675; color: #fff; }
.az-attach .az-dl-all { float: right; color: var(--az-main); font-size: 13px; text-decoration: none; }
.az-attach .az-dl-all:hover { text-decoration: underline; }
.az-read-body { font-size: 14px; line-height: 1.85; color: #2b3440; word-wrap: break-word; }
.az-read-body img { max-width: 100%; }
.az-read-body a { color: var(--az-main); }
/* 邮件正文沙箱渲染：iframe 不含 allow-scripts，脚本永不执行 */
.az-mail-frame { width: 100%; border: 0; background: #fff; min-height: 240px; display: block; }
.az-reply-bar { margin-top: 26px; padding-top: 16px; border-top: 1px solid #edf0f4; display: flex; gap: 10px; }

/* ---------- 写信 ---------- */
.az-compose { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 14px 20px 0; }
.az-cp-row { display: flex; align-items: center; margin-bottom: 11px; }
.az-cp-label { width: 100px; flex: none; color: #54657a; text-align: right; padding-right: 10px; white-space: nowrap; }
.az-cp-input { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.az-cp-input .layui-input { height: 36px; }
/* 发件账号：折叠式下拉（只显示一行，点击后展开选择），彻底避开 layui select 在隐藏容器内渲染失败 */
.az-account-drop { position: relative; width: 350px; flex: none; }
.az-account-current {
  width: 350px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
  height: 38px; padding: 0 10px; cursor: pointer;
  border: 1px solid #e0e5ec; border-radius: 3px; background: #fff;
  font-size: 15px; color: #333;
}
.az-account-current:hover { border-color: var(--az-main); }
.az-acc-cur-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.az-acc-caret { color: #98a6b8; font-size: 13px; margin-left: 8px; flex: none; transition: transform .15s; }
.az-account-drop.open .az-acc-caret { transform: rotate(180deg); }
/* 下拉面板：默认隐藏，展开时在正常流里向下展开（避免被 .az-view 的 overflow:hidden 裁剪） */
.az-account-box {
  display: none;
  margin-top: 4px;
  border: 1px solid #e0e5ec; border-radius: 3px; background: #fff;
  max-height: 180px; overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.az-account-drop.open .az-account-box { display: block; }
.az-account-box ul { list-style: none; margin: 0; padding: 0; }
.az-account-box li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font-size: 15px;
  color: #333; border-bottom: 1px solid #f0f3f7;
}
.az-account-box li:last-child { border-bottom: none; }
.az-account-box li:hover { background: var(--az-soft); }
.az-account-box li.on { background: var(--az-pale); color: var(--az-main); }
.az-acc-ok { color: var(--az-main); font-size: 14px; flex: none; }
.az-cp-input { overflow: visible !important; }
.az-cp-link { color: var(--az-main); white-space: nowrap; }
.az-cp-link:hover { text-decoration: underline; }
.az-cp-toolbar { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; }
.az-cp-toolbar .layui-btn { height: 32px; line-height: 32px; }
.az-cp-toolbar-tip { color: #a3adba; font-size: 12px; margin-left: auto; }
.az-cp-editor { flex: 1; min-height: 0; margin: 0 0 6px; border: 1px solid #e3e8ef; border-radius: 3px; overflow: hidden; }
.az-cp-attach { background: #fafbfd; border: 1px solid #edf0f4; border-radius: 4px; padding: 8px 12px; margin-bottom: 10px; }
.az-cp-attach ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.az-cp-attach li {
  border: 1px solid #e3e8ef; background: #fff; border-radius: 3px; padding: 5px 10px;
  display: flex; align-items: center; gap: 6px;
}
.az-cp-attach li .del { color: #e65251; cursor: pointer; }
.az-cp-attach li .az-pv-cp { margin-left: 4px; padding: 1px 8px; border: 1px solid #52a675; color: #52a675; border-radius: 3px; font-size: 12px; white-space: nowrap; text-decoration: none; transition: background .15s, color .15s; }
.az-cp-attach li .az-pv-cp:hover { background: #52a675; color: #fff; }
.az-cp-foot { flex: none; padding: 12px 0; display: flex; align-items: center; gap: 10px; }
.az-up-btn { height: 36px; line-height: 36px; }
.az-cp-tip { color: #8a94a6; margin-left: 6px; font-size: 13px; }

/* ---------- 通讯录 ---------- */
.az-contact-wrap { flex: 1; display: flex; min-height: 0; }
.az-contact-group { width: 150px; flex: none; border-right: 1px solid #e3e8ef; padding: 10px 8px; overflow-y: auto; background: #fafbfd; }
.az-contact-group li { height: 30px; line-height: 30px; padding: 0 10px; border-radius: 3px; cursor: pointer; color: #54657a; }
.az-contact-group li:hover { background: var(--az-tint); }
.az-contact-group li.on { background: var(--az-main); color: #fff; }
.az-contact-main { flex: 1; overflow-y: auto; padding: 10px 14px; }
.az-contact-list li {
  display: flex; align-items: center; gap: 12px; padding: 11px 10px;
  border-bottom: 1px solid #f0f3f7; border-radius: 3px;
}
.az-contact-list li:hover { background: var(--az-soft); }
.az-contact-list .ct-name { width: 120px; font-size: 14px; color: #222; }
.az-contact-list .ct-mail { width: 240px; color: #54657a; }
.az-contact-list .ct-other { flex: 1; color: #8a94a6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.az-contact-list .ct-op { flex: none; display: flex; gap: 8px; }
.az-contact-list .ct-op a { color: var(--az-main); }
.az-contact-list .ct-op a.del { color: #e65251; }

/* ---------- 设置 ---------- */
.az-setting { flex: 1; overflow-y: auto; padding: 16px 24px 40px; }
.az-setting .layui-form-label { width: 130px; white-space: nowrap; }
.az-setting .layui-input-block { margin-left: 160px; }
.layui-elem-field { margin-top: 10px; }
.layui-elem-field legend { font-size: 16px; }

/* ---------- layui 微调 ---------- */
.layui-form-checkbox[lay-skin=primary] { margin-top: 0; padding-left: 22px; }
.layui-form-checkbox[lay-skin=primary] i { top: 6px; }
.az-list li .layui-form-checkbox[lay-skin=primary] span { padding-right: 0; }
.layui-layer-page .layui-layer-content { overflow: visible !important; }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cfd7e2; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #b5c0cf; }
::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================
   启动遮罩：刷新时先盖住页面，避免"闪一下登录页"
   ========================================================== */
.az-boot {
  position: fixed; inset: 0; z-index: 9999999;
  background: linear-gradient(135deg, var(--az-main) 0%, #2b8ae0 60%, var(--az-light) 100%);
  display: flex; align-items: center; justify-content: center;
}
.az-boot-box { text-align: center; color: #fff; }
.az-boot-mark {
  display: inline-flex; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4);
  align-items: center; justify-content: center; font-size: 28px; font-weight: 700;
}
.az-boot-txt { margin-top: 12px; font-size: 18px; letter-spacing: 3px; }
.az-boot-spin { margin: 16px auto 0; width: 26px; height: 26px; }
.az-boot-spin i {
  display: block; width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.35); border-left-color: #fff;
  animation: azspin .8s linear infinite;
}
@keyframes azspin { to { transform: rotate(360deg); } }
.az-boot-sub { margin-top: 12px; font-size: 16px; opacity: .8; }

/* ---------- 收信状态提示 ---------- */
.az-sync-tip { color: #8a94a6; font-size: 16px; }
.az-sync-tip.on { color: var(--az-main); }

/* ==========================================================
   用户管理
   ========================================================== */
.az-admin { flex: 1; overflow: auto; padding: 0 0 20px; }
.az-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.az-table th {
  background: #f5f8fb; color: #54657a; font-weight: 700; text-align: left;
  padding: 11px 10px; border-bottom: 1px solid #e3e8ef; white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
.az-table td { padding: 11px 10px; border-bottom: 1px solid #f0f3f7; color: #333; vertical-align: middle; }
.az-table tbody tr:hover { background: var(--az-soft); }
.az-table .td-op a { color: var(--az-main); margin-right: 10px; white-space: nowrap; }
.az-table .td-op a.danger { color: #e65251; }
.az-tag {
  display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; line-height: 17px;
}
.az-tag-green { background: #e8f7ef; color: #21a366; }
.az-tag-gray  { background: #f0f2f5; color: #98a2b3; }
.az-tag-blue  { background: #e8f2fd; color: var(--az-main); }
.az-tag-red   { background: #fdecec; color: #e65251; }
.az-admin-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 10px; color: #8a94a6;
}
.az-admin-page { display: flex; align-items: center; gap: 4px; }
.az-empty-row td { text-align: center; padding: 60px 0; color: #b6bfcc; }

/* ---------- 设置页：普通用户看到的服务器托管提示 ---------- */
.az-set-tip {
  margin: 4px 0 0; padding: 10px 14px; border: 1px dashed #dbe3ee; border-radius: 4px;
  background: #fafbfd; color: #8a94a6; line-height: 1.8;
}
.az-set-tip .layui-icon { color: var(--az-main); margin-right: 4px; }

/* ---------- UEditor 容器 ---------- */
.az-cp-editor { display: block; overflow: visible; }
.edui-default .edui-editor { border-radius: 0; width: 100% !important; }
.edui-default .edui-editor-iframeholder { width: 100% !important; }
.edui-default .edui-editor-iframeholder iframe { width: 100% !important; }
.edui-default .edui-editor-toolbarbox { box-shadow: none !important; position: relative !important; }
.edui-default .edui-editor-toolbarboxouter { border-bottom: 1px solid #e3e8ef !important; background: #fafbfd; box-shadow: none !important; }
/* UEditor 工具栏图标：用绝对路径强制精灵图，规避部分部署下相对路径解析失败导致“图标全空但功能正常” */
.edui-default .edui-toolbar .edui-button .edui-icon,
.edui-default .edui-toolbar .edui-menubutton .edui-icon,
.edui-default .edui-toolbar .edui-splitbutton .edui-icon {
  background-image: url(/ueditor/themes/default/images/icons.png) !important;
}

/* ==========================================================
   自适应（响应式）：平板/手机下左侧栏变抽屉，列表与工具栏重排
   ========================================================== */

/* 汉堡按钮：桌面隐藏，≤980px 显示 */
.az-hamburger { display: none; }
.az-nav-mask { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 40; }

@media (max-width: 980px) {
  .az-main { position: relative; }
  .az-hamburger {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: none; margin-right: 10px;
    background: rgba(255,255,255,.18); border: none; border-radius: 5px; cursor: pointer;
  }
  .az-hamburger i {
    position: relative; display: block; width: 18px; height: 2px; background: #fff;
  }
  .az-hamburger i::before, .az-hamburger i::after {
    content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: #fff;
  }
  .az-hamburger i::before { top: -6px; }
  .az-hamburger i::after { top: 6px; }

  /* 侧栏变离屏抽屉 */
  .az-side {
    position: absolute; top: 0; bottom: 0; left: 0; width: 210px; z-index: 50;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 2px 0 16px rgba(0,0,0,.18);
  }
  .az-main.az-nav-open .az-side { transform: translateX(0); }
  .az-main.az-nav-open .az-nav-mask { display: block; }

  /* 顶栏在窄屏下自适应：logo/右侧不再固定 210px，搜索撑满 */
  .az-top-logo { width: auto; }
  .az-top-right { width: auto; gap: 12px; }
  .az-top-search { flex: 1; justify-content: flex-start; padding: 0 6px; }
  .az-search-input { width: 100%; max-width: none; }

  /* 登录框自适应 */
  .az-login-box { width: 92%; max-width: 380px; padding: 28px 22px 22px; }
}

@media (max-width: 600px) {
  /* 邮件列表：隐藏时间列，发件人收窄，主题占满 */
  .az-list-head .c-time, .az-list li .c-time { display: none; }
  .az-list-head .c-from, .az-list li .c-from { width: 110px; }
  .az-list-head .c-subj, .az-list li .c-subj { padding-right: 4px; }

  /* 工具栏换行，避免按钮被挤掉 */
  .az-toolbar { flex-wrap: wrap; height: auto; padding: 6px 10px; gap: 6px; }
  .az-toolbar-right { margin-left: 0; width: 100%; justify-content: flex-end; }

  /* 顶部用户信息在极小屏隐藏，只留设置/退出 */
  .az-top-user { display: none; }
  .az-top-title i { display: none; }
  /* 顶栏按钮只留图标，腾出空间给搜索 */
  .az-top-right a span { display: none; }
  .az-top-acc { max-width: 150px; }
  .az-top-acc-sel { max-width: 130px; }
  .az-top-acc .layui-form-select { width: 130px !important; }
  .az-top-acc .layui-form-select .layui-input { width: 130px !important; }

  /* 读信：发件人信息与时间竖排 */
  .az-read { padding: 14px 14px 30px; }
  .az-read-meta { flex-direction: column; gap: 8px; align-items: flex-start; }
  .az-read-to { max-width: 100%; }
  .az-read-subj { font-size: 16px; }

  /* 写信：标签与输入在窄屏下对齐即可，编辑区已 100% */
  .az-cp-row { margin-bottom: 8px; }
  .az-cp-foot { flex-wrap: wrap; }

  /* 通讯录：隐藏备注列，邮箱列撑满 */
  .az-contact-group { width: 110px; }
  .az-contact-list .ct-other { display: none; }
  .az-contact-list .ct-name { width: 84px; }
  .az-contact-list .ct-mail { width: auto; flex: 1; min-width: 0; }

  /* 设置页：标签不再占固定宽，输入框整行 */
  .az-setting { padding: 14px 14px 36px; }
  .az-setting .layui-form-label { width: 90px; }
  .az-setting .layui-input-block { margin-left: 0; }
  .az-setting .layui-form-item .layui-input-inline { width: auto; max-width: 100%; }
  .az-setting .layui-form-item .layui-input-inline input,
  .az-setting .layui-form-item .layui-input-inline select { width: 100%; max-width: 100%; }

  /* 用户管理表格允许横向滚动（已在 .az-admin 设 overflow:auto） */
  .az-admin { -webkit-overflow-scrolling: touch; }

  /* 写信：标签收窄、整行可换行，避免手机号上重叠 */
  .az-cp-label { width: 76px; font-size: 13px; padding-right: 8px; }
  .az-cp-row { flex-wrap: wrap; }
  .az-cp-input { flex-wrap: wrap; }
}

/* ==========================================================
   主题色板（仿 ColorDrop 圆形色块）
   ========================================================== */
.az-theme-panel { padding: 4px 2px 2px; }
.az-theme-title { font-size: 16px; color: #54657a; margin-bottom: 10px; text-align: center; }
.az-theme-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.az-theme-dot {
  width: 100%; aspect-ratio: 1/1; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: transform .12s, box-shadow .12s;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.az-theme-dot:hover { transform: scale(1.12); }
.az-theme-dot.on {
  border-color: #fff; outline: 2px solid currentColor; outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.7), 0 2px 8px rgba(0,0,0,.3);
}
.az-theme-reset {
  display: block; width: 100%; margin-top: 12px; height: 34px; border: 1px solid #e3e8ef;
  background: #fafbfd; border-radius: 3px; cursor: pointer; color: #54657a; font-size: 16px;
}
.az-theme-reset:hover { background: #f0f3f7; }
/* 设置页内联主题色区 */
.az-theme-inline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.az-theme-current { color: #54657a; font-size: 16px; }

/* ==========================================================
   弹窗表单：固定标签栏布局（修 14px 下 layui 标签折行）
   ========================================================== */
.az-form-wrap { padding: 22px 26px 18px; max-height: 620px; overflow: auto; }
.az-form-row { display: flex; align-items: flex-start; margin-bottom: 14px; }
.az-form-label {
  width: 120px; flex: none; text-align: right; padding-right: 12px;
  color: #54657a; font-size: 16px; line-height: 42px; white-space: nowrap;
}
.az-form-ctrl { flex: 1; min-width: 0; }
.az-form-ctrl .layui-input { height: 40px; }
.az-form-hint { color: #98a2b3; font-size: 14px; margin-top: 6px; line-height: 1.6; }
/* 同一行内并排的输入组 */
.az-inline-group { display: flex; gap: 8px; align-items: center; }
.az-inline-group .layui-input { min-width: 0; }
.az-flex1 { flex: 1 1 0; }
.az-flex2 { flex: 2 1 0; }
.az-suffix { color: #8a94a6; white-space: nowrap; padding-left: 2px; }
/* 分组标题 */
.az-form-sep {
  color: #1e73be; font-size: 16px; font-weight: 700; margin: 6px 0 14px;
  padding-left: 10px; border-left: 3px solid var(--az-main); line-height: 1.2;
}
.az-form-ctrl-full { display: flex; gap: 10px; }
.az-form-save { flex: 1; }
.az-form-test { flex: none; }
@media (max-width: 700px) {
  .az-form-label { width: 96px; font-size: 14px; }
  .az-form-wrap { padding: 16px 14px; }
  .az-inline-group { flex-wrap: wrap; }
}

/* 平板：列表发件人列略放宽，保证可读 */
@media (max-width: 768px) and (min-width: 601px) {
  .az-list li .c-from { width: 132px; }
  .az-list-head .c-from { width: 132px; }
}

/* 超小屏手机（≤480px）：进一步压缩内边距与字号，账号选择框收窄 */
@media (max-width: 480px) {
  body { font-size: 14px; }
  .az-top-acc { max-width: 112px; }
  .az-top-acc .layui-form-select,
  .az-top-acc .layui-form-select .layui-input { width: 100px !important; }
  .az-side { width: 184px; }
  .az-list li .c-from { width: 92px; }
  .az-list-head .c-from { width: 92px; }
  .az-read-subj { font-size: 15px; }
  .az-toolbar a, .az-toolbar button { padding: 0 8px; }
  .az-login-box { padding: 22px 16px 18px; }
  .az-compose { padding: 12px 12px 0; }
}

/* ==========================================================
   通讯录备注展示：(备注名)邮箱
   ========================================================== */
.az-remark { color: var(--az-main); font-weight: 400; }
.az-remark-paren { color: var(--az-main); font-weight: 400; }
/* 读信页发件人旁的备注小标签 */
.az-read-remark {
  display: inline-block; background: var(--az-tint); color: var(--az-main);
  border-radius: 2px; padding: 0 5px; font-size: 13px; margin-left: 6px; font-weight: 400;
}
/* 列表页已发送时收件人备注 */
.c-from .az-remark { margin-right: 2px; }