:root { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #33251d; background: #f7f1eb; }
* { box-sizing: border-box; } body { margin: 0; } header { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: #5b3024; color: #fff8f0; } h1 { font-size: 19px; margin: 0; } h2 { font-size: 16px; margin: 0 0 12px; }
button, input { font: inherit; } button { border: 0; border-radius: 6px; padding: 8px 11px; cursor: pointer; background: #b85c38; color: #fffaf5; transition: background .15s, transform .15s; } button:hover { background: #94472c; } button:active { transform: translateY(1px); } button:disabled { opacity: .45; cursor: default; transform: none; }
.warm { background: #c96a43; } .warm:hover { background: #a94f31; } .warm.outline { color: #9b492f; background: #fffaf6; border: 1px solid #dda487; } .warm.outline:hover { background: #fbe6da; } .warm.ghost { background: transparent; border: 1px solid #e7b9a1; } .warm.ghost:hover { background: #754333; }
input { width: 100%; padding: 9px 10px; border: 1px solid #ddc9bb; border-radius: 6px; margin: 8px 0; background: #fffdfb; color: #33251d; } input:focus, button:focus { outline: 3px solid #efb28f; outline-offset: 1px; }
.layout { display: grid; grid-template-columns: 430px 360px 1fr; gap: 10px; padding: 10px; height: calc(100vh - 58px); } .pane { min-width: 0; background: #fffdfb; border: 1px solid #e6d8cf; border-radius: 9px; padding: 13px; display: flex; flex-direction: column; box-shadow: 0 2px 9px #6a3d2110; } .mailbox-pane { min-width: 0; } .toolbar { display: flex; gap: 6px; flex-wrap: wrap; } .toolbar button { font-size: 13px; } .scroll { overflow: auto; flex: 1; min-height: 0; }
.row { display: flex; gap: 7px; align-items: center; padding: 9px 5px; border-bottom: 1px solid #f0e6df; cursor: pointer; min-width: 0; } .row:hover, .row.selected { background: #fff0e8; } .row .address { flex: 1; min-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row small { color: #866f62; margin-left: auto; white-space: nowrap; font-size: 11px; } .select-box { width: auto; margin: 0 3px 0 0; accent-color: #b85c38; } .copy { padding: 5px 7px; font-size: 11px; white-space: nowrap; } nav { display:flex; gap: 8px; justify-content: center; align-items: center; padding-top: 10px; color: #694b3c; } nav button { padding: 6px 9px; font-size: 12px; }
.detail pre { white-space: pre-wrap; overflow: auto; flex: 1; background: #fffaf6; border: 1px solid #f0e1d8; padding: 10px; border-radius: 6px; color: #33251d; } .empty { color: #9a8377; text-align: center; padding: 24px 8px; }
.toast { position: fixed; left: 50%; bottom: 25px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; background: #5b3024; color: #fff8f0; border-radius: 6px; padding: 9px 14px; transition: opacity .2s, transform .2s; } .toast.visible { opacity: 1; transform: translate(-50%, 0); }
.result-panel { display: none; position: fixed; inset: 0; align-items: center; justify-content: center; background: #2c1c1699; padding: 16px; } .result-panel.visible { display: flex; } .result-card { position: relative; width: min(560px, 100%); background: #fffdfb; border-radius: 10px; padding: 22px; box-shadow: 0 12px 40px #2c1c1640; } .result-card h2 { color: #5b3024; } .result-card p { margin: 12px 0 5px; color: #694b3c; font-size: 13px; } .copy-field { display: flex; gap: 8px; align-items: center; } .copy-field code { flex: 1; min-width: 0; overflow: auto; white-space: nowrap; padding: 9px; background: #fff5ef; border: 1px solid #efd0bf; border-radius: 6px; } .result-card small { display: block; margin-top: 13px; color: #866f62; } .close { position: absolute; top: 10px; right: 12px; padding: 0 6px; font-size: 22px; background: transparent; color: #694b3c; }
.login { max-width: 380px; margin: 15vh auto; background: #fffdfb; padding: 26px; border-radius: 10px; box-shadow: 0 8px 30px #6a3d2120; } .login form { display: grid; gap: 10px; } .login h1 { color: #5b3024; } .login label { color: #694b3c; font-size: 14px; } .login input { margin: 5px 0 0; }
@media (max-width: 1120px) { .layout { grid-template-columns: 360px 320px 1fr; } } @media (max-width: 900px) { .layout { grid-template-columns: 1fr; height: auto; } .pane { min-height: 280px; } .copy { display: none; } }