:root {
  --bg: #f5f5f7;
  --panel: #fff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --line: #e5e5e9;
  --accent: #0071e3;
  --accent-hover: #0066cc;
  --soft: #f5f5f7;
  --blue-soft: #edf5ff;
  --green: #217342;
  --red: #c8342d;
  --radius: 20px;
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro Text", "Helvetica Neue", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
button { min-height: 38px; padding: 8px 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); line-height: 1.4; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
button:hover { background: #f0f0f3; border-color: #d1d1d6; }
button:disabled { opacity: .42; cursor: default; }
.primary, nav .active { background: var(--accent); border-color: var(--accent); color: #fff; }
.primary:hover, nav .active:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.danger { background: var(--red); border-color: var(--red); color: #fff; }
.danger:hover { background: #ae2924; border-color: #ae2924; color: #fff; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #0071e350; outline-offset: 3px; }
input, select, textarea { min-height: 42px; min-width: 0; max-width: 100%; padding: 10px 12px; border: 1px solid #d2d2d7; border-radius: 10px; background: #fff; color: var(--text); outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
input::placeholder, textarea::placeholder { color: #86868b; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #0071e322; }
input:disabled, select:disabled, textarea:disabled { background: var(--soft); color: var(--muted); }
input[type=checkbox] { flex: 0 0 auto; width: 17px; height: 17px; min-height: 17px; padding: 0; margin: 0; accent-color: var(--accent); }
textarea { width: 100%; resize: vertical; }
label { display: inline-flex; align-items: center; gap: 8px; }
a { color: var(--accent); }
header { min-height: 74px; padding: 18px max(32px, calc((100vw - 1440px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); background: #ffffffed; }
.brand { display: inline-block; color: var(--text); font-size: 24px; font-weight: 750; letter-spacing: -.9px; text-decoration: none; white-space: nowrap; }
.brand span { color: var(--accent); }
header > div { min-width: 0; display: flex; align-items: center; gap: 10px; }
header button { min-height: 34px; padding: 7px 12px; font-size: 12px; }
.account-name { max-width: 260px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
nav { max-width: 1504px; margin: auto; display: flex; align-items: center; gap: 6px; padding: 24px 32px 0; overflow-x: auto; scrollbar-width: thin; }
nav button { flex-shrink: 0; min-height: 42px; padding: 11px 19px; border-color: transparent; border-radius: 12px; background: transparent; color: #515154; font-weight: 600; }
nav button:hover { background: #e9e9ed; border-color: transparent; }
main { max-width: 1504px; margin: auto; padding: 32px; }
h1, h2, h3 { color: var(--text); font-weight: 650; letter-spacing: -.4px; overflow-wrap: anywhere; }
h1 { margin: 0; font-size: 30px; line-height: 1.25; letter-spacing: -.8px; }
h2 { margin: 0 0 18px; font-size: 19px; line-height: 1.4; }
h3 { margin: 0 0 10px; font-size: 16px; }
p { margin: 12px 0; }
small { color: var(--muted); font-size: 13px; font-weight: 400; letter-spacing: 0; }
.eyebrow { margin: 0 0 7px; color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: 1.6px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.section-head > div { min-width: 0; }
.section-head .hint { margin-bottom: 0; }
.panel { min-width: 0; margin-bottom: 20px; padding: 26px; border: 1px solid #e8e8ed; border-radius: var(--radius); background: var(--panel); box-shadow: 0 2px 8px #1d1d1f03; }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat { padding: 18px 22px; border: 1px solid #e8e8ed; border-radius: 16px; background: #fff; }
.stat span { color: var(--muted); font-size: 12px; }
.stat strong { display: block; margin-top: 6px; color: var(--text); font-size: 28px; font-weight: 650; line-height: 1.2; letter-spacing: -.7px; }
.row, .filters { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.row input { flex: 1 1 200px; min-width: 0; }
.row select { flex: 0 1 260px; max-width: 100%; }
.hint, .muted { color: var(--muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.filters { margin-bottom: 20px; }
.filters > * { min-width: 0; max-width: 100%; }
.filters input:not([type=date]) { flex: 1 1 230px; min-width: 0; }
.filters select { flex: 0 1 210px; }
.filters label { font-size: 12px; }
.filters input[type=date] { width: 150px; }
#alias-count { margin-left: auto; white-space: nowrap; }
.bulk { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-bottom: 16px; font-size: 12px; }
.bulk > span { margin-right: auto; color: var(--muted); }
.bulk button { min-height: 34px; padding: 7px 11px; font-size: 12px; }
.mailbox { display: grid; grid-template-columns: 20px minmax(240px, 1fr) minmax(0, 540px); align-items: start; column-gap: 14px; row-gap: 12px; padding: 22px 0; border-top: 1px solid var(--line); }
.mailbox:last-child { padding-bottom: 6px; }
.mailbox > * { min-width: 0; }
.alias-check { margin-top: 4px !important; }
.address { font-size: 15px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.metadata { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 10px; margin-top: 8px; color: var(--muted); font-size: 12px; }
.badge { display: inline-block; max-width: 100%; padding: 3px 9px; border-radius: 7px; background: #f0f0f3; color: var(--muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.badge.green { background: #eaf5ed; color: var(--green); }
.badge.pink { background: #fce7f2; color: #9d1d61; }
.badge.red { background: #fff0ef; color: var(--red); }
.mailbox-forwarding { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0; width: fit-content; max-width: 100%; margin-top: 10px; padding: 5px 9px; border-radius: 8px; background: var(--blue-soft); color: #0055ad; font-size: 12px; line-height: 1.6; }
.forwarding-kind { flex: 0 0 auto; font-weight: 550; }
.forwarding-target { min-width: 0; overflow-wrap: anywhere; }
.actions { min-width: 0; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 7px; }
.actions button { min-height: 34px; padding: 7px 11px; font-size: 12px; }
.mailbox .actions { row-gap: 8px; }
.empty { padding: 48px 18px; color: var(--muted); text-align: center; font-size: 13px; }
details { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
summary { width: fit-content; max-width: 100%; color: #515154; font-size: 14px; font-weight: 550; cursor: pointer; }
details .row { margin: 12px 0; }
.inbox-grid { display: grid; grid-template-columns: minmax(280px, 36%) minmax(0, 1fr); align-items: start; gap: 20px; }
.mail-index { padding: 0; overflow: hidden; }
.mail-row { display: block; width: 100%; min-width: 0; padding: 20px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; text-align: left; white-space: normal; font-weight: 400; }
.mail-row:hover { background: #f8f8fa; }
.mail-row.selected { background: var(--blue-soft); box-shadow: inset 3px 0 var(--accent); }
.mail-row.unread .subject { font-weight: 650; }
.mail-row.unread .subject:before { content: '• '; color: var(--accent); }
.mail-row .sender { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.mail-row .subject { margin: 7px 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.reader { position: sticky; top: 20px; min-width: 0; min-height: 430px; }
.reader-head { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.reader-head h2 { margin-bottom: 14px; font-size: 22px; line-height: 1.4; }
.reader .actions { justify-content: flex-start; margin-top: 18px; }
.reader pre, .reader .body-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.85; }
.reader .body-text { padding-top: 22px; }
.reader iframe { width: 100%; height: 60vh; margin-top: 20px; border: 0; background: #fff; }
.pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; padding: 20px 0 0; color: var(--muted); font-size: 12px; }
.mail-index > .pager { padding: 16px; }
.pager label { gap: 5px; }
.pager input { width: 60px; min-height: 34px; padding: 6px 8px; }
.pager select { min-height: 34px; padding: 6px 8px; }
.pager button { min-height: 34px; padding: 6px 10px; font-size: 12px; }
.domain-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.domain-card > div { min-width: 0; }
.domain-card h2 { margin-bottom: 8px; }
.domain-card .actions { flex: 0 0 auto; }
.dns-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.dns-table td, .dns-table th { padding: 13px 10px; border-bottom: 1px solid var(--line); text-align: left; overflow-wrap: anywhere; }
.notice { margin: 16px 0; padding: 16px; border: 1px solid #dceaff; border-radius: 12px; background: #f3f8ff; color: #34435a; overflow-wrap: anywhere; }
.error { color: var(--red); overflow-wrap: anywhere; }
.good { color: var(--green); }
.status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.status-grid .panel { margin-bottom: 0; padding: 20px; }
.status-grid strong { display: block; margin-top: 6px; font-size: 18px; font-weight: 600; }
.status-grid + .panel { margin-top: 20px; }
code { font-size: 12px; overflow-wrap: anywhere; }
.code { font: 650 22px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 2px; }
#view-settings > .panel > h2:not(:first-child) { margin-top: 28px; }
#view-settings ol { padding-left: 22px; line-height: 1.9; }
#view-trash > .panel > h2 { margin-top: 28px; }
#view-trash .domain-card.mailbox { align-items: flex-start; }
.forward-panel .section-head { margin-bottom: 12px; }
.forward-panel h2 { margin-bottom: 0; }
.forward-toggle { margin-top: 20px; }
.forward-job { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.forward-job:first-child { margin-top: 22px; }
.forward-job > div { min-width: 0; }
.forward-job .hint { margin-top: 4px; }
.forward-job-status { flex-shrink: 0; text-align: right; }
dialog { width: calc(100% - 40px); max-width: 620px; max-height: 90vh; padding: 30px; border: 1px solid #e5e5e9; border-radius: 24px; background: var(--panel); color: var(--text); box-shadow: 0 24px 80px #1d1d1f26; overflow: auto; }
dialog::backdrop { background: #1d1d1f55; backdrop-filter: blur(5px); }
.dialog-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.dialog-top h2 { margin: 0; font-size: 22px; }
.dialog-top button { flex: 0 0 auto; width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 50%; background: #f0f0f3; color: var(--muted); font-size: 22px; font-weight: 400; line-height: 1; }
.form-stack { display: grid; gap: 18px; }
.form-stack label { display: grid; gap: 8px; font-size: 13px; font-weight: 500; }
.form-stack input, .form-stack select, .form-stack textarea { width: 100%; }
.form-stack .row { gap: 8px; }
.form-stack .hint, .form-stack .address { margin: 0; }
#dialog-body > .row { margin-top: 20px; }
#dialog-body > label { display: flex; gap: 12px; margin: 18px 0; }
#dialog-body > label select { flex: 1; }
.transfer-trigger { color: var(--accent); }
.transfer-preview { margin: 8px 0 0; padding-left: 22px; overflow-wrap: anywhere; }
.transfer-preview li { margin: 3px 0; }
#transfer-error:empty, #alias-forward-error:empty { display: none; }
#transfer-form .notice, #alias-forward-form .notice { margin: 0; }
#transfer-form .row, #alias-forward-form .row { justify-content: flex-end; }
.alias-forward-current p { margin: 8px 0 0; overflow-wrap: anywhere; }
.login { display: grid; place-items: center; min-height: 100vh; padding: 48px 24px; }
.login-card { display: grid; gap: 22px; width: min(460px, 100%); margin: 0; padding: 40px; border-radius: 26px; box-shadow: 0 12px 48px #1d1d1f06; }
.login-card .brand { font-size: 27px; }
.login-card h1 { margin: 0; font-size: 28px; }
.login-card p { margin: 0; }
.login-card label { display: grid; gap: 8px; font-size: 13px; font-weight: 500; }
.login-card input { width: 100%; min-height: 46px; }
.login-card .error:empty { display: none; }
.login-card > .primary { min-height: 46px; border-radius: 12px; font-size: 15px; }
.auth-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #f0f0f3; }
.auth-tabs button { flex: 1; min-height: 38px; border: 0; background: transparent; color: var(--muted); }
.auth-tabs .active { background: #fff; color: var(--text); box-shadow: 0 1px 5px #1d1d1f12; font-weight: 600; }
.registration-code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 1px; }
footer { padding: 12px 24px 32px; color: #86868b; text-align: center; font-size: 11px; }
#toasts { position: fixed; right: 24px; bottom: 24px; z-index: 100; display: grid; gap: 10px; max-width: calc(100vw - 40px); }
.toast { max-width: 420px; padding: 14px 18px; border: 1px solid #ffffff14; border-radius: 14px; background: #1d1d1ff2; color: #fff; box-shadow: 0 8px 32px #1d1d1f1f; font-size: 13px; overflow-wrap: anywhere; }
/* Copied links use the same quiet blue treatment as forwarding information. */
.mail-link-tools { margin: 18px 0; padding: 16px; border: 1px solid #dceaff; border-radius: 12px; background: #f3f8ff; color: var(--text); font: inherit; }
.mail-link-row { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 12px; }
.mail-link-label { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.mail-link-tools button, .mail-link-tools select { max-width: 100%; font: inherit; }
.mail-link-tools select { width: 100%; margin-top: 12px; }
.mail-link-hint { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.mail-link-status { color: var(--green); font-size: 12px; }
.mail-link-manual { display: block; width: 100%; min-height: 80px; margin-top: 12px; overflow-wrap: anywhere; }
.mail-link-manual[hidden], .mail-link-tools[hidden] { display: none; }
@media (max-width: 1200px) {
  .mailbox { grid-template-columns: 20px minmax(0, 1fr); }
  .mailbox .actions { grid-column: 2; justify-content: flex-start; }
  .inbox-grid { grid-template-columns: minmax(260px, 35%) minmax(0, 1fr); }
  .filters select { flex-grow: 1; }
}
@media (max-width: 900px) {
  header { padding: 16px 24px; }
  nav { padding: 20px 24px 0; }
  main { padding: 28px 24px; }
  .stats { gap: 10px; }
  .stat { padding: 16px; }
  .stat strong { font-size: 25px; }
  .inbox-grid { grid-template-columns: 1fr; }
  .reader { position: static; min-height: 300px; }
  .mail-index { max-height: 60vh; overflow: auto; }
  .domain-card { align-items: flex-start; flex-direction: column; gap: 14px; }
  .domain-card .actions { flex-shrink: 1; justify-content: flex-start; }
  .status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  body { font-size: 14px; }
  header { min-height: 72px; padding: 14px 18px; gap: 12px; }
  .brand { font-size: 21px; }
  header > div { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  header button { min-height: 30px; padding: 6px 9px; font-size: 11px; }
  .account-name { flex-basis: 100%; font-size: 11px; text-align: right; }
  nav { padding: 18px 18px 0; gap: 4px; }
  nav button { min-height: 38px; padding: 9px 14px; font-size: 13px; }
  main { padding: 26px 18px; }
  h1 { font-size: 26px; }
  h2 { font-size: 18px; }
  .section-head { align-items: flex-start; gap: 12px; margin-bottom: 22px; }
  .section-head > .actions { max-width: 54%; }
  .panel { padding: 20px; border-radius: 18px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
  .stats .stat:last-child { grid-column: span 2; }
  .stat { padding: 15px 18px; border-radius: 14px; }
  .stat strong { margin-top: 4px; }
  .row input, .row select { flex: 1 1 100%; width: 100%; max-width: 100%; }
  #create-form > span { display: none; }
  #create-form > button { flex: 1 1 auto; }
  .filters input:not([type=date]), .filters select { flex: 1 1 100%; width: 100%; }
  .filters input[type=date] { width: 135px; }
  .filters label { flex-wrap: wrap; }
  #alias-count { margin-left: 0; }
  .bulk { gap: 8px; }
  .bulk > span { margin-right: 0; }
  .mailbox { grid-template-columns: 18px minmax(0, 1fr); gap: 12px 10px; padding: 20px 0; }
  .mailbox .actions { gap: 7px; }
  .mailbox .actions button { min-height: 34px; padding: 7px 9px; }
  .address { font-size: 14px; }
  .metadata { gap: 7px; }
  .forwarding-target { flex-basis: 100%; }
  .mail-row { padding: 18px; }
  .reader-head h2 { font-size: 20px; }
  .pager { gap: 8px; }
  .status-grid { grid-template-columns: 1fr; }
  .forward-panel .section-head { align-items: center; }
  .forward-job { flex-direction: column; gap: 8px; }
  .forward-job-status { text-align: left; }
  dialog { width: calc(100% - 28px); padding: 22px; border-radius: 20px; }
  .dialog-top { margin-bottom: 20px; }
  .dialog-top h2 { font-size: 20px; }
  .form-stack .row > button { flex: 1 1 auto; }
  .login { padding: 28px 18px; }
  .login-card { padding: 28px; gap: 20px; }
  .login-card h1 { font-size: 26px; }
  .login-card input { font-size: 16px; }
  #toasts { right: 18px; bottom: 18px; max-width: calc(100vw - 36px); }
}
@media (prefers-reduced-motion: reduce) {
  button, input, select, textarea { transition: none; }
}
/* Compact mailbox actions and account administration. */
.mailbox { grid-template-columns: 20px minmax(0, 1fr) auto; }
.mailbox-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 12px; min-width: 0; }
.mailbox-heading .address { min-width: 0; }
.address-tools { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.address-tools button { min-height: 28px; padding: 4px 8px; border-color: transparent; background: var(--soft); color: var(--muted); font-size: 11px; }
.address-tools button:hover { color: var(--accent); background: var(--blue-soft); }
.mailbox-more { position: relative; margin: 0; padding: 0; border: 0; }
.mailbox-more summary { min-height: 34px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); font-size: 12px; list-style: none; }
.mailbox-more summary::-webkit-details-marker { display: none; }
.mailbox-more summary::after { content: '⌄'; margin-left: 6px; color: var(--muted); }
.mailbox-more[open] summary { border-color: #c5d9f0; background: var(--blue-soft); }
.mailbox-more-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 10; display: grid; min-width: 145px; gap: 3px; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 10px 30px #1d1d1f16; }
.mailbox-more-menu button { width: 100%; border-color: transparent; text-align: left; }
.account-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); }
.account-row > div { min-width: 0; }
.account-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; overflow-wrap: anywhere; }
.account-title strong { font-size: 15px; }
#accounts-status:empty, #account-password-error:empty, #domain-assign-error:empty { display: none; }
#account-password-form .row, #domain-assign-form .row { justify-content: flex-end; }
#domain-assign-form .notice { margin: 0; }
@media (max-width: 1100px) {
 .mailbox { grid-template-columns: 20px minmax(0, 1fr); }
 .mailbox .actions { grid-column: 2; justify-content: flex-start; }
 .mailbox-more-menu { left: 0; right: auto; }
 .account-row { align-items: flex-start; flex-direction: column; gap: 12px; }
 .account-row .actions { justify-content: flex-start; }
}
@media (max-width: 600px) {
 .mailbox { grid-template-columns: 18px minmax(0, 1fr); }
 .mailbox-heading { gap: 8px; }
 .address-tools { flex-basis: 100%; }
 .mailbox-more-menu { left: auto; right: 0; }
 .account-row { padding: 20px 0; }
}

/* Account lifecycle and mailbox transfer dialogs share the management form rhythm. */
#account-create-form .error:empty, #account-delete-form .error:empty { display: none; }
.destructive-notice { color: #9f2420; background: #fff3f2; border-color: #e8b7b4; }
.destructive-notice ul { margin: 12px 0 0; padding-left: 22px; }
.destructive-notice li + li { margin-top: 6px; }
#transfer-form .notice .row { margin-top: 12px; }
#transfer-form .transfer-preview, #account-delete-form .address { overflow-wrap: anywhere; }

.export-fields { display: flex; flex-wrap: wrap; gap: 16px 24px; margin: 0; padding: 16px; border: 1px solid var(--line, #d2d2d7); border-radius: 14px; }
.export-fields legend { padding: 0 6px; font-weight: 600; }
.export-fields label { display: inline-flex; align-items: center; gap: 8px; }
.export-fields input { width: auto; margin: 0; }
#export-form .notice { margin: 0; }
#export-form .notice p { margin: 8px 0 0; }
#export-form .error:empty { display: none; }
.selection-hint { margin: 0 0 12px; }

/* Seven account statistics with an independent Beijing calendar-day picker. */
.stats-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; margin: 0 0 12px; }
.stats-date-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.stats-date-controls label { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.stats-date-controls input[type=date] { width: 155px; min-width: 0; }
.stats-period { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.stats-period .hint { margin: 0; }
.stats-status-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.stats-status-row:has(#stats-status:empty):has(#stats-retry[hidden]) { display: none; }
#stats-status { margin: 0; }
#stats-retry { padding: 6px 12px; min-height: 34px; }
.stats { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.stat { min-width: 0; }
.stat-paid { background: #fff0f6; border-color: #f3d7e5; }
.stat-suspended { background: #fff4e8; border-color: #f0dfc8; }
.stat span { display: block; }
.stat small { display: block; color: var(--muted); font-size: 11px; margin-top: 7px; line-height: 1.4; }
@media (max-width: 1250px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) {
 .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .stats .stat:last-child { grid-column: span 2; }
 .stats-toolbar { align-items: flex-start; }
 .stats-date-controls { gap: 8px; }
 .stats-date-controls label { order: -1; flex-basis: 100%; }
 .stats-period { font-size: 12px; }
}

/* Domain business egress management. */
.proxy-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; }
.proxy-card { margin-bottom:0; }
.proxy-card-head,.proxy-binding { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.proxy-card-head > div,.proxy-binding > div { min-width:0; }
.proxy-card h2 { margin:0; }
.proxy-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:22px 0; }
.proxy-facts dt { color:var(--muted); font-size:13px; margin-bottom:5px; }
.proxy-facts dd { margin:0; overflow-wrap:anywhere; font-size:14px; }
.proxy-binding { padding:16px 0; border-top:1px solid var(--line); }
.proxy-grid + .panel { margin-top:24px; }
.proxy-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.proxy-fields > label { min-width:0; }
.proxy-dialog { width:min(660px,calc(100vw - 32px)); max-height:90vh; overflow:hidden; }
.proxy-dialog[open] { display:flex; flex-direction:column; }
.proxy-dialog .dialog-top { flex:0 0 auto; }
#proxy-dialog-body { overflow:auto; min-height:0; padding:0 4px 2px 0; }
.proxy-card-footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding-top:16px; border-top:1px solid var(--line); }
.proxy-domain-link { border:0; background:transparent; color:var(--accent); padding-left:0; }
.proxy-intro { margin-bottom:24px; }
.proxy-check-row { display:flex!important; align-items:center; gap:9px!important; }
.proxy-check-row input { width:auto; margin:0; }
.proxy-form-actions { justify-content:flex-end; padding-top:10px; }
#proxy-edit-form .form-stack { gap:16px; }
#proxy-edit-form > label > .hint { display:inline; }
#proxy-form-error:empty, #proxy-status:empty, #domain-proxy-status:empty { display:none; }
.domain-filter-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.domain-filter-row > input { flex:1 1 240px; min-width:0; }
.domain-filter-row > select { flex:0 1 240px; min-width:160px; }
.domain-filter-row > .hint { white-space:nowrap; }
.domain-proxy-summary { display:flex; align-items:center; flex-wrap:wrap; gap:7px 10px; margin:12px 0 0; font-size:13px; }
.badge.blue { background:var(--blue-soft); color:#0055ad; }
.mailbox-note { gap:7px; }
.mailbox-note strong { flex:0 0 auto; font-weight:700; }
.mailbox-note span { min-width:0; overflow-wrap:anywhere; white-space:pre-wrap; }
.proxy-notice { margin-bottom:20px; }
@media(max-width:760px) {
 .proxy-facts { grid-template-columns:1fr 1fr; }
 .proxy-fields { grid-template-columns:1fr; }
 .proxy-binding { align-items:flex-start; }
 .domain-filter-row > select { flex:1 1 160px; }
 .proxy-card-footer { align-items:flex-start; flex-direction:column; }
}

/* Shared visual proportions for management pages and dialogs. */
:root {
 --bg:#f6f7fa;
 --text:#252830;
 --muted:#6b7280;
 --line:#e5e8ef;
 --soft:#f3f4f7;
 --radius:18px;
}
body { line-height:1.65; }
button { min-height:40px; padding:9px 15px; font-size:14px; border-radius:10px; }
input,select,textarea { min-height:44px; padding:10px 13px; font-size:14px; border-color:#d6dbe4; }
input::placeholder,textarea::placeholder { color:#878d98; }
input[type=checkbox] { min-height:17px; }
header { min-height:72px; padding-top:16px; padding-bottom:16px; }
.brand { font-size:24px; letter-spacing:-.8px; }
.account-name,header button { font-size:13px; }
header button { min-height:36px; padding:7px 12px; }
nav { padding-top:20px; gap:6px; }
nav button { min-height:44px; padding:10px 17px; font-size:14px; border-radius:11px; }
main { padding-top:28px; }
h1 { font-size:28px; line-height:1.3; letter-spacing:-.6px; }
h2 { font-size:19px; line-height:1.45; letter-spacing:-.25px; }
.eyebrow { font-size:10px; letter-spacing:1.4px; margin-bottom:6px; color:#7b8290; }
.section-head { margin-bottom:24px; gap:16px; }
.section-head .hint { margin-top:10px; }
.hint,.muted { font-size:13px; line-height:1.65; }
.panel { padding:24px; border-color:var(--line); box-shadow:0 2px 6px #26355204; }
.stats-toolbar { gap:12px 24px; margin-bottom:18px; }
.stats-date-controls { gap:8px; }
.stats-date-controls button { min-height:40px; padding:8px 13px; font-size:13px; }
.stats-date-controls input[type=date] { min-height:40px; }
.stats-period { gap:8px 12px; }
.stats-period .hint { font-size:12px; line-height:1.65; }
.stats-period .badge { font-size:11px; padding:4px 9px; background:#edf0f5; }
.stats { gap:12px; margin-bottom:24px; }
.stat { display:flex; flex-direction:column; align-items:flex-start; min-height:140px; padding:20px; border-radius:16px; border-color:var(--line); }
.stat span { font-size:13px; font-weight:500; line-height:1.5; color:#616977; }
.stat strong { margin-top:10px; font-size:32px; font-weight:650; line-height:1.1; letter-spacing:-.8px; font-variant-numeric:tabular-nums; }
.stat small { margin-top:10px; font-size:12px; line-height:1.5; color:#747b87; }
.stat-paid { background:#fff1f7; border-color:#f0dce6; }
.stat-suspended { background:#fff5e9; border-color:#efdfcc; }
.stat-paid > span { color:#965376; }
.stat-suspended > span { color:#956430; }
.filters { gap:12px; margin-bottom:18px; }
.bulk { gap:8px; font-size:13px; }
.actions button,.bulk button,.mailbox-more summary { min-height:36px; padding:8px 12px; font-size:13px; }
.mailbox { padding:24px 0; column-gap:14px; }
.address,.account-title strong { font-size:16px; font-weight:600; line-height:1.5; }
.mailbox-heading { gap:8px 12px; }
.address-tools button { min-height:32px; padding:6px 10px; font-size:12px; }
.metadata { font-size:13px; gap:8px 10px; margin-top:10px; line-height:1.6; }
.badge { padding:4px 9px; font-size:12px; border-radius:7px; }
.mailbox-forwarding { padding:7px 11px; font-size:13px; line-height:1.6; border-radius:9px; }
.mailbox-note { gap:7px; }
.pager { gap:10px; font-size:13px; padding-top:22px; }
.pager input,.pager select,.pager button { min-height:36px; font-size:13px; }
.domain-card { gap:18px; }
.domain-card h2,.proxy-card h2 { font-size:19px; font-weight:600; }
.domain-proxy-summary { line-height:1.6; }
.proxy-grid { gap:16px; }
.proxy-card-head .hint { margin:6px 0 0; font-size:13px; font-weight:400; color:var(--muted); }
.proxy-facts { gap:18px; margin:24px 0; }
.proxy-facts dt { font-size:12px; color:#78808e; margin-bottom:7px; }
.proxy-facts dd { font-size:14px; line-height:1.5; font-variant-numeric:tabular-nums; }
.proxy-card-footer { padding-top:16px; }
.proxy-domain-link { font-size:13px; padding-left:0; }
.proxy-intro { margin-top:-4px; margin-bottom:22px; }
#proxy-count { margin-top:8px; margin-bottom:0; }
.mail-row .sender,.mail-link-hint { font-size:13px; }
.mail-row .subject { font-size:15px; line-height:1.55; }
dialog { padding:28px; border-radius:22px; border-color:var(--line); }
.dialog-top { gap:16px; margin-bottom:22px; }
.dialog-top h2 { font-size:22px; font-weight:600; letter-spacing:-.4px; }
.dialog-top button { width:36px; height:36px; min-height:36px; font-size:24px; background:#f1f3f6; }
.form-stack { gap:18px; }
.form-stack label { gap:8px; font-size:14px; line-height:1.5; }
.proxy-fields { gap:16px; }
.proxy-form-actions { padding-top:14px; }
.proxy-check-row { font-size:13px!important; font-weight:400!important; }
@media(min-width:901px) and (max-width:1250px) {
 .domain-card { align-items:flex-start; flex-direction:column; }
 .domain-card .actions { flex-wrap:wrap; justify-content:flex-start; }
}
@media(max-width:1000px) {
 nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:visible; }
 nav button { padding-left:8px; padding-right:8px; }
}
@media(max-width:700px) {
 .stats { gap:10px; }
 .stat { min-height:136px; padding:18px; }
 .stat strong { font-size:30px; }
 .stat small { font-size:12px; }
}
@media(max-width:600px) {
 header { padding:14px 16px; }
 header button { min-height:34px; padding:7px 9px; font-size:12px; }
 .brand { font-size:22px; }
 .account-name { font-size:12px; }
 nav { padding:14px 16px 0; gap:4px; }
 nav button { min-height:42px; padding:9px 4px; font-size:13px; }
 main { padding:24px 16px; }
 h1 { font-size:25px; }
 .section-head { margin-bottom:20px; }
 .panel { padding:18px; border-radius:16px; }
 .address { font-size:15px; }
 .mailbox { padding:20px 0; }
 .mailbox .actions button { min-height:36px; padding:8px 10px; }
 .domain-card h2,.proxy-card h2 { font-size:18px; }
 .domain-card .actions { gap:8px; }
 .proxy-facts { gap:18px 12px; }
 .proxy-card-head { gap:12px; align-items:flex-start; }
 .proxy-card-head > .badge { flex-shrink:0; }
 dialog { padding:22px 20px; width:calc(100% - 24px); border-radius:20px; }
 .dialog-top { margin-bottom:20px; }
 .dialog-top h2 { font-size:21px; }
 .form-stack input,.form-stack select,.form-stack textarea { font-size:16px; }
}
/* Mail777 2.5 receiving domains */
.brand{display:inline-flex;align-items:center;gap:0}.brand img{width:38px;height:38px;object-fit:contain;margin-right:9px}.brand span{display:inline}
.mailbox-more-menu .transfer-trigger{color:var(--text)}
.domain-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px}
.domain-summary-item{padding:18px 22px;border:1px solid var(--line);border-radius:16px;background:#fff}.domain-summary-item span{font-size:13px;color:var(--muted)}.domain-summary-item strong{display:block;font-size:30px;line-height:1.3;margin-top:5px;font-weight:650;letter-spacing:-1px}.domain-summary-item.paid{background:#ecf7f1;border-color:#dbeee2}.domain-summary-item.zero{background:#fdf5eb;border-color:#f3e6d3}
.domain-filter-row{display:grid;grid-template-columns:minmax(180px,1.3fr) repeat(3,minmax(150px,1fr));gap:12px}.domain-filter-row>*{width:100%}.domain-filter-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px}.domain-filter-foot button{font-size:12px;min-height:32px;padding:5px 10px}.classification-note{margin-bottom:0;border-top:1px solid var(--line);padding-top:12px}
.domain-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.domain-card-head h2{font-size:21px;margin:0 0 5px}.domain-card-head p{margin:0}.domain-card-head .badge{padding:6px 12px;font-size:12px;white-space:nowrap}.domain-card-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,1fr);gap:32px;margin-top:22px}.domain-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 24px;border-left:1px solid var(--line);padding-left:26px;align-content:start}.domain-metrics span{display:block;font-size:12px;color:var(--muted)}.domain-metrics strong{display:block;font-size:23px;font-weight:600;line-height:1.4}.domain-metrics .metric-paid{color:#23754d}.dns-records>div{display:flex;gap:10px;align-items:baseline;margin:6px 0;font-size:13px;overflow-wrap:anywhere}.dns-type{display:inline-block;flex-shrink:0;width:29px;font-size:11px;font-weight:650;color:#617185}.dns-records strong{font-weight:550}.receive-target{margin:9px 0 0}.receive-detail p:last-child{margin-bottom:0}.planned-dns{background:#f3f7fc;border-radius:10px;padding:12px 14px;font-size:13px}.receive-warning{color:#9c6114;font-size:12px}.domain-card-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:18px;margin-top:22px}.domain-card-foot .actions{flex-wrap:wrap}.domain-card-foot button{font-size:12px;min-height:34px;padding:6px 11px}#receive-form .field{display:flex;flex-direction:column;align-items:stretch;gap:9px;margin:15px 0}#receive-choice{margin:18px 0;line-height:1.7}
@media(max-width:1050px){.domain-filter-row{grid-template-columns:repeat(2,minmax(0,1fr))}.domain-card-body{grid-template-columns:1fr}.domain-metrics{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:18px;grid-template-columns:repeat(4,minmax(0,1fr))}.domain-card-foot{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.domain-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.domain-summary-item{padding:14px}.domain-filter-row{grid-template-columns:1fr}.domain-card-head h2{font-size:19px}.domain-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.brand img{width:32px;height:32px}.receive-domain-card{padding:20px}.domain-card-foot .actions{justify-content:flex-start}}
.preview-banner{text-align:center;padding:7px 16px;background:#eaf3ff;color:#245a92;font-size:12px;border-bottom:1px solid #d6e7ff}
/* Review refinement: unified sticky navigation and nested recovery. */
html{scroll-padding-top:calc(var(--app-header-height,84px) + 18px)}
.app-header{position:sticky;top:0;z-index:50;display:block;min-height:0;padding:0;background:#fff;border-bottom:1px solid #e3e7ee;box-shadow:0 3px 14px #25304705}
.app-header>.app-header-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand nav account";align-items:center;gap:24px;max-width:1600px;margin:auto;padding:14px 28px}
.app-header .brand{grid-area:brand;font-size:22px}.app-header .brand img{width:34px;height:34px;margin-right:8px}
#tabs{grid-area:nav;display:flex;flex-wrap:nowrap;align-items:center;gap:4px;min-width:0;max-width:none;margin:0;padding:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
#tabs button{flex:0 0 auto;font-size:13px;min-height:40px;padding:9px 13px;border-radius:10px}
.app-header .header-account{grid-area:account;display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:8px;min-width:0}.header-account .account-name{font-size:12px;max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-account button{font-size:12px;min-height:34px;padding:7px 10px}
.reader{top:calc(var(--app-header-height,84px) + 18px)}
.inbox-folders{display:inline-flex;gap:4px;background:#e9edf3;border-radius:12px;padding:4px;margin:0 0 22px}
.inbox-folders button{min-width:92px;min-height:36px;border:0;background:transparent;color:#657080;border-radius:9px;padding:8px 18px}.inbox-folders button.active{background:#fff;color:#1767cc;box-shadow:0 1px 5px #25304715;font-weight:600}
.trash-guide>p{margin:0 0 18px}.trash-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}.trash-page-size{display:inline-flex;align-items:center;gap:12px;flex:0 0 auto;white-space:nowrap;font-size:13px}.trash-page-size select{width:100px;min-height:38px;padding:7px 12px}.trash-toolbar>.hint{margin:0}
.trash-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.trash-section-head h2{font-size:18px;margin:0}.trash-section .empty{padding:30px 12px}.trash-section .pager{padding-top:16px}.trash-item{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}.trash-item>div:first-child{min-width:0;overflow-wrap:anywhere}.trash-item:last-child{border-bottom:0}.trash-item .actions{flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}.trash-item .hint{margin-top:6px}
.forward-records-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}.forward-records-head h3{font-size:14px;margin:0}#forward-jobs>.forward-job{border-top:0;margin-top:0;padding-top:14px}.forward-history{margin-top:4px;border-top:1px solid var(--line);padding-top:12px}.forward-history>summary{font-size:13px;color:#356aa6;padding:5px 0;cursor:pointer}.forward-history .forward-job:first-child{margin-top:12px}.history-collapse{display:none}.forward-history[open] .history-expand{display:none}.forward-history[open] .history-collapse{display:inline}
@media(max-width:1179px){.app-header>.app-header-inner{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"brand account" "nav nav";gap:12px 20px;padding:12px 24px}#tabs button{padding:9px 16px}.header-account .account-name{max-width:180px}}
@media(max-width:600px){.app-header>.app-header-inner{padding:10px 16px;gap:10px 12px}.app-header .brand{font-size:19px}.app-header .brand img{width:30px;height:30px}.header-account .account-name{display:none}.header-account button{font-size:11px;min-height:32px;padding:6px 8px}#tabs button{font-size:13px;min-height:38px;padding:8px 13px}.trash-item{flex-direction:column;gap:12px}.trash-item .actions{justify-content:flex-start}.forward-records-head{align-items:flex-start}.trash-toolbar{align-items:flex-start;flex-direction:column}}

/* Session status and account login history */
.session-status{display:flex;justify-content:flex-end;gap:18px;flex-wrap:wrap;margin:0 0 18px;color:#7d8798;font-size:12px}
.account-action-group{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.login-history-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.login-history-table{overflow-x:auto;border:1px solid #e5e7ee;border-radius:14px;margin:20px 0}
.login-history-table table{width:100%;border-collapse:collapse;text-align:left;font-size:14px}
.login-history-table th{background:#f6f8fc;color:#667085;font-weight:600}
.login-history-table td,.login-history-table th{padding:14px 18px;border-bottom:1px solid #eef0f5;white-space:nowrap}
.login-history-table tr:last-child td{border-bottom:0}
.login-history-table code{color:#344054;font-size:13px}
@media(max-width:700px){.session-status{justify-content:flex-start;gap:8px;font-size:11px}.account-action-group{justify-content:flex-start}}

/* 3.0: quiet chrome and consistent alignment. */
.session-status[hidden]{display:none}
.header-account .theme-toggle{height:34px;min-height:34px;width:36px}
.stat-paid small,.stat-suspended small{white-space:nowrap}
.domain-summary-item{text-align:left}
.stats-help{position:relative;margin:0;padding:0;border:0;flex-shrink:0}
.stats-help>summary{font-size:13px;color:var(--muted);padding:8px 12px;border:1px solid var(--line);border-radius:10px}
.stats-help-content{position:absolute;right:0;top:100%;margin-top:8px;z-index:20;width:360px;max-width:calc(100vw - 60px);padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px #0002;font-size:14px;line-height:1.7}
.stats-help-content p{margin:8px 0 0;color:var(--muted)}
#domain-receive-server{flex:0 0 190px;width:190px}
.domain-create-dns{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.domain-create-dns .dns-records{display:flex;flex-wrap:wrap;gap:12px 28px}
.domain-create-dns .hint{margin:10px 0 0}
.service-row{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:480px;padding:10px 0}
.audit-row{display:flex;gap:24px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
.audit-row:last-child{border-bottom:0}
.audit-row time{color:var(--muted);flex:0 0 172px}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.guide-card p,.setup-steps,.help-faq p,.health-help p{font-size:14px;line-height:1.85}
.help-route{padding:12px 0;border-bottom:1px solid var(--line)}
.help-route p{margin:6px 0;color:var(--muted)}
.setup-steps{padding-left:22px;margin-bottom:0}
.setup-steps li{padding:5px 0 12px 6px}
.help-faq details{padding:17px 0;margin:0;border-bottom:1px solid var(--line);border-top:0}
.help-faq details:last-child{border-bottom:0;padding-bottom:0}
.help-faq summary{font-size:15px;color:var(--text)}
@media(max-width:760px){.help-grid{grid-template-columns:1fr;gap:0}.audit-row{flex-direction:column;gap:6px}.audit-row time{flex:auto}#domain-receive-server{flex:1 1 170px}.stats-help-content{right:0}.stats-toolbar{position:relative}.stats-help{position:static}.stats-help-content{top:100%}}