/* ===== XHC 网邮 · Outlook Fluent UI + 液态玻璃（Liquid Glass）===== */

:root{
  /* ---- Fluent 色板 ---- */
  --f-blue:#0078d4; --f-blue-hover:#106ebe; --f-blue-press:#005a9e; --f-blue-tint:#deecf9;
  --f-blue-soft:rgba(0,120,212,.12);
  --f-accent:#F2A65A; --f-accent-2:#FFD54A;   /* XHC 品牌暖橙 */
  --f-text:#323130; --f-text-2:#605e5c; --f-text-3:#8a8886;
  --f-border:#e6e4e2; --f-border-2:#d8d6d4;
  --f-hover:rgba(0,0,0,.04); --f-sel:rgba(0,120,212,.10);
  --f-danger:#d13438; --f-danger-hover:#b32025;
  --f-ok:#107c10;

  /* ---- 玻璃 ---- */
  --glass-bg:rgba(255,255,255,.55);
  --glass-bg-strong:rgba(255,255,255,.72);
  --glass-border:rgba(255,255,255,.65);
  --glass-blur:blur(26px) saturate(180%);
  --glass-shadow:0 18px 48px rgba(15,40,80,.22), 0 4px 12px rgba(15,40,80,.14),
                 inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(255,255,255,.20);

  /* ---- Fluent 圆角 / 阴影 ---- */
  --r-sm:4px; --r:8px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --elev-2:0 1.6px 3.6px rgba(0,0,0,.13), 0 .3px .9px rgba(0,0,0,.11);
  --elev-8:0 6.4px 14.4px rgba(0,0,0,.13), 0 1.2px 3.6px rgba(0,0,0,.11);
  --elev-16:0 12.8px 28.8px rgba(0,0,0,.15), 0 2.4px 7.2px rgba(0,0,0,.11);
}

*{box-sizing:border-box;}
html,body{margin:0;height:100%;
  font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Microsoft YaHei",sans-serif;
  color:var(--f-text);font-size:14px;line-height:1.5;
  /* 液态玻璃底色：柔和马卡龙网格渐变 */
  background:
    radial-gradient(1100px 700px at 12% -8%, #e8f1ff 0%, transparent 55%),
    radial-gradient(900px 620px at 92% 8%, #fdeede 0%, transparent 52%),
    radial-gradient(1000px 800px at 78% 100%, #e9fbff 0%, transparent 55%),
    radial-gradient(800px 700px at 8% 96%, #f3ecff 0%, transparent 55%),
    linear-gradient(180deg,#f6f9fe 0%, #eef2f8 100%);
  background-attachment:fixed;
}
.hidden{display:none !important;}
button{font-family:inherit;cursor:pointer;}

/* ============ 通用玻璃面板 ============ */
.glass{
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
}

/* ============ 登录（Fluent + 液态玻璃） ============ */
.login-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:100;overflow:hidden;}
.login-bg{position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(circle at 18% 12%, #bcdcff 0%, transparent 38%),
    radial-gradient(circle at 84% 22%, #ffd9b0 0%, transparent 38%),
    radial-gradient(circle at 70% 88%, #b8f0ff 0%, transparent 40%),
    radial-gradient(circle at 22% 86%, #d8c4ff 0%, transparent 40%),
    linear-gradient(180deg,#eaf3ff 0%, #d4e7fb 42%, #bcd6ef 100%);}
/* 模糊的光晕，营造玻璃折射 */
.login-blobs{position:absolute;inset:0;z-index:-1;filter:blur(46px);overflow:hidden;}
.login-blobs .blob{position:absolute;border-radius:50%;opacity:.75;
  mix-blend-mode:screen;animation:float 14s ease-in-out infinite;}
.blob.b1{width:340px;height:340px;left:8%;top:14%;background:radial-gradient(circle,#7cc0ff,transparent 70%);}
.blob.b2{width:300px;height:300px;right:10%;top:20%;background:radial-gradient(circle,#ffb877,transparent 70%);animation-delay:-3s;}
.blob.b3{width:380px;height:380px;right:18%;bottom:8%;background:radial-gradient(circle,#7ef0ff,transparent 70%);animation-delay:-6s;}
.blob.b4{width:260px;height:260px;left:20%;bottom:12%;background:radial-gradient(circle,#c39bff,transparent 70%);animation-delay:-9s;}
@keyframes float{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(40px,-30px) scale(1.08);}
  66%{transform:translate(-30px,25px) scale(.95);}
}
.login-card{position:relative;width:460px;max-width:92vw;padding:42px 44px 30px;text-align:center;
  border-radius:var(--r-xl);}
.login-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 30%);}

.login-welcome{font-size:27px;font-weight:600;letter-spacing:.2px;color:#1b1a19;margin-bottom:4px;}
.login-providers{display:flex;justify-content:center;align-items:center;gap:20px;margin:22px 0 4px;}
.provider-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  position:relative;transition:transform .15s, filter .15s;}
.provider-icon:hover{transform:translateY(-2px);filter:drop-shadow(0 6px 10px rgba(0,0,0,.12));}
.provider-icon img{width:100%;height:100%;object-fit:contain;display:block;}
.login-sub{color:#5a5856;margin:8px 0 26px;font-size:13.5px;}

.login-card label{display:block;text-align:left;margin:18px 0 6px;font-size:13px;
  color:#484644;font-weight:500;}
.login-card input{width:100%;padding:12px 14px;border:1px solid var(--f-border-2);border-radius:var(--r-sm);
  font-size:15px;outline:none;background:rgba(255,255,255,.7);color:var(--f-text);
  transition:border-color .15s, box-shadow .15s, background .15s;}
.login-card input:focus{border-color:var(--f-blue);background:#fff;
  box-shadow:0 0 0 3px var(--f-blue-soft);}
.login-hint{text-align:left;margin-top:8px;font-size:12px;color:#797775;}
.login-card .btn.block{margin-top:22px;padding:12px;font-size:15px;border-radius:var(--r-sm);}

.login-msg{text-align:left;margin-top:12px;font-size:13px;color:var(--f-danger);min-height:18px;}
.login-row{display:flex;justify-content:space-between;margin-top:14px;font-size:13px;}
.login-row a{color:var(--f-blue);text-decoration:none;}
.login-row a:hover{text-decoration:underline;}
.login-mask{font-size:13px;color:#5a5856;margin:4px 0 18px;text-align:left;}
.login-footer{margin-top:24px;padding-top:20px;border-top:1px solid rgba(0,0,0,.08);font-size:13px;color:#5a5856;}
.login-footer a{color:var(--f-blue);text-decoration:none;font-weight:600;}
.login-footer a:hover{text-decoration:underline;}

/* ============ 主应用壳 ============ */
.app{display:flex;flex-direction:column;height:100vh;}

/* 顶栏：Fluent command bar + 玻璃 */
.topbar{height:52px;display:flex;align-items:center;gap:14px;flex-shrink:0;padding:0 14px;
  background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--glass-border);box-shadow:var(--elev-8);z-index:5;}
.topbar .brand{font-size:17px;font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:8px;color:#1b1a19;}
.logo-dot{display:inline-block;width:13px;height:13px;border-radius:4px;
  background:linear-gradient(135deg,var(--f-accent),var(--f-accent-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);}
.account-switch select{background:rgba(255,255,255,.55);color:var(--f-text);border:1px solid var(--f-border-2);
  padding:6px 10px;border-radius:var(--r-sm);max-width:230px;font-size:13px;outline:none;}
.account-switch select:focus{border-color:var(--f-blue);box-shadow:0 0 0 3px var(--f-blue-soft);}
.account-switch select option{color:#000;}
.topbar-search{flex:1;display:flex;gap:6px;max-width:540px;}
.topbar-search input{flex:1;padding:8px 12px;border:1px solid var(--f-border-2);border-radius:var(--r-pill);
  font-size:13px;background:rgba(255,255,255,.6);outline:none;}
.topbar-search input:focus{border-color:var(--f-blue);background:#fff;box-shadow:0 0 0 3px var(--f-blue-soft);}
.topbar-actions{display:flex;gap:6px;margin-left:auto;}

/* 三栏：玻璃面板 */
.body{flex:1;display:flex;min-height:0;gap:0;}
.sidebar{width:232px;background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-right:1px solid var(--glass-border);overflow-y:auto;flex-shrink:0;}
.sidebar-head{padding:14px 16px 8px;font-weight:600;font-size:12px;color:var(--f-text-3);
  text-transform:uppercase;letter-spacing:.6px;}
.folder-list{list-style:none;margin:0;padding:0 8px;}
.folder-list li{padding:9px 12px;cursor:pointer;display:flex;align-items:center;gap:9px;font-size:14px;
  border-radius:var(--r-sm);color:#3b3a39;transition:background .12s;}
.folder-list li:hover{background:var(--f-hover);}
.folder-list li.active{background:var(--f-blue-soft);color:var(--f-blue);font-weight:600;}
.folder-list li .cnt{margin-left:auto;font-size:12px;color:var(--f-text-3);}
.folder-ic{width:18px;text-align:center;}

.listpane{width:384px;background:var(--glass-bg-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-right:1px solid var(--glass-border);display:flex;flex-direction:column;flex-shrink:0;min-height:0;}
.list-head{padding:14px 16px;font-weight:600;font-size:15px;border-bottom:1px solid var(--f-border);
  display:flex;justify-content:space-between;align-items:center;}
.msg-list{flex:1;overflow-y:auto;padding:6px;}
.msg-item{padding:12px 14px;border-radius:var(--r);cursor:pointer;position:relative;
  border:1px solid transparent;transition:background .12s,border-color .12s;}
.msg-item:hover{background:var(--f-hover);}
.msg-item.active{background:#fff;border-color:var(--f-border);box-shadow:var(--elev-2);}
.msg-item.unread .msg-subj{font-weight:700;color:#1b1a19;}
.msg-item .msg-from{font-size:13.5px;font-weight:600;margin-bottom:2px;color:#2b2a29;}
.msg-item .msg-subj{font-size:13.5px;color:#3b3a39;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.msg-item .msg-snippet{font-size:12.5px;color:var(--f-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.msg-item .msg-date{position:absolute;top:12px;right:14px;font-size:11px;color:var(--f-text-3);}
.msg-item .msg-flags{position:absolute;bottom:10px;right:14px;font-size:12px;}

.reading{flex:1;background:transparent;overflow-y:auto;min-height:0;padding:16px;}
.reading-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--f-text-3);}
.reading-card{background:var(--glass-bg-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);margin:0;padding:0;border-radius:var(--r-lg);box-shadow:var(--elev-8);overflow:hidden;}
.reading-head{padding:18px 22px;border-bottom:1px solid var(--f-border);}
.reading-subject{font-size:20px;font-weight:600;margin-bottom:8px;color:#1b1a19;}
.reading-meta{font-size:13px;color:#4a4846;line-height:1.7;}
.reading-meta .addr{color:var(--f-blue);}
.reading-actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;}
.reading-body{padding:20px 22px;line-height:1.7;font-size:14px;color:#2b2a29;}
.reading-body img{max-width:100%;border-radius:var(--r-sm);}
.reading-iframe{width:100%;min-height:420px;border:1px solid var(--f-border);border-radius:var(--r-sm);background:#fff;}
.reading-attachments{padding:0 22px 20px;}
.reading-attachments .att{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--f-border);
  border-radius:var(--r-sm);margin:0 8px 8px 0;background:rgba(255,255,255,.7);font-size:13px;text-decoration:none;color:#3b3a39;}
.reading-attachments .att:hover{background:#fff;}

.pager{padding:10px 16px;display:flex;justify-content:center;gap:8px;border-top:1px solid var(--f-border);}

/* ============ 按钮（Fluent） ============ */
.btn{border:1px solid var(--f-border-2);background:#fff;color:var(--f-text);
  padding:7px 16px;border-radius:var(--r-sm);font-size:13px;transition:.12s;}
.btn:hover{background:var(--f-hover);border-color:var(--f-border-2);}
.btn:active{background:#ebe9e8;}
.btn:focus-visible{outline:2px solid var(--f-blue);outline-offset:1px;}
.btn.primary{background:var(--f-blue);border-color:var(--f-blue);color:#fff;}
.btn.primary:hover{background:var(--f-blue-hover);border-color:var(--f-blue-hover);}
.btn.primary:active{background:var(--f-blue-press);}
.btn.ghost{background:transparent;border-color:transparent;}
.btn.ghost:hover{background:var(--f-hover);}
.btn.sm{padding:5px 12px;font-size:12px;}
.btn.block{width:100%;}
.topbar-actions .btn.ghost{color:#3b3a39;border-color:transparent;}
.topbar-actions .btn.ghost:hover{background:rgba(0,0,0,.06);}

/* 星标 */
.star{color:var(--f-accent-2);cursor:pointer;}
.star.off{color:#c8c6c4;}
.att-ic{font-size:11px;}

/* ============ 弹窗（玻璃） ============ */
.modal{position:fixed;inset:0;background:rgba(20,30,50,.28);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:50;}
.modal-box{background:var(--glass-bg-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);
  width:440px;max-width:94vw;max-height:92vh;overflow-y:auto;border-radius:var(--r-lg);padding:22px 24px;
  animation:pop .18s ease-out;}
@keyframes pop{from{transform:translateY(8px) scale(.98);opacity:0;}to{transform:none;opacity:1;}}
.modal-box.wide{width:680px;}
.modal-box.compose-box{width:720px;}
.modal-head{display:flex;justify-content:space-between;align-items:center;font-size:17px;font-weight:600;
  margin-bottom:14px;color:#1b1a19;}
.modal-close{border:none;background:none;font-size:18px;color:var(--f-text-3);cursor:pointer;border-radius:50%;
  width:30px;height:30px;}
.modal-close:hover{background:var(--f-hover);color:var(--f-text);}
.modal-foot{margin-top:16px;display:flex;gap:10px;align-items:center;}

/* 表单 */
.form-grid{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:center;}
.form-grid label{font-size:13px;color:#5a5856;white-space:nowrap;}
.form-grid input,.form-grid textarea,.form-grid select{
  padding:9px 11px;border:1px solid var(--f-border-2);border-radius:var(--r-sm);font-size:13px;font-family:inherit;width:100%;
  background:rgba(255,255,255,.7);outline:none;color:var(--f-text);}
.form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus{
  border-color:var(--f-blue);background:#fff;box-shadow:0 0 0 3px var(--f-blue-soft);}
.form-grid textarea{resize:vertical;}
.inline{display:flex;gap:8px;}
.inline input{flex:1;}.inline select{width:auto;}

/* 写邮件 */
.compose-fields{display:grid;grid-template-columns:auto 1fr;gap:8px 10px;align-items:center;margin-bottom:8px;}
.compose-fields label{font-size:13px;color:#5a5856;}
.compose-fields input{padding:8px 11px;border:1px solid var(--f-border-2);border-radius:var(--r-sm);font-size:13px;
  background:rgba(255,255,255,.7);outline:none;}
.compose-fields input:focus{border-color:var(--f-blue);background:#fff;box-shadow:0 0 0 3px var(--f-blue-soft);}
.compose-toolbar{display:flex;gap:4px;padding:6px 0;border-top:1px solid var(--f-border);border-bottom:1px solid var(--f-border);}
.compose-body{min-height:240px;padding:12px;border:1px solid var(--f-border-2);border-radius:var(--r-sm);margin:8px 0;
  outline:none;overflow-y:auto;line-height:1.6;background:rgba(255,255,255,.7);}
.compose-body:focus{border-color:var(--f-blue);background:#fff;box-shadow:0 0 0 3px var(--f-blue-soft);}
.compose-body:empty:before{content:attr(placeholder);color:#a3a1a0;}
.attach-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.attach-list .att-chip{background:var(--f-blue-tint);border:1px solid #bfe0f5;color:#20588b;padding:4px 8px;border-radius:var(--r-sm);font-size:12px;
  display:flex;align-items:center;gap:6px;}
.attach-list .att-chip b{cursor:pointer;color:var(--f-danger);}
.compose-foot{display:flex;gap:10px;align-items:center;}

/* 联系人 */
.contacts-toolbar{display:flex;gap:10px;margin-bottom:12px;}
.contacts-toolbar input{flex:1;padding:8px 11px;border:1px solid var(--f-border-2);border-radius:var(--r-sm);background:rgba(255,255,255,.7);outline:none;}
.contacts-toolbar input:focus{border-color:var(--f-blue);background:#fff;box-shadow:0 0 0 3px var(--f-blue-soft);}
.contacts-table{width:100%;border-collapse:collapse;font-size:13px;}
.contacts-table th,.contacts-table td{border-bottom:1px solid var(--f-border);padding:9px 10px;text-align:left;}
.contacts-table th{color:var(--f-text-3);font-weight:600;}
.contacts-table .row-actions button{margin-right:6px;font-size:12px;padding:3px 10px;}

/* 设置 */
.settings-section{padding:12px 0;border-bottom:1px solid var(--f-border);}
.settings-section h4{margin:0 0 8px;font-size:14px;color:#1b1a19;}
.settings-accounts .acc-row{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid #f0efed;}
.settings-accounts .acc-row .e{font-weight:600;color:#2b2a29;}
.settings-accounts .acc-row .l{color:var(--f-text-3);font-size:12px;}
.settings-section select,.settings-section input{padding:8px 11px;border:1px solid var(--f-border-2);border-radius:var(--r-sm);
  background:rgba(255,255,255,.7);outline:none;font-size:13px;}
.settings-section select:focus,.settings-section input:focus{border-color:var(--f-blue);background:#fff;box-shadow:0 0 0 3px var(--f-blue-soft);}
.presets{margin-top:14px;font-size:12px;color:var(--f-text-3);}
.presets a{color:var(--f-blue);cursor:pointer;margin-right:10px;font-weight:600;}

/* 账户弹窗：服务商 Logo 识别 */
.account-logo{display:flex;align-items:center;gap:10px;margin:2px 0 16px;padding:10px 12px;
  border-radius:var(--r);background:rgba(255,255,255,.6);border:1px solid var(--f-border);}
.account-logo .al-logo{width:30px;height:30px;border-radius:6px;object-fit:contain;display:block;flex:0 0 auto;}
.account-logo .al-name{font-weight:600;font-size:14px;color:#1b1a19;}

/* Toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:rgba(43,42,41,.92);color:#fff;
  padding:10px 18px;border-radius:var(--r-pill);z-index:200;font-size:13px;box-shadow:var(--elev-8);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}

/* ============ 响应式 ============ */
@media (max-width:900px){
  .sidebar{width:160px;}
  .listpane{width:300px;}
  .topbar-search{max-width:260px;}
}
@media (max-width:680px){
  .sidebar{display:none;}
  .listpane{width:42%;}
  .reading{width:58%;}
  .topbar .brand{display:none;}
  .login-card{padding:30px 22px;}
}

/* ============ 159 免费邮 专属 ============ */
.login-welcome{font-size:30px;font-weight:700;letter-spacing:.5px;
  background:linear-gradient(135deg,var(--f-blue),var(--f-accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.tabs{display:flex;gap:8px;margin:20px 0 8px;justify-content:center;}
.tab{border:1px solid var(--f-border-2);background:rgba(255,255,255,.6);color:var(--f-text-2);
  padding:8px 30px;border-radius:var(--r-pill);font-size:14px;font-weight:600;transition:.15s;}
.tab:hover{background:#fff;}
.tab.active{background:var(--f-blue);border-color:var(--f-blue);color:#fff;
  box-shadow:0 6px 16px rgba(0,120,212,.28);}
.login-pill{display:inline-block;margin-top:14px;padding:5px 14px;border-radius:var(--r-pill);
  background:var(--f-blue-soft);color:var(--f-blue);font-size:12.5px;font-weight:600;}

.topbar .who{font-size:13px;color:var(--f-text-2);white-space:nowrap;
  background:rgba(255,255,255,.6);padding:5px 12px;border-radius:var(--r-pill);
  border:1px solid var(--f-border);max-width:240px;overflow:hidden;text-overflow:ellipsis;}
.topbar .brand{font-weight:700;}
.topbar .brand .logo-dot{background:linear-gradient(135deg,var(--f-blue),var(--f-accent));}