:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #14213d; background: #f5f7fb; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button { font: inherit; cursor: pointer; }
.shell { max-width: 1060px; min-height: 100vh; margin: 0 auto; padding: 26px 28px 64px; }
.topbar { display: flex; justify-content: space-between; align-items: center; }
.brand { color: #14213d; display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 720; text-decoration: none; }
.brand-mark { display: grid; place-items: center; height: 30px; width: 30px; color: #fff; background: #1677ff; border-radius: 7px; font-weight: 800; }
.status { color: #5c6b7f; font-size: 13px; } .status i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #24a66a; }
.workspace { margin-top: 80px; }
.intro { max-width: 640px; } .eyebrow { margin: 0 0 8px; color: #1677ff; font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
h1 { margin: 0; color: #14213d; font-size: 38px; line-height: 1.17; letter-spacing: 0; } .intro > p:last-child { margin: 14px 0 0; color: #5c6b7f; line-height: 1.7; }
.mailbox-panel { margin-top: 32px; padding: 26px; border: 1px solid #dfe6f1; border-radius: 8px; background: #fff; box-shadow: 0 12px 35px rgb(29 58 107 / 7%); }
.address-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; }.field-label { margin: 0 0 8px; color: #66768c; font-size: 13px; }.address { display: block; overflow-wrap: anywhere; color: #14213d; font-size: 25px; font-weight: 700; }
.copy, .secondary, .primary, .close { border-radius: 6px; padding: 10px 15px; }.copy, .secondary, .close { border: 1px solid #cdd8e8; background: #fff; color: #263a59; }.primary { border: 1px solid #1677ff; background: #1677ff; color: #fff; }.copy:disabled, button:disabled { cursor: default; opacity: .55; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 22px; margin-top: 22px; border-top: 1px solid #edf0f5; }.expiry { margin-left: auto; color: #6f7c8d; font-size: 13px; }
.inbox { margin-top: 58px; }.section-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 16px; }.section-head h2 { margin: 0; font-size: 21px; }.updated { color: #738196; font-size: 13px; }
.empty { min-height: 215px; display: grid; place-content: center; justify-items: center; border-top: 1px solid #dfe6f1; color: #6c7a8e; text-align: center; }.empty h3 { margin: 8px 0 3px; color: #253957; font-size: 16px; }.empty p { max-width: 310px; margin: 0; font-size: 14px; line-height: 1.6; }.empty-symbol { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #ccd7e8; border-radius: 50%; color: #1677ff; font-weight: 700; }.spinner { width: 22px; height: 22px; border: 2px solid #d5dfec; border-top-color: #1677ff; border-radius: 50%; animation: rotate .8s linear infinite; }.hidden { display: none; }
.messages { border-top: 1px solid #dfe6f1; }.message { position: relative; display: grid; width: 100%; grid-template-columns: minmax(120px, .85fr) minmax(160px, 1.3fr) 2fr auto; gap: 16px; align-items: center; padding: 17px 8px; border: 0; border-bottom: 1px solid #e9edf4; background: transparent; color: #263a59; text-align: left; }.message:hover { background: #f0f6ff; }.message strong, .message span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.message span { font-weight: 600; }.message small { overflow: hidden; color: #708096; text-overflow: ellipsis; white-space: nowrap; }.message time { color: #748298; font-size: 12px; white-space: nowrap; }
dialog { width: min(820px, calc(100% - 32px)); max-height: min(760px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 8px; box-shadow: 0 24px 70px rgb(14 35 66 / 28%); } dialog::backdrop { background: rgb(12 25 44 / 45%); }dialog article { margin: 0; }dialog header { display: flex; justify-content: space-between; gap: 18px; padding: 22px 24px 16px; border-bottom: 1px solid #e2e8f1; }.dialog-from, .dialog-meta { margin: 0; color: #6c7a8e; font-size: 13px; }.dialog-from { margin-bottom: 4px; }dialog h2 { margin: 0; font-size: 20px; }.dialog-meta { padding: 10px 24px; }iframe { display: block; width: 100%; height: 440px; border: 0; border-top: 1px solid #e2e8f1; background: #fff; }
#toast { position: fixed; right: 22px; bottom: 22px; z-index: 2; padding: 11px 14px; border-radius: 6px; background: #14213d; color: #fff; font-size: 14px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .18s, transform .18s; }#toast.visible { opacity: 1; transform: translateY(0); }@keyframes rotate { to { transform: rotate(360deg); } }
@media (max-width: 640px) { .shell { padding: 20px 18px 42px; }.workspace { margin-top: 56px; }h1 { font-size: 31px; }.mailbox-panel { padding: 20px; }.address-row { align-items: flex-start; }.address { font-size: 19px; }.actions { align-items: stretch; }.expiry { width: 100%; margin: 3px 0 0; }.section-head { align-items: start; flex-direction: column; gap: 5px; }.message { grid-template-columns: 1fr auto; gap: 5px 12px; }.message span, .message small { grid-column: 1 / -1; }.message small { display: none; }dialog header { padding: 18px; }iframe { height: 390px; } }