:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #07111e;
  color: #edf5ff;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 13% 15%, rgba(70, 130, 255, .22), transparent 29rem),
    radial-gradient(circle at 82% 82%, rgba(45, 213, 185, .13), transparent 32rem),
    #07111e;
}

button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid #8bb7ff; outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .45; }
[hidden] { display: none !important; }

.shell { min-height: 100vh; }
.login-view { width: min(100% - 2rem, 430px); padding: 4rem 0; margin: auto; min-height: 100vh; display: grid; align-content: center; }
.brand-mark { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border: 1px solid rgba(159, 198, 255, .44); border-radius: 1.1rem; background: linear-gradient(145deg, rgba(108, 159, 255, .3), rgba(76, 215, 196, .15)); color: #d9e9ff; font-size: 1.6rem; box-shadow: 0 18px 60px rgba(37, 115, 255, .18); }
.eyebrow { margin: 1.8rem 0 .45rem; color: #83a6d7; font-size: .69rem; line-height: 1; letter-spacing: .14em; font-weight: 760; }
h1, h2, h3, p { margin-top: 0; }
.login-view h1 { margin-bottom: .9rem; font-size: clamp(2rem, 7vw, 2.8rem); letter-spacing: -.05em; line-height: 1.1; }
.login-copy { color: #aec1d9; line-height: 1.7; font-size: .96rem; max-width: 24rem; }
.login-form { display: grid; gap: .65rem; margin-top: 2.25rem; }
.login-form label, .mailbox-dialog label { color: #c4d2e6; font-size: .85rem; font-weight: 650; }
input { width: 100%; border: 1px solid #294461; border-radius: .7rem; padding: .83rem .9rem; background: rgba(7, 21, 37, .82); color: #f0f7ff; }
input::placeholder { color: #6684a8; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 3rem; }
.icon-button { border: 0; color: #b8d0ef; background: transparent; font-size: 1.25rem; min-width: 2rem; min-height: 2rem; }
.password-wrap .icon-button { position: absolute; right: .32rem; top: 50%; transform: translateY(-50%); }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border: 1px solid #95bdff; border-radius: .7rem; padding: .8rem 1rem; color: #061423; font-weight: 760; background: linear-gradient(135deg, #b5d4ff, #74ebd1); box-shadow: 0 10px 30px rgba(92, 175, 255, .18); }
.login-form .primary-button { margin-top: .55rem; width: 100%; }
.fine-print { margin-top: 1.6rem; color: #7792b1; font-size: .76rem; line-height: 1.6; }

.app-view { min-height: 100vh; }
.topbar { min-height: 68px; padding: 0 max(1.25rem, calc((100vw - 1520px) / 2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(108, 153, 208, .17); background: rgba(6, 17, 30, .72); backdrop-filter: blur(16px); }
.wordmark { color: #f0f6ff; text-decoration: none; font-weight: 760; letter-spacing: -.02em; }
.wordmark span { color: #88dfff; margin-right: .38rem; }
.topbar-actions { display: flex; gap: .9rem; align-items: center; }
.session-status { color: #8bd6bd; font-size: .76rem; }
.session-status::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .36rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 .22rem rgba(106, 230, 176, .12); }
.quiet-button, .danger-button, .text-button { border: 1px solid #294461; border-radius: .55rem; padding: .52rem .7rem; background: rgba(17, 38, 63, .55); color: #cfe0f4; font-size: .82rem; }
.quiet-button:hover { border-color: #638bbd; background: #162f4f; }
.danger-button { color: #ffb8be; border-color: #77414e; background: rgba(92, 29, 43, .33); }
.text-button { padding: 0; border: 0; background: transparent; color: #9fc6ff; font-weight: 650; }
.round-button { display: grid; place-items: center; flex: 0 0 auto; width: 2rem; height: 2rem; padding: 0; border: 1px solid #355675; border-radius: .55rem; background: #122943; color: #d5e8ff; font-size: 1.2rem; }
.round-button:hover { background: #1c385b; }
.refresh { font-size: 1.3rem; }

.workspace { max-width: 1520px; min-height: calc(100vh - 68px); margin: auto; display: grid; grid-template-columns: minmax(200px, 260px) minmax(280px, 410px) minmax(0, 1fr); }
.sidebar, .inbox-panel { border-right: 1px solid rgba(108, 153, 208, .15); }
.sidebar { padding: 1.6rem 1rem 1.1rem; background: rgba(7, 20, 34, .38); }
.sidebar-title-row, .inbox-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.sidebar h2, .inbox-heading h2 { margin: 0; font-size: 1.08rem; letter-spacing: -.025em; }
.sidebar .eyebrow, .inbox-heading .eyebrow { margin: 0 0 .42rem; }
.mailbox-list { margin-top: 1.45rem; display: grid; gap: .35rem; }
.mailbox-button { display: block; width: 100%; position: relative; text-align: left; border: 1px solid transparent; border-radius: .65rem; padding: .7rem .7rem .68rem .9rem; color: #b4c8df; background: transparent; }
.mailbox-button:hover { background: rgba(41, 70, 104, .38); color: #e2edfa; }
.mailbox-button.active { color: #edf7ff; border-color: rgba(108, 181, 255, .35); background: linear-gradient(100deg, rgba(52, 112, 193, .34), rgba(34, 88, 118, .2)); }
.mailbox-button .address { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .83rem; font-weight: 670; }
.mailbox-button .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: .2rem; color: #7794b7; font-size: .71rem; }
.mailbox-button.active::before { content: ""; position: absolute; left: -.1rem; top: 50%; width: .2rem; height: 1.2rem; transform: translateY(-50%); border-radius: 2px; background: #8fc5ff; }
.sidebar-note { position: sticky; top: calc(100vh - 106px); display: flex; gap: .55rem; margin-top: 2rem; padding: .75rem .65rem; color: #6f8cac; font-size: .72rem; line-height: 1.5; }
.sidebar-note p { margin: 0; }.note-dot { width: .45rem; height: .45rem; flex: 0 0 auto; margin-top: .27rem; border-radius: 50%; background: #6be1c1; }
.empty-mailbox-state { margin: 2.4rem .5rem; color: #859cb8; font-size: .82rem; line-height: 1.6; }

.inbox-panel { padding: 1.6rem 1rem; background: rgba(10, 25, 41, .45); }
.inbox-address { overflow: hidden; min-height: 2.7rem; margin: 1rem 0 .85rem; padding: .62rem .7rem; color: #83a7d2; border: 1px dashed rgba(98, 142, 191, .44); border-radius: .52rem; font: 500 .76rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.email-list { display: grid; gap: .32rem; }
.email-item { width: 100%; position: relative; text-align: left; border: 1px solid transparent; border-radius: .68rem; padding: .72rem .75rem .75rem .88rem; background: transparent; color: #dbe9f8; }
.email-item:hover { background: rgba(39, 65, 98, .42); }.email-item.active { border-color: rgba(122, 183, 247, .42); background: rgba(41, 91, 148, .28); }
.email-item.unread::before { content: ""; position: absolute; left: .33rem; top: 1.03rem; width: .35rem; height: .35rem; border-radius: 50%; background: #79ceff; box-shadow: 0 0 12px #4ba3f4; }
.email-line { display: flex; gap: .55rem; align-items: baseline; justify-content: space-between; }.email-from { overflow: hidden; color: #bfcee0; font-size: .77rem; text-overflow: ellipsis; white-space: nowrap; }.email-date { flex: none; color: #637fa0; font-size: .68rem; }.email-subject { overflow: hidden; margin: .24rem 0; color: #e7f0fa; font-size: .85rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }.email-preview { overflow: hidden; color: #829bb7; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }.status-badge { display: inline-block; margin-top: .35rem; padding: .1rem .35rem; border-radius: .28rem; color: #89b3dc; background: rgba(73, 111, 151, .29); font-size: .63rem; }.status-badge.failed { color: #f4b7b7; background: rgba(141, 52, 58, .3); }
.empty-inbox-state { margin: 5rem 1rem; text-align: center; color: #7e99b6; }.empty-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin: 0 auto 1rem; border-radius: 50%; background: rgba(83, 128, 183, .18); font-size: 1.35rem; }.empty-inbox-state h3 { margin-bottom: .5rem; color: #cddced; font-size: .98rem; }.empty-inbox-state p { margin: 0; font-size: .8rem; line-height: 1.6; }

.message-panel { min-width: 0; padding: 1.8rem clamp(1.25rem, 3.5vw, 3.2rem); background: rgba(5, 15, 27, .28); }.message-placeholder { min-height: calc(100vh - 170px); display: grid; place-content: center; text-align: center; color: #7f99b8; }.placeholder-orbit { display: grid; place-items: center; width: 3.3rem; height: 3.3rem; margin: 0 auto 1.2rem; border: 1px solid rgba(109, 163, 228, .4); border-radius: 50%; color: #9ec9ff; box-shadow: 0 0 0 1rem rgba(49, 106, 170, .05), 0 0 0 2rem rgba(49, 106, 170, .03); }.message-placeholder h2 { margin-bottom: .55rem; color: #cadbed; font-size: 1.08rem; }.message-placeholder p { margin: 0; font-size: .82rem; }
.message-header { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 1.3rem; border-bottom: 1px solid rgba(109, 153, 209, .18); }.message-from { overflow-wrap: anywhere; margin-bottom: .45rem; color: #91b9e6; font-size: .82rem; }.message-header h2 { max-width: 42rem; margin-bottom: .55rem; color: #f1f7ff; font-size: clamp(1.2rem, 2.8vw, 1.8rem); line-height: 1.25; letter-spacing: -.035em; overflow-wrap: anywhere; }.message-meta { margin: 0; color: #7892ae; font-size: .75rem; }.message-actions { display: flex; align-items: flex-start; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }.parse-notice { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; padding: .72rem .8rem; color: #bdcae0; border: 1px solid rgba(122, 157, 204, .3); border-radius: .55rem; background: rgba(34, 58, 86, .3); font-size: .78rem; }.message-view-toggle { display: flex; gap: .3rem; margin-top: 1.15rem; padding-bottom: .55rem; border-bottom: 1px solid rgba(109, 153, 209, .14); }.view-toggle { border: 0; border-radius: .35rem; padding: .4rem .55rem; color: #89a6c4; background: transparent; font-size: .76rem; }.view-toggle.active { color: #d9e9fa; background: rgba(77, 125, 179, .28); }.message-text { min-height: 13rem; max-width: 100%; margin: 0; padding: 1.4rem 0; color: #cfdaea; font: .84rem/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }.message-html { width: 100%; min-height: 28rem; margin-top: 1rem; border: 1px solid #2c4968; border-radius: .65rem; background: #fff; }.attachments-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(109, 153, 209, .16); }.attachments-section h3 { margin-bottom: .65rem; color: #b9cbe0; font-size: .84rem; }.attachment-list { display: flex; flex-wrap: wrap; gap: .5rem; }.attachment-link { display: inline-flex; align-items: center; gap: .45rem; max-width: 100%; padding: .5rem .6rem; color: #c4daf3; border: 1px solid #345675; border-radius: .5rem; background: rgba(28, 53, 82, .48); text-decoration: none; font-size: .75rem; }.attachment-link:hover { background: #1d3a5b; }.attachment-name { overflow: hidden; max-width: 13rem; text-overflow: ellipsis; white-space: nowrap; }.attachment-size { color: #7f9dbd; }

.mailbox-dialog { width: min(calc(100% - 2rem), 500px); padding: 0; color: #e8f2fc; border: 1px solid #365879; border-radius: 1rem; background: #0b1b2e; box-shadow: 0 30px 90px rgba(0, 0, 0, .55); }.mailbox-dialog::backdrop { background: rgba(0, 9, 18, .68); backdrop-filter: blur(4px); }.mailbox-dialog form { display: grid; gap: .58rem; padding: 1.35rem; }.dialog-heading { display: flex; justify-content: space-between; align-items: flex-start; }.dialog-heading .eyebrow { margin: 0 0 .4rem; }.dialog-heading h2 { margin: 0; font-size: 1.15rem; }.dialog-copy { margin: .45rem 0 .65rem; color: #91a9c3; font-size: .81rem; line-height: 1.6; }.domain-hint { min-height: 1.2rem; margin: .1rem 0 0; color: #7899bb; font-size: .72rem; }.dialog-actions { display: flex; justify-content: flex-end; gap: .55rem; margin-top: .6rem; }.toast { position: fixed; z-index: 5; bottom: 1.35rem; left: 50%; max-width: calc(100vw - 2rem); transform: translateX(-50%); padding: .72rem .95rem; color: #eef7ff; border: 1px solid #456b8f; border-radius: .55rem; background: #153352; box-shadow: 0 14px 35px rgba(0, 0, 0, .28); font-size: .82rem; }.toast.error { border-color: #9a5260; color: #ffd7dc; background: #522332; }

@media (max-width: 950px) { .workspace { grid-template-columns: 210px minmax(280px, 1fr); }.message-panel { grid-column: 1 / -1; min-height: 45vh; border-top: 1px solid rgba(108, 153, 208, .15); }.message-placeholder { min-height: 25vh; }.sidebar-note { position: static; } }
@media (max-width: 640px) { .topbar { padding: 0 .9rem; }.session-status { display: none; }.workspace { display: block; }.sidebar, .inbox-panel { border-right: 0; border-bottom: 1px solid rgba(108, 153, 208, .15); }.sidebar { padding: 1rem .9rem; }.mailbox-list { display: flex; overflow-x: auto; margin-top: 1rem; }.mailbox-button { min-width: 170px; }.sidebar-note { display: none; }.inbox-panel { padding: 1.2rem .9rem; }.message-panel { padding: 1.35rem .9rem; }.message-header { display: block; }.message-actions { justify-content: flex-start; margin-top: .9rem; }.topbar-actions { gap: .4rem; }.login-view { padding: 2rem 0; } }