:root { color-scheme: light; font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif; color: #182019; background: #eef1ed; }
* { box-sizing: border-box; } body { margin: 0; min-width: 320px; } button, input, textarea { font: inherit; } button { cursor: pointer; }
.topbar { min-height: 92px; padding: 20px 32px; background: #17231b; color: #f7faf7; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 4px solid #d7a928; }
.topbar h1 { margin: 3px 0 0; font-size: 24px; letter-spacing: 0; } .eyebrow { color: #d7a928; font-size: 11px; font-weight: 800; } .topbar nav { display: flex; align-items: center; gap: 16px; } .topbar a { color: #f7faf7; }
.status { padding-left: 14px; position: relative; font-size: 13px; } .status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #c88a20; position: absolute; left: 0; top: 5px; } .status.ok::before { background: #4ab26b; }
main { padding: 24px 32px 32px; } .toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 18px; } .metrics, .actions { display: flex; align-items: center; gap: 10px; } .metrics strong { font-size: 26px; } .metrics span { margin-right: 16px; color: #667068; font-size: 13px; }
input, textarea { border: 1px solid #b9c2bb; background: white; color: #182019; border-radius: 5px; padding: 10px 12px; } input:focus, textarea:focus { outline: 2px solid #8bab95; outline-offset: 1px; }
button { border: 1px solid transparent; border-radius: 5px; padding: 10px 14px; font-weight: 700; } button.primary { background: #1f6d45; color: white; } button.secondary { background: white; border-color: #b9c2bb; color: #27332a; } button.danger { color: #a2302b; background: transparent; padding: 6px 8px; } button.link { color: #17613d; background: transparent; padding: 6px 8px; } button:disabled { opacity: .5; cursor: wait; }
.workspace { display: grid; grid-template-columns: minmax(560px, 1.35fr) minmax(320px, .65fr); min-height: 560px; background: white; border: 1px solid #d5dbd6; } .table-pane { overflow: auto; border-right: 1px solid #d5dbd6; } table { width: 100%; border-collapse: collapse; table-layout: fixed; } th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid #e5e9e6; font-size: 14px; } th { color: #68716a; font-size: 12px; background: #f7f8f6; position: sticky; top: 0; } th:nth-child(1) { width: 40%; } th:nth-child(2) { width: 15%; } th:nth-child(3) { width: 22%; }
.mail { overflow-wrap: anywhere; font-weight: 650; } .mail > strong { display: block; } .mail > small { display: block; margin-top: 7px; color: #758078; font-size: 11px; font-weight: 500; } .alias-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .alias-item { display: inline-flex; align-items: stretch; border: 1px solid #cdd7cf; border-radius: 4px; overflow: hidden; background: #f4f7f4; } .alias-link, .alias-remove { border: 0; border-radius: 0; background: transparent; padding: 4px 6px; font-size: 11px; } .alias-link { color: #17613d; font-weight: 650; } .alias-remove { color: #8c3430; border-left: 1px solid #d9dfda; } .alias-empty { color: #879089; font-size: 11px; font-weight: 500; } .badge { display: inline-block; min-width: 64px; text-align: center; padding: 4px 8px; border-radius: 4px; font-size: 12px; background: #ecefeb; color: #566058; } .badge.ok { background: #dff0e3; color: #17613d; } .badge.error { background: #f8e3e1; color: #9d2d28; } .row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; white-space: normal; } .empty, .message-placeholder { color: #7b847d; padding: 48px 24px; text-align: center; }
.message-pane { padding: 22px; min-width: 0; overflow: auto; } .message-pane h2 { font-size: 18px; margin: 0 0 18px; overflow-wrap: anywhere; } .message-meta { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; font-size: 13px; margin-bottom: 18px; } .message-meta dt { color: #738078; } .message-meta dd { margin: 0; overflow-wrap: anywhere; } .code { display: flex; align-items: center; justify-content: space-between; background: #17231b; color: white; padding: 14px; margin: 0 0 18px; border-left: 4px solid #d7a928; } .code strong { font-family: Consolas, monospace; font-size: 24px; letter-spacing: 2px; } .message-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; font-size: 14px; } .registration { margin-top: 22px; border-top: 1px solid #dfe4e0; padding-top: 18px; } .registration code { display: block; margin-top: 8px; background: #f2f4f1; padding: 12px; overflow-wrap: anywhere; font-size: 12px; }
dialog { width: min(620px, calc(100vw - 32px)); border: 0; border-radius: 6px; padding: 0; box-shadow: 0 18px 55px #0004; } dialog::backdrop { background: #1119; } dialog form { padding: 22px; } .dialog-head, .dialog-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .dialog-head h2 { margin: 0 0 16px; font-size: 20px; } .icon { background: transparent; font-size: 26px; padding: 0 6px; } dialog label { display: block; margin-bottom: 8px; color: #556159; } dialog textarea { width: 100%; resize: vertical; font-family: Consolas, monospace; } .selected-mail { margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid #1f6d45; background: #edf4ef; font-weight: 750; overflow-wrap: anywhere; } .sync-option { display: flex; align-items: center; gap: 8px; margin-top: 12px; } .sync-option input { width: 16px; height: 16px; padding: 0; } .dialog-actions { justify-content: flex-end; margin-top: 16px; } .error { min-height: 20px; color: #a2302b; font-size: 13px; }
#toast { position: fixed; right: 22px; bottom: 22px; max-width: min(420px, calc(100vw - 44px)); padding: 12px 16px; border-radius: 5px; background: #17231b; color: white; opacity: 0; transform: translateY(8px); pointer-events: none; transition: .2s; } #toast.show { opacity: 1; transform: translateY(0); } .docs { max-width: 880px; margin: 48px auto; padding: 0 24px; } .docs pre { background: #17231b; color: white; padding: 18px; overflow: auto; }
@media (max-width: 900px) { .workspace { grid-template-columns: 1fr; } .table-pane { border-right: 0; border-bottom: 1px solid #d5dbd6; } .message-pane { min-height: 360px; } } @media (max-width: 640px) { .topbar, .toolbar { align-items: flex-start; flex-direction: column; } .topbar, main { padding-left: 18px; padding-right: 18px; } .metrics { flex-wrap: wrap; } .actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; } .actions input { grid-column: 1 / -1; min-width: 0; width: 100%; } .actions button { width: 100%; } .workspace { min-height: 0; } .table-pane { overflow-x: auto; } table { min-width: 760px; } .dialog-actions { display: grid; grid-template-columns: 1fr 1fr; } .dialog-actions button { width: 100%; } .dialog-actions button:first-child { grid-column: 1 / -1; } }