:root {
  --bg: #eef4fb;
  --panel: #ffffff;
  --panel-soft: #f7f9fc;
  --sidebar: #e7f0fb;
  --text: #152235;
  --muted: #7e8ba0;
  --line: #e4eaf2;
  --blue: #1677ff;
  --blue-deep: #0f5ed7;
  --blue-soft: #dbeaff;
  --danger: #e5484d;
  --success: #20a46b;
  --warning: #d48806;
  --purple: #6d5dfc;
  --shadow: 0 18px 50px rgba(38, 72, 120, 0.12);
  --radius: 18px;
  --topbar-height: 72px;
  --sidebar-width: 238px;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}

:root[data-theme="dark"] {
  --bg: #0d1520;
  --panel: #131e2c;
  --panel-soft: #182536;
  --sidebar: #111e2d;
  --text: #edf5ff;
  --muted: #91a3b8;
  --line: #243448;
  --blue: #4e9cff;
  --blue-deep: #77b4ff;
  --blue-soft: #173a66;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { min-height: 100vh; overflow: hidden; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; }
.hidden { display: none !important; }
.mobile-only { display: none; }

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  padding: 28px;
  background:
    radial-gradient(circle at 20% 15%, rgba(78,156,255,.34), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(109,93,252,.22), transparent 32%),
    linear-gradient(135deg, #eef6ff, #f7f4ff 55%, #eef9ff);
}
.login-glow { position: absolute; border-radius: 999px; filter: blur(8px); opacity: .75; }
.glow-one { width: 360px; height: 360px; background: linear-gradient(135deg,#52a7ff,#7b61ff); top:-130px; right:-90px; }
.glow-two { width: 270px; height: 270px; background: linear-gradient(135deg,#3fd6c7,#1677ff); bottom:-110px; left:-70px; }
.login-card {
  position: relative; z-index:1; width:min(980px,100%); min-height:610px; padding:48px;
  border:1px solid rgba(255,255,255,.8); border-radius:30px; background:rgba(255,255,255,.84);
  backdrop-filter:blur(22px); box-shadow:0 35px 100px rgba(31,78,135,.18);
  display:grid; grid-template-columns:1fr 420px; grid-template-areas:"brand brand" "intro form" "foot foot"; gap:32px 64px;
}
.login-brand { grid-area:brand; display:flex; align-items:center; gap:14px; }
.login-brand h1,.login-brand p { margin:0; }
.login-brand p { margin-top:4px; color:#6c7d94; }
.login-intro { grid-area:intro; align-self:center; }
.login-intro h2 { font-size:clamp(34px,5vw,54px); line-height:1.08; margin:18px 0; color:#152235; }
.login-intro p { color:#6c7d94; line-height:1.8; font-size:16px; max-width:460px; }
.eyebrow { display:inline-flex; padding:7px 12px; border-radius:999px; background:#e7f1ff; color:#136fe2; font-size:13px; font-weight:700; }
.feature-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; }
.feature-row span { padding:7px 10px; border-radius:999px; background:#f2f6fb; color:#5b6d84; font-size:12px; border:1px solid #e3eaf3; }
.login-form { grid-area:form; align-self:center; background:rgba(255,255,255,.86); border:1px solid #e5ecf5; border-radius:22px; padding:28px; box-shadow:0 18px 50px rgba(61,99,151,.1); }
.login-form label { display:block; margin-bottom:18px; }
.login-form label span { display:block; font-weight:700; margin-bottom:8px; color:#33445a; }
.login-form input { width:100%; border:1px solid #d8e1ed; border-radius:13px; padding:14px 15px; background:#f8fbff; color:#152235; outline:none; }
.login-form input:focus { border-color:#1677ff; box-shadow:0 0 0 4px rgba(22,119,255,.1); }
.login-foot { grid-area:foot; text-align:center; color:#8190a3; font-size:13px; }

.brand-mark { width:52px; height:52px; border-radius:18px; background:linear-gradient(135deg,#1677ff,#6a5cff); color:#fff; display:grid; place-items:center; font-weight:900; font-size:24px; box-shadow:0 12px 30px rgba(22,119,255,.3); }
.brand-mark.small { width:42px; height:42px; border-radius:14px; font-size:20px; }
.primary-button,.compose-button { border:0; cursor:pointer; background:linear-gradient(135deg,var(--blue),#5f69ff); color:#fff; box-shadow:0 12px 24px rgba(22,119,255,.24); }
.primary-button { border-radius:12px; padding:11px 20px; font-weight:800; }
.primary-button.large { width:100%; padding:15px 20px; margin-top:6px; }
.primary-button:disabled { opacity:.6; cursor:wait; }

.app-shell { min-height:100vh; display:grid; grid-template-columns:var(--sidebar-width) minmax(0,1fr); grid-template-rows:var(--topbar-height) calc(100vh - var(--topbar-height)); grid-template-areas:"top top" "side main"; }
.topbar { grid-area:top; height:var(--topbar-height); display:flex; align-items:center; gap:26px; padding:0 24px; background:color-mix(in srgb,var(--panel) 92%,transparent); border-bottom:1px solid var(--line); backdrop-filter:blur(18px); position:relative; z-index:30; }
.top-brand { width:calc(var(--sidebar-width) - 24px); display:flex; align-items:center; gap:12px; }
.top-brand strong,.top-brand small { display:block; }
.top-brand small { color:var(--muted); margin-top:2px; }
.global-search { width:min(720px,48vw); height:44px; border-radius:14px; background:var(--panel-soft); border:1px solid var(--line); display:flex; align-items:center; padding:0 12px; gap:10px; }
.global-search input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--text); }
.global-search select { border:0; background:transparent; color:var(--muted); outline:0; max-width:120px; }
.search-clear,.link-button { border:0; background:transparent; color:var(--blue); cursor:pointer; padding:4px; }
.top-actions { margin-left:auto; display:flex; align-items:center; gap:8px; }
.icon-button { width:40px; height:40px; border-radius:12px; border:1px solid var(--line); background:var(--panel); display:grid; place-items:center; cursor:pointer; font-size:18px; }
.icon-button:hover,.soft-button:hover,.nav-item:hover { border-color:color-mix(in srgb,var(--blue) 35%,var(--line)); background:var(--blue-soft); }
.profile-button { border:0; background:transparent; display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer; padding:4px 6px; }
.profile-button strong,.profile-button small { display:block; max-width:190px; overflow:hidden; text-overflow:ellipsis; }
.profile-button small { color:var(--muted); margin-top:2px; }
.avatar { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,#1677ff,#5e5ce6); color:#fff; font-weight:800; flex:none; }
.avatar.large { width:48px; height:48px; }

.sidebar { grid-area:side; background:var(--sidebar); border-right:1px solid var(--line); padding:18px 14px; overflow-y:auto; display:flex; flex-direction:column; position:relative; z-index:25; }
.compose-button { height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; gap:10px; font-size:16px; }
.folder-nav { margin-top:18px; }
.nav-item { width:100%; border:1px solid transparent; background:transparent; border-radius:12px; min-height:42px; display:flex; align-items:center; gap:11px; padding:9px 12px; color:var(--text); cursor:pointer; text-align:left; margin-bottom:3px; }
.nav-item.active { background:color-mix(in srgb,var(--blue) 13%,var(--panel)); border-color:color-mix(in srgb,var(--blue) 20%,var(--line)); color:var(--blue-deep); font-weight:800; }
.nav-icon { width:22px; text-align:center; color:var(--muted); }
.nav-count { margin-left:auto; min-width:22px; padding:2px 7px; border-radius:999px; background:color-mix(in srgb,var(--blue) 12%,var(--panel)); color:var(--blue-deep); font-size:12px; text-align:center; }
.sidebar-link { width:100%; border:0; background:transparent; color:var(--blue); text-align:left; padding:8px 12px; cursor:pointer; font-size:13px; }
.sidebar-section { margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.sidebar-title { color:var(--muted); font-size:12px; padding:0 12px 8px; }
.sidebar-foot { margin-top:auto; border-top:1px solid var(--line); padding:16px 8px 4px; color:var(--muted); }
.capacity-row { display:flex; justify-content:space-between; font-size:12px; }
.status-ok { color:var(--success); }
.capacity-track { height:7px; background:color-mix(in srgb,var(--muted) 15%,transparent); border-radius:999px; overflow:hidden; margin:9px 0; }
.capacity-track span { width:18%; height:100%; display:block; border-radius:inherit; background:linear-gradient(90deg,var(--blue),#5f69ff); }

.main-area { grid-area:main; min-width:0; min-height:0; padding:16px; overflow:hidden; }
.mail-view,.reader-view,.compose-view,.tool-view { height:100%; min-height:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.mail-view { display:flex; flex-direction:column; }
.mail-toolbar,.reader-toolbar,.compose-topbar { min-height:66px; padding:10px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px; }
.toolbar-left { display:flex; align-items:center; gap:12px; min-width:220px; }
.toolbar-left h2,.toolbar-left small { display:block; margin:0; }
.toolbar-left h2 { font-size:18px; }
.toolbar-left small { color:var(--muted); margin-top:2px; }
.select-all input { width:18px; height:18px; }
.toolbar-actions { display:flex; align-items:center; gap:8px; flex:1; overflow-x:auto; }
.toolbar-right { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; }
.soft-button,.soft-select { min-height:38px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--text); padding:7px 12px; }
.soft-button { cursor:pointer; white-space:nowrap; }
.soft-button.danger { color:var(--danger); }
.soft-button.success { color:var(--success); }
.mail-list { flex:1; overflow-y:auto; min-height:0; }
.mail-group-title { position:sticky; top:0; z-index:2; background:color-mix(in srgb,var(--panel) 94%,transparent); backdrop-filter:blur(12px); padding:10px 18px 6px 58px; color:var(--muted); font-size:12px; font-weight:800; border-bottom:1px solid var(--line); }
.mail-row { min-height:58px; display:grid; grid-template-columns:36px 36px minmax(120px,220px) minmax(220px,1fr) auto 34px; align-items:center; gap:6px; padding:0 14px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .15s ease; }
.mail-row:hover { background:var(--panel-soft); }
.mail-row.unread { background:color-mix(in srgb,var(--blue) 5%,var(--panel)); }
.mail-row.unread .mail-sender,.mail-row.unread .mail-subject { font-weight:800; }
.mail-check { width:17px; height:17px; }
.mail-envelope { color:var(--muted); text-align:center; }
.mail-sender,.mail-subject-wrap { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-sender,.mail-subject { font-size:14px; }
.mail-preview { color:var(--muted); margin-left:8px; }
.mail-time { color:var(--muted); font-size:12px; white-space:nowrap; padding-left:12px; }
.mail-star { border:0; background:transparent; color:#b8c1ce; font-size:21px; cursor:pointer; padding:4px; }
.mail-star.active { color:#f2b705; }
.attachment-pill { display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:999px; background:var(--panel-soft); color:var(--muted); font-size:11px; margin-left:8px; }

.reader-view { overflow-y:auto; }
.reader-toolbar { position:sticky; top:0; z-index:5; background:color-mix(in srgb,var(--panel) 94%,transparent); backdrop-filter:blur(14px); }
.reader-actions { display:flex; gap:8px; flex-wrap:wrap; }
.message-card { max-width:1120px; margin:0 auto; padding:26px 34px 48px; }
.message-header { display:flex; justify-content:space-between; gap:28px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.subject-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.subject-row h1 { margin:0; font-size:25px; line-height:1.35; }
.security-badge { padding:5px 9px; border-radius:999px; background:color-mix(in srgb,var(--success) 12%,var(--panel)); color:var(--success); font-size:12px; font-weight:800; }
.sender-row { display:flex; align-items:center; gap:12px; margin-top:18px; }
.sender-meta strong,.sender-meta span { display:block; }
.sender-meta span { color:var(--muted); font-size:13px; margin-top:3px; }
.message-date { color:var(--muted); font-size:13px; text-align:right; white-space:nowrap; }
.message-date time,.message-date button { display:block; margin-left:auto; }
.message-details { margin-top:14px; padding:14px; border-radius:12px; background:var(--panel-soft); color:var(--muted); font-size:13px; line-height:1.8; }
.attachment-strip { margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; }
.attachment-card { display:inline-flex; align-items:center; gap:10px; min-width:220px; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--panel-soft); text-decoration:none; color:var(--text); }
.attachment-card small { color:var(--muted); display:block; margin-top:2px; }
.message-body { padding:30px 0; line-height:1.78; overflow-wrap:anywhere; }
.message-body img { max-width:100%; height:auto; }
.message-body table { max-width:100%; }
.message-body.text-body { white-space:pre-wrap; }
.quick-reply { padding-top:20px; border-top:1px solid var(--line); }
.quick-reply-box { width:100%; min-height:82px; border:1px dashed color-mix(in srgb,var(--blue) 35%,var(--line)); background:var(--panel-soft); color:var(--muted); border-radius:14px; cursor:text; }

.compose-view { display:flex; flex-direction:column; }
.compose-topbar { justify-content:space-between; flex:none; }
.compose-title { display:flex; align-items:center; gap:14px; }
.compose-title h2,.compose-title small { margin:0; display:block; }
.compose-title h2 { font-size:20px; }
.compose-title small { color:var(--muted); margin-top:2px; }
.compose-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.compose-layout { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 290px; }
.compose-main { min-width:0; display:flex; flex-direction:column; border-right:1px solid var(--line); }
.compose-field { min-height:50px; display:grid; grid-template-columns:82px minmax(0,1fr) auto; align-items:center; gap:8px; padding:0 18px; border-bottom:1px solid var(--line); }
.compose-field label { color:var(--muted); }
.compose-field input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--text); }
.editor-toolbar { min-height:44px; display:flex; align-items:center; gap:6px; padding:6px 14px; border-bottom:1px solid var(--line); background:var(--panel-soft); overflow-x:auto; }
.editor-toolbar button { border:1px solid var(--line); background:var(--panel); border-radius:8px; padding:5px 9px; cursor:pointer; white-space:nowrap; }
.editor-toolbar span { flex:1; }
.compose-attachments { padding:10px 14px; display:flex; gap:8px; flex-wrap:wrap; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--blue) 3%,var(--panel)); }
.compose-file { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:10px; padding:7px 9px; background:var(--panel); }
.compose-file button { border:0; background:transparent; color:var(--danger); cursor:pointer; }
.compose-editor { flex:1; min-height:260px; padding:22px; outline:0; overflow-y:auto; line-height:1.75; }
.compose-editor:empty::before { content:attr(data-placeholder); color:var(--muted); }
.compose-bottom { min-height:58px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 18px; color:var(--muted); font-size:13px; }
.sender-identity strong { color:var(--text); }
.compose-contacts { background:var(--panel-soft); min-height:0; overflow-y:auto; padding:14px; }
.contact-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.contact-search { width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 11px; background:var(--panel); color:var(--text); outline:0; }
.contact-groups { display:flex; gap:6px; flex-wrap:wrap; margin:10px 0; }
.group-chip { border:1px solid var(--line); background:var(--panel); color:var(--muted); border-radius:999px; padding:5px 9px; cursor:pointer; font-size:12px; }
.group-chip.active { background:var(--blue-soft); color:var(--blue-deep); border-color:color-mix(in srgb,var(--blue) 28%,var(--line)); }
.compose-contact-list { display:grid; gap:6px; }
.compose-contact { width:100%; display:grid; grid-template-columns:34px minmax(0,1fr); gap:9px; align-items:center; border:1px solid transparent; background:transparent; border-radius:10px; padding:8px; cursor:pointer; text-align:left; }
.compose-contact:hover { background:var(--panel); border-color:var(--line); }
.compose-contact strong,.compose-contact small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.compose-contact small { color:var(--muted); margin-top:2px; }

.tool-view { padding:24px; overflow-y:auto; }
.tool-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:22px; }
.tool-head h2,.tool-head p { margin:0; }
.tool-head p { margin-top:5px; color:var(--muted); }
.tool-actions { display:flex; gap:8px; flex-wrap:wrap; }
.attachment-table,.contacts-shell,.settings-card,.security-card,.trust-card { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel); }
.table-row { display:grid; grid-template-columns:38px minmax(180px,1.2fr) 110px 180px minmax(180px,1fr); align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line); text-decoration:none; }
.table-row:last-child { border-bottom:0; }
.table-row.header { background:var(--panel-soft); color:var(--muted); font-size:12px; font-weight:800; }
.contacts-shell { display:grid; grid-template-columns:220px minmax(0,1fr); min-height:560px; }
.contact-sidebar { background:var(--panel-soft); border-right:1px solid var(--line); padding:14px; }
.contact-sidebar button { width:100%; text-align:left; }
.contact-group-item { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:40px; border:0; background:transparent; border-radius:10px; padding:8px 10px; cursor:pointer; color:var(--text); }
.contact-group-item.active { background:var(--blue-soft); color:var(--blue-deep); font-weight:800; }
.contact-main { min-width:0; }
.contact-toolbar { padding:14px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line); }
.contact-toolbar input { flex:1; min-width:0; border:1px solid var(--line); background:var(--panel-soft); color:var(--text); border-radius:10px; padding:10px 12px; }
.contact-row { display:grid; grid-template-columns:44px minmax(150px,1fr) minmax(220px,1.4fr) minmax(120px,.8fr) 150px; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line); }
.contact-row:last-child { border-bottom:0; }
.contact-tags { display:flex; gap:4px; flex-wrap:wrap; }
.contact-tag { font-size:11px; border-radius:999px; padding:3px 7px; background:var(--blue-soft); color:var(--blue-deep); }
.contact-actions { display:flex; gap:6px; justify-content:flex-end; }
.settings-card,.security-card,.trust-card { padding:20px; margin-bottom:16px; }
.settings-card h3,.security-card h3,.trust-card h3 { margin:0 0 16px; }
.settings-row { display:grid; grid-template-columns:190px 1fr; gap:20px; align-items:start; padding:12px 0; border-bottom:1px solid var(--line); }
.settings-row:last-child { border-bottom:0; }
.settings-row input,.settings-row textarea,.settings-row select,.modal-body input,.modal-body textarea,.modal-body select { width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--panel-soft); color:var(--text); }
.trust-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.trust-list { display:grid; gap:8px; }
.trust-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel-soft); }
.trust-item strong,.trust-item small { display:block; }
.trust-item small { color:var(--muted); margin-top:3px; }
.login-log { display:grid; grid-template-columns:170px minmax(140px,.8fr) minmax(260px,1.5fr); gap:12px; padding:12px 14px; border-bottom:1px solid var(--line); }
.login-log.header { color:var(--muted); background:var(--panel-soft); font-size:12px; font-weight:800; }

.modal-dialog { width:min(560px,calc(100vw - 28px)); border:0; border-radius:18px; padding:0; background:transparent; color:var(--text); }
.modal-dialog::backdrop { background:rgba(7,16,30,.48); backdrop-filter:blur(3px); }
.modal-card { background:var(--panel); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; }
.modal-head { min-height:58px; display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid var(--line); }
.modal-head h3 { margin:0; }
.modal-body { padding:18px; display:grid; gap:14px; max-height:65vh; overflow-y:auto; }
.modal-field label { display:block; font-weight:700; margin-bottom:7px; }
.checkbox-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.checkbox-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:9px; }
.modal-actions { padding:12px 16px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px; }

.empty-state { min-height:360px; display:grid; place-items:center; align-content:center; text-align:center; color:var(--muted); padding:40px; }
.empty-state h3,.empty-state p { margin:5px 0; }
.empty-icon { width:68px; height:68px; border-radius:22px; display:grid; place-items:center; background:var(--blue-soft); color:var(--blue); font-size:30px; margin-bottom:10px; }
.toast { position:fixed; left:50%; top:18px; transform:translate(-50%,-140%); z-index:1000; padding:11px 16px; border-radius:12px; color:#fff; background:#182538; box-shadow:var(--shadow); transition:transform .2s ease; max-width:min(560px,calc(100vw - 32px)); text-align:center; }
.toast.show { transform:translate(-50%,0); }
.toast.error { background:#b4232a; }
.sidebar-backdrop { position:fixed; inset:var(--topbar-height) 0 0; background:rgba(5,13,25,.45); z-index:20; }

body.density-compact .mail-row { min-height:46px; }
body.density-compact .mail-group-title { padding-top:7px; padding-bottom:4px; }

@media (max-width:1100px) {
  .compose-layout { grid-template-columns:minmax(0,1fr) 250px; }
  .toolbar-actions #spamSelectedButton { display:none; }
}
@media (max-width:980px) {
  :root { --sidebar-width:220px; }
  .login-card { grid-template-columns:1fr; grid-template-areas:"brand" "intro" "form" "foot"; max-width:620px; }
  .compose-layout { grid-template-columns:1fr; }
  .compose-contacts { display:none; }
  .compose-main { border-right:0; }
  .contacts-shell { grid-template-columns:180px minmax(0,1fr); }
}
@media (max-width:760px) {
  body { overflow:auto; }
  .desktop-only { display:none !important; }
  .mobile-only { display:grid; }
  .app-shell { display:block; }
  .topbar { height:64px; position:sticky; top:0; padding:0 10px; gap:8px; }
  .top-brand { width:auto; }
  .top-brand small { display:none; }
  .global-search { flex:1; width:auto; height:40px; }
  .global-search select { display:none; }
  .sidebar { position:fixed; left:0; top:64px; bottom:0; width:244px; transform:translateX(-105%); transition:transform .2s ease; }
  .sidebar.open { transform:translateX(0); }
  .main-area { padding:8px; height:calc(100vh - 64px); }
  .mail-toolbar { align-items:flex-start; flex-wrap:wrap; }
  .toolbar-left { min-width:0; flex:1; }
  .toolbar-actions { order:3; width:100%; }
  .mail-row { grid-template-columns:28px 28px minmax(90px,130px) minmax(150px,1fr) auto 30px; padding:0 8px; }
  .mail-preview { display:none; }
  .message-card { padding:18px 16px 36px; }
  .message-header { display:block; }
  .message-date { margin-top:14px; text-align:left; }
  .message-date time,.message-date button { margin-left:0; }
  .compose-topbar { align-items:flex-start; flex-wrap:wrap; }
  .compose-actions { width:100%; overflow-x:auto; flex-wrap:nowrap; }
  .compose-field { grid-template-columns:64px minmax(0,1fr) auto; padding:0 10px; }
  .editor-toolbar { padding:5px 8px; }
  .compose-editor { padding:16px; }
  .tool-view { padding:12px; }
  .contacts-shell { grid-template-columns:1fr; }
  .contact-sidebar { border-right:0; border-bottom:1px solid var(--line); }
  .contact-row { grid-template-columns:42px minmax(120px,1fr) minmax(160px,1.3fr) 90px; }
  .contact-row > :nth-child(4) { display:none; }
  .table-row { grid-template-columns:34px minmax(160px,1fr) 90px; }
  .table-row > :nth-child(4),.table-row > :nth-child(5) { display:none; }
  .settings-row { grid-template-columns:1fr; gap:8px; }
  .trust-grid { grid-template-columns:1fr; }
  .login-log { grid-template-columns:120px 1fr; }
  .login-log > :nth-child(3) { grid-column:1 / -1; color:var(--muted); }
  .login-card { min-height:0; padding:26px 20px; }
  .login-intro h2 { font-size:34px; }
}
@media (max-width:520px) {
  .top-brand strong { display:none; }
  .top-actions .icon-button { display:none; }
  .mail-row { grid-template-columns:24px 22px minmax(75px,105px) minmax(120px,1fr) 42px 28px; min-height:62px; font-size:12px; }
  .mail-time { white-space:normal; text-align:right; }
  .toolbar-right { display:none; }
  .reader-actions { overflow-x:auto; flex-wrap:nowrap; }
  .compose-bottom { align-items:flex-start; flex-direction:column; }
  .contact-row { grid-template-columns:38px minmax(100px,1fr) minmax(130px,1fr); }
  .contact-row > :nth-child(4),.contact-row > :nth-child(5) { display:none; }
  .checkbox-grid { grid-template-columns:1fr; }
}

/* ===== ZSHTEC Mail V3 enhancements ===== */
:root[data-theme="cloud"] {
  --bg:#eef4fb; --panel:#fff; --panel-soft:#f7f9fc; --sidebar:#e7f0fb; --text:#152235; --muted:#7e8ba0; --line:#e4eaf2;
  --blue:#1677ff; --blue-deep:#0f5ed7; --blue-soft:#dbeaff; --shadow:0 18px 50px rgba(38,72,120,.12);
}
:root[data-theme="blue"] {
  --bg:#eaf0fb; --panel:#fff; --panel-soft:#f2f5fb; --sidebar:#dfe8f7; --text:#14213a; --muted:#6f7e98; --line:#dce4f1;
  --blue:#315ed6; --blue-deep:#2048b6; --blue-soft:#dce5ff; --shadow:0 18px 50px rgba(34,64,125,.15);
}
:root[data-theme="emerald"] {
  --bg:#edf7f4; --panel:#fff; --panel-soft:#f4faf8; --sidebar:#e0f1ec; --text:#17302a; --muted:#718b83; --line:#dbeae5;
  --blue:#17a67a; --blue-deep:#087b59; --blue-soft:#d9f3ea; --success:#159b68; --shadow:0 18px 50px rgba(23,112,87,.12);
}
:root[data-theme="sunset"] {
  --bg:#fff4ee; --panel:#fff; --panel-soft:#fff8f4; --sidebar:#fae9df; --text:#38251f; --muted:#9b776a; --line:#f0ddd4;
  --blue:#f06b3d; --blue-deep:#c94820; --blue-soft:#ffe2d6; --warning:#dd7800; --shadow:0 18px 50px rgba(165,75,40,.13);
}
:root[data-theme="rose"] {
  --bg:#fff1f4; --panel:#fff; --panel-soft:#fff7f9; --sidebar:#f9e4ea; --text:#38222a; --muted:#9a7480; --line:#efdae1;
  --blue:#e8587d; --blue-deep:#c63660; --blue-soft:#ffdce6; --shadow:0 18px 50px rgba(159,54,84,.13);
}
:root[data-theme="graphite"] {
  --bg:#eef0f3; --panel:#fff; --panel-soft:#f5f6f8; --sidebar:#e3e6eb; --text:#20262f; --muted:#737d8b; --line:#dce0e6;
  --blue:#52627a; --blue-deep:#344258; --blue-soft:#dde3ec; --shadow:0 18px 50px rgba(42,52,70,.14);
}
:root[data-theme="dark"] {
  --bg:#0d1520; --panel:#131e2c; --panel-soft:#182536; --sidebar:#111e2d; --text:#edf5ff; --muted:#91a3b8; --line:#243448;
  --blue:#4e9cff; --blue-deep:#77b4ff; --blue-soft:#173a66; --shadow:0 18px 50px rgba(0,0,0,.28);
}

.app-shell,.sidebar,.topbar,.main-area,.mail-view,.reader-view,.compose-view,.tool-view { transition:background-color .2s ease,color .2s ease,border-color .2s ease; }
.app-shell.sidebar-collapsed { --sidebar-width:78px; }
.sidebar.collapsed { padding-left:9px; padding-right:9px; overflow-x:hidden; }
.sidebar.collapsed .compose-button strong,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .sidebar-title,
.sidebar.collapsed .sidebar-link,
.sidebar.collapsed .sidebar-foot,
.sidebar.collapsed .nav-count { display:none; }
.sidebar.collapsed .compose-button { width:52px; margin:0 auto; }
.sidebar.collapsed .nav-item { width:52px; justify-content:center; margin-left:auto; margin-right:auto; padding-left:0; padding-right:0; }
.sidebar.collapsed .nav-icon { width:auto; font-size:18px; }
.sidebar.collapsed .folder-nav { margin-top:14px; }
.app-shell.sidebar-collapsed .top-brand { width:190px; }

.quick-nav { margin-top:10px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.version-label { display:block; margin-top:9px; }
.capacity-track span { width:2%; transition:width .35s ease; }

.upload-summary { margin:10px 16px 0; padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:var(--panel-soft); }
.upload-summary > div:first-child { display:flex; justify-content:space-between; gap:10px; font-size:12px; }
.upload-progress,.file-progress { height:6px; border-radius:999px; background:color-mix(in srgb,var(--muted) 15%,transparent); overflow:hidden; margin-top:8px; }
.upload-progress span,.file-progress span { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--blue),var(--purple)); transition:width .15s linear; }
.compose-file { grid-template-columns:24px minmax(0,1fr) auto; align-items:center; }
.compose-file-info { min-width:0; }
.compose-file-info strong,.compose-file-info small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.compose-file.uploaded .file-progress span { background:var(--success); }
.compose-file.error .file-progress span { background:var(--danger); }

.undo-send-bar { position:fixed; z-index:120; left:50%; bottom:24px; transform:translateX(-50%); min-width:min(440px,calc(100vw - 32px)); background:#162236; color:#fff; border-radius:14px; padding:12px 14px; box-shadow:0 18px 50px rgba(0,0,0,.25); display:flex; justify-content:space-between; align-items:center; gap:16px; }
.undo-send-bar button { border:0; border-radius:9px; padding:7px 14px; background:#fff; color:#145fcc; font-weight:800; cursor:pointer; }

.attachment-filterbar { display:grid; grid-template-columns:minmax(220px,1.4fr) minmax(220px,1fr) 160px auto; gap:10px; margin-bottom:14px; }
.attachment-filterbar input,.attachment-filterbar select { border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--panel); color:var(--text); }
.table-row small { display:block; color:var(--muted); margin-top:3px; }

.scheduled-list { border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.scheduled-row { display:grid; grid-template-columns:190px minmax(240px,1fr) 100px auto; align-items:center; gap:16px; padding:14px 16px; border-bottom:1px solid var(--line); }
.scheduled-row:last-child { border-bottom:0; }
.scheduled-row strong,.scheduled-row small { display:block; }
.scheduled-row small { color:var(--muted); margin-top:4px; }
.scheduled-actions { display:flex; gap:7px; }
.status-chip { display:inline-flex; justify-content:center; border-radius:999px; padding:5px 10px; font-size:12px; font-weight:800; background:var(--blue-soft); color:var(--blue-deep); }
.status-chip.failed { background:color-mix(in srgb,var(--danger) 12%,var(--panel)); color:var(--danger); }
.status-chip.sending { background:color-mix(in srgb,var(--warning) 15%,var(--panel)); color:var(--warning); }

.theme-gallery { display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)); gap:12px; }
.theme-card { border:2px solid transparent; background:var(--panel-soft); color:var(--text); border-radius:13px; padding:8px; cursor:pointer; text-align:left; }
.theme-card.active { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 12%,transparent); }
.theme-card strong,.theme-card small { display:block; margin-top:6px; }
.theme-card small { color:var(--muted); font-size:11px; }
.theme-preview { display:grid; grid-template-columns:30% 1fr; grid-template-rows:16px 36px; width:100%; height:54px; overflow:hidden; border-radius:8px; background:#fff; border:1px solid rgba(0,0,0,.06); }
.theme-preview::before { content:""; grid-column:1 / -1; background:var(--preview-accent,#1677ff); }
.theme-preview i { background:var(--preview-sidebar,#e7f0fb); }
.theme-preview b { background:var(--preview-bg,#eef4fb); }
.theme-preview.cloud { --preview-accent:#1677ff;--preview-sidebar:#e7f0fb;--preview-bg:#eef4fb; }
.theme-preview.blue { --preview-accent:#315ed6;--preview-sidebar:#dfe8f7;--preview-bg:#eaf0fb; }
.theme-preview.emerald { --preview-accent:#17a67a;--preview-sidebar:#e0f1ec;--preview-bg:#edf7f4; }
.theme-preview.sunset { --preview-accent:#f06b3d;--preview-sidebar:#fae9df;--preview-bg:#fff4ee; }
.theme-preview.rose { --preview-accent:#e8587d;--preview-sidebar:#f9e4ea;--preview-bg:#fff1f4; }
.theme-preview.graphite { --preview-accent:#52627a;--preview-sidebar:#e3e6eb;--preview-bg:#eef0f3; }
.theme-preview.dark { --preview-accent:#4e9cff;--preview-sidebar:#111e2d;--preview-bg:#0d1520; }

.template-list { display:grid; gap:9px; }
.template-item,.template-manage-row { width:100%; border:1px solid var(--line); background:var(--panel-soft); color:var(--text); border-radius:11px; padding:12px; text-align:left; }
.template-item { cursor:pointer; }
.template-item:hover { border-color:var(--blue); }
.template-item strong,.template-item small,.template-manage-row strong,.template-manage-row small { display:block; }
.template-item small,.template-manage-row small { color:var(--muted); margin-top:4px; }
.template-manage-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; }

.login-log { grid-template-columns:180px minmax(260px,1fr); }
:root[data-density="compact"] .mail-row { min-height:46px; }
:root[data-density="compact"] .mail-group-title { padding-top:7px; padding-bottom:4px; }

@media (max-width:1100px) {
  .theme-gallery { grid-template-columns:repeat(3,minmax(120px,1fr)); }
  .attachment-filterbar { grid-template-columns:1fr 1fr; }
  .scheduled-row { grid-template-columns:160px minmax(220px,1fr) 90px; }
  .scheduled-actions { grid-column:1 / -1; }
}
@media (max-width:760px) {
  .app-shell.sidebar-collapsed { --sidebar-width:244px; }
  .sidebar.collapsed { padding:18px 14px; }
  .sidebar.collapsed .compose-button strong,.sidebar.collapsed .nav-label,.sidebar.collapsed .sidebar-title,.sidebar.collapsed .sidebar-link,.sidebar.collapsed .sidebar-foot,.sidebar.collapsed .nav-count { display:initial; }
  .sidebar.collapsed .compose-button,.sidebar.collapsed .nav-item { width:100%; margin-left:0; margin-right:0; justify-content:flex-start; padding-left:12px; padding-right:12px; }
  .sidebar.collapsed .nav-icon { width:22px; font-size:inherit; }
  .theme-gallery { grid-template-columns:repeat(2,minmax(120px,1fr)); }
  .attachment-filterbar { grid-template-columns:1fr; }
  .scheduled-row { grid-template-columns:1fr; }
  .scheduled-actions { grid-column:auto; }
}
.sidebar.collapsed .nav-item > span:not(.nav-icon):not(.nav-count),
.sidebar.collapsed .tool-nav > span:not(.nav-icon),
.sidebar.collapsed .quick-mail-nav > span:not(.nav-icon) { display:none; }
@media (max-width:760px) {
  .sidebar.collapsed .nav-item > span:not(.nav-icon):not(.nav-count),
  .sidebar.collapsed .tool-nav > span:not(.nav-icon),
  .sidebar.collapsed .quick-mail-nav > span:not(.nav-icon) { display:initial; }
}

/* ===== ZSHTEC Mail V4 features ===== */
.sidebar .nav-item { min-height:38px; font-size:13px; padding-top:7px; padding-bottom:7px; }
.sidebar .compose-button { height:45px; font-size:14px; }
.sidebar .sidebar-title { font-size:11px; }
.sidebar .sidebar-link { font-size:12px; }
.avatar.has-image { background-size:cover; background-position:center; color:transparent; }
.contact-trigger { cursor:pointer; }
.contact-trigger:hover { color:var(--blue-deep); }

.profile-card-choice { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.profile-card-choice select { min-width:180px; border:1px solid var(--line); border-radius:9px; padding:7px 10px; background:var(--panel); color:var(--text); }
.profile-card-choice label { display:flex; align-items:center; gap:6px; }

.translation-panel { margin:18px 0 0; border:1px solid color-mix(in srgb,var(--blue) 28%,var(--line)); border-radius:14px; background:color-mix(in srgb,var(--blue) 5%,var(--panel)); overflow:hidden; }
.translation-head { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-bottom:1px solid var(--line); }
.translation-body { padding:16px; white-space:pre-wrap; line-height:1.75; max-height:480px; overflow:auto; }
.translation-notice { padding:11px 13px; border-radius:10px; background:color-mix(in srgb,var(--warning) 9%,var(--panel-soft)); color:var(--muted); font-size:12px; line-height:1.65; }
.translated-compose-result { border:1px solid var(--line); border-radius:12px; padding:15px; background:var(--panel-soft); line-height:1.75; max-height:420px; overflow:auto; }

.contact-popover { position:fixed; z-index:240; width:330px; max-width:calc(100vw - 24px); border:1px solid var(--line); border-radius:16px; background:var(--panel); box-shadow:0 22px 70px rgba(19,43,78,.24); padding:14px; }
.contact-pop-head { display:grid; grid-template-columns:52px minmax(0,1fr) 28px; align-items:center; gap:11px; }
.contact-pop-head strong,.contact-pop-head span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.contact-pop-head span { color:var(--muted); font-size:12px; margin-top:3px; }
.contact-pop-close { border:0; background:transparent; color:var(--muted); font-size:21px; cursor:pointer; }
.contact-pop-avatar { width:52px; height:52px; border-radius:50%; object-fit:cover; display:grid; place-items:center; }
.contact-pop-avatar.placeholder { background:linear-gradient(135deg,var(--blue),var(--purple)); color:#fff; font-weight:800; font-size:20px; }
.contact-pop-info { display:flex; gap:6px; flex-wrap:wrap; padding:12px 0; }
.contact-pop-info span { padding:4px 8px; border-radius:999px; background:var(--panel-soft); color:var(--muted); font-size:11px; }
.contact-pop-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.contact-pop-actions button { border:1px solid var(--line); background:var(--panel-soft); color:var(--text); border-radius:9px; padding:8px; cursor:pointer; font-size:12px; }
.contact-pop-actions button:hover { border-color:var(--blue); color:var(--blue-deep); }
.contact-pop-actions button.danger { color:var(--danger); }

.correspondence-list { border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.correspondence-row { width:100%; display:grid; grid-template-columns:60px minmax(0,1fr) 170px; gap:12px; align-items:center; border:0; border-bottom:1px solid var(--line); background:var(--panel); color:var(--text); text-align:left; padding:13px 15px; cursor:pointer; }
.correspondence-row:last-child { border-bottom:0; }
.correspondence-row:hover { background:var(--panel-soft); }
.correspondence-row strong,.correspondence-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.correspondence-row small { color:var(--muted); margin-top:4px; }
.correspondence-row time { color:var(--muted); font-size:12px; text-align:right; }
.correspondence-direction { display:inline-flex; justify-content:center; padding:4px 8px; border-radius:999px; background:var(--blue-soft); color:var(--blue-deep); font-size:11px; font-weight:800; }

.contact-edit-grid { display:grid; grid-template-columns:150px 1fr 1fr; gap:12px; }
.contact-edit-grid .avatar-editor { grid-row:span 4; }
.contact-edit-grid .full { grid-column:2 / -1; }
.avatar-editor { display:flex; flex-direction:column; align-items:center; gap:8px; }
.avatar-upload-label { width:120px; min-height:145px; border:1px dashed color-mix(in srgb,var(--blue) 40%,var(--line)); border-radius:16px; background:var(--panel-soft); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; cursor:pointer; overflow:hidden; padding:10px; }
.avatar-upload-label img,.avatar-upload-label > span:first-child { width:78px; height:78px; border-radius:50%; object-fit:cover; display:grid; place-items:center; background:var(--blue-soft); color:var(--blue-deep); font-size:26px; font-weight:800; }
.avatar-upload-label small { color:var(--muted); font-size:11px; }

.retention-banner { display:grid; grid-template-columns:150px minmax(0,1fr); gap:14px; padding:14px 16px; margin-bottom:14px; border:1px solid color-mix(in srgb,var(--success) 28%,var(--line)); border-radius:13px; background:color-mix(in srgb,var(--success) 6%,var(--panel)); }
.retention-banner span { color:var(--muted); }
.forward-rule-list { border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:16px; }
.forward-rule-row { display:grid; grid-template-columns:60px minmax(0,1fr) auto; align-items:center; gap:14px; padding:14px 16px; border-bottom:1px solid var(--line); }
.forward-rule-row:last-child { border-bottom:0; }
.forward-rule-row.disabled { opacity:.58; }
.forward-rule-row strong,.forward-rule-row small { display:block; }
.forward-rule-row small { color:var(--muted); margin-top:4px; }
.rule-state { display:inline-flex; justify-content:center; padding:5px 8px; border-radius:999px; background:color-mix(in srgb,var(--success) 12%,var(--panel)); color:var(--success); font-size:11px; font-weight:800; }
.forward-rule-row.disabled .rule-state { background:var(--panel-soft); color:var(--muted); }
.forward-actions { display:flex; gap:7px; }

.profile-card-grid { display:grid; grid-template-columns:repeat(2,minmax(300px,1fr)); gap:16px; margin-bottom:18px; }
.identity-card { position:relative; border:1px solid var(--line); border-radius:16px; padding:18px; background:var(--panel); overflow:hidden; }
.identity-card.default { border-color:color-mix(in srgb,var(--blue) 50%,var(--line)); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 8%,transparent); }
.default-badge { position:absolute; right:12px; top:12px; padding:4px 8px; border-radius:999px; background:var(--blue); color:#fff; font-size:11px; font-weight:800; }
.identity-card footer { display:flex; justify-content:flex-end; gap:7px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.profile-card-preview { display:grid; grid-template-columns:68px minmax(0,1fr); gap:14px; align-items:start; min-height:100px; }
.profile-card-preview.compact { grid-template-columns:48px minmax(0,1fr); min-height:60px; }
.profile-card-avatar { width:64px; height:64px; border-radius:50%; object-fit:cover; display:grid; place-items:center; }
.profile-card-preview.compact .profile-card-avatar { width:46px; height:46px; }
.profile-card-avatar.placeholder { background:linear-gradient(135deg,var(--blue),var(--purple)); color:#fff; font-size:22px; font-weight:800; }
.profile-card-preview strong,.profile-card-preview small { display:block; }
.profile-card-preview small { color:var(--muted); margin:4px 0 8px; }
.profile-card-details { display:grid; gap:3px; color:var(--muted); font-size:12px; }
.profile-card-preview p { margin:8px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
.profile-card-editor { display:grid; grid-template-columns:160px minmax(0,1fr); gap:18px; }
.profile-card-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.profile-card-fields .full { grid-column:1 / -1; }

.beta-badge { display:inline-flex; vertical-align:middle; padding:3px 7px; border-radius:999px; background:color-mix(in srgb,var(--purple) 13%,var(--panel)); color:var(--purple); font-size:10px; }
.external-account-grid { display:grid; grid-template-columns:repeat(2,minmax(320px,1fr)); gap:14px; margin-bottom:20px; }
.external-account-card { border:1px solid var(--line); border-radius:16px; background:var(--panel); padding:15px; }
.external-account-head { display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:10px; }
.external-logo { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg,var(--blue),var(--purple)); color:#fff; font-weight:800; }
.external-account-head strong,.external-account-head small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.external-account-head small { color:var(--muted); margin-top:3px; }
.external-account-meta { display:grid; gap:4px; padding:12px 0; color:var(--muted); font-size:12px; }
.external-error { color:var(--danger); }
.external-account-card footer { display:flex; gap:6px; flex-wrap:wrap; }
.external-message-section { border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-bottom:16px; }
.tool-head.minor { padding:14px 16px; margin:0; border-bottom:1px solid var(--line); }
.tool-head.minor h3,.tool-head.minor p { margin:0; }
.tool-head.minor p { color:var(--muted); margin-top:4px; }
.tool-head.minor select { border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:var(--panel); color:var(--text); }
.external-message-row { width:100%; display:grid; grid-template-columns:160px minmax(0,1fr) 170px; gap:12px; align-items:center; border:0; border-bottom:1px solid var(--line); background:var(--panel); color:var(--text); text-align:left; padding:12px 15px; cursor:pointer; }
.external-message-row:last-child { border-bottom:0; }
.external-message-row:hover { background:var(--panel-soft); }
.external-message-row.unread strong { font-weight:900; }
.external-message-row strong,.external-message-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.external-message-row small { color:var(--muted); margin-top:4px; }
.external-message-row time { text-align:right; color:var(--muted); font-size:12px; }
.external-source { color:var(--blue-deep); font-size:12px; font-weight:800; }
.external-account-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.external-account-form .full,.external-account-help { grid-column:1 / -1; }
.external-account-help { padding:10px 12px; border-radius:10px; background:var(--panel-soft); color:var(--muted); font-size:12px; line-height:1.6; }

@media (max-width:980px) {
  .profile-card-grid,.external-account-grid { grid-template-columns:1fr; }
  .forward-rule-row { grid-template-columns:60px minmax(0,1fr); }
  .forward-actions { grid-column:1 / -1; }
}
@media (max-width:760px) {
  .contact-edit-grid,.profile-card-editor,.profile-card-fields,.external-account-form { grid-template-columns:1fr; }
  .contact-edit-grid .avatar-editor,.contact-edit-grid .full,.profile-card-fields .full,.external-account-form .full,.external-account-help { grid-column:1; grid-row:auto; }
  .correspondence-row,.external-message-row { grid-template-columns:55px minmax(0,1fr); }
  .correspondence-row time,.external-message-row time { grid-column:2; text-align:left; }
  .retention-banner { grid-template-columns:1fr; }
  .contact-popover { width:calc(100vw - 24px); left:12px !important; }
}
.contact-row-v4 { grid-template-columns:46px minmax(150px,1fr) minmax(240px,1.3fr) 130px auto; }
.contact-row-v4 > div strong,.contact-row-v4 > div small { display:block; }
.contact-row-v4 > div small { color:var(--muted); margin-top:3px; }
.contact-correspondence { text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.compose-contact { position:relative; grid-template-columns:28px 38px minmax(0,1fr); }
.compose-contact-add { width:24px; height:24px; border-radius:7px; display:grid; place-items:center; background:var(--blue-soft); color:var(--blue-deep); font-weight:800; }
@media (max-width:760px) {
  .contact-row-v4 { grid-template-columns:42px minmax(120px,1fr) minmax(150px,1fr); }
  .contact-row-v4 > :nth-child(4),.contact-row-v4 > :nth-child(5) { display:none; }
}

/* ===== ZSHTEC Mail V5 final usability fixes ===== */
.sender-meta .sender-email {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  margin-top: 3px;
}
.sender-meta small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.template-manager-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.template-manager-head p { margin: 0; color: var(--muted); }
.template-row-actions { display: flex; gap: 8px; }
.template-rich-editor {
  min-height: 260px;
  max-height: 460px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: var(--panel-soft);
  line-height: 1.75;
  outline: none;
}
.template-rich-editor:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 12%, transparent);
}

.forward-engine-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid color-mix(in srgb, var(--success) 30%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--success) 6%, var(--panel));
}
.forward-engine-card.failed {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
  background: color-mix(in srgb, var(--danger) 6%, var(--panel));
}
.forward-engine-card div { min-width: 0; }
.forward-engine-card strong,
.forward-engine-card span { display: block; }
.forward-engine-card span { margin-top: 5px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.forward-log-list { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.forward-log-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 170px;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
}
.forward-log-row:last-child { border-bottom: 0; }
.forward-log-row > span {
  display: inline-flex;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: var(--success);
  background: color-mix(in srgb, var(--success) 10%, var(--panel));
}
.forward-log-row.failed > span { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--panel)); }
.forward-log-row strong,
.forward-log-row small { display: block; }
.forward-log-row small { margin-top: 4px; color: var(--muted); overflow-wrap: anywhere; }
.forward-log-row time { color: var(--muted); font-size: 12px; text-align: right; }
.muted-text { color: var(--muted); }

.external-account-card.active {
  border-color: color-mix(in srgb, var(--blue) 48%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 10%, transparent);
}
.external-mail-controls {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
  background: var(--panel-soft);
}
.external-mail-controls label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}
.external-mail-controls select {
  min-width: 150px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 10px;
  background: var(--panel);
  color: var(--text);
}
.external-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  color: var(--muted);
}
.external-pagination select {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 5px 10px;
  background: var(--panel);
  color: var(--text);
}

@media (max-width: 760px) {
  .forward-engine-card { grid-template-columns: 1fr; }
  .forward-log-row { grid-template-columns: 54px minmax(0, 1fr); }
  .forward-log-row time { grid-column: 2; text-align: left; }
  .external-mail-controls { align-items: stretch; }
  .external-mail-controls label,
  .external-mail-controls select { width: 100%; }
  .template-manager-head { align-items: stretch; flex-direction: column; }
}


/* ===== V6 邮件模板管理与快速选择 ===== */
.template-quick-select {
  min-width: 150px;
  max-width: 230px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--text);
  padding: 0 30px 0 10px;
  cursor: pointer;
}
.template-quick-select:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent);
}
.template-manager-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.template-row-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.template-preview {
  margin-top: 10px;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--panel);
  max-height: 120px;
  overflow: hidden;
  color: var(--muted);
}
@media (max-width: 760px) {
  .template-quick-select { min-width: 125px; max-width: 155px; }
  .template-manager-toolbar { width: 100%; }
}