* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 -apple-system, system-ui, sans-serif; color: #1c1c1e; }
.hidden { display: none !important; }
.muted { color: #8a8a8e; }
.error { color: #c0392b; }
button { cursor: pointer; }

#login-view { display: flex; min-height: 100vh; align-items: center; justify-content: center; }
.login-box { display: flex; flex-direction: column; gap: 12px; width: 320px; }
.login-box input { padding: 10px; border: 1px solid #d0d0d5; border-radius: 8px; }
.login-box button { padding: 10px; border: 0; border-radius: 8px; background: #0a66c2; color: #fff; font-weight: 600; }

#mail-view { display: grid; grid-template-columns: 220px 340px 1fr; height: 100vh; }
#sidebar { border-right: 1px solid #e2e2e6; padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.sidebar-head { display: flex; justify-content: space-between; align-items: center; }
#compose-btn { padding: 8px; border: 0; border-radius: 8px; background: #0a66c2; color: #fff; font-weight: 600; }
#mailbox-list { list-style: none; margin: 0; padding: 0; }
#mailbox-list li { padding: 6px 8px; border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between; }
#mailbox-list li.active, #mailbox-list li:hover { background: #ececf0; }
#mailbox-list .unseen { color: #0a66c2; font-weight: 600; }
#search-box { padding: 8px; border: 1px solid #d0d0d5; border-radius: 8px; }

#message-list-pane { border-right: 1px solid #e2e2e6; overflow-y: auto; }
#message-list { list-style: none; margin: 0; padding: 0; }
#message-list li { padding: 10px 12px; border-bottom: 1px solid #f0f0f3; cursor: pointer; }
#message-list li:hover { background: #f6f6f9; }
#message-list li.active { background: #e8f0fa; }
#message-list li.unread .subject { font-weight: 700; }
#message-list .from { display: block; font-size: 13px; }
#message-list .subject { display: block; }
#message-list .date { float: right; font-size: 12px; color: #8a8a8e; }

#reader-pane { overflow-y: auto; padding: 16px; }
#reader-empty { color: #8a8a8e; text-align: center; margin-top: 40vh; }
.reader-head h2 { margin: 0 0 4px; }
.reader-actions { display: flex; gap: 8px; margin: 8px 0 16px; }
.reader-actions button { padding: 5px 10px; border: 1px solid #d0d0d5; border-radius: 6px; background: #fff; }
#reader-body { white-space: pre-wrap; font: 13px/1.6 ui-monospace, monospace; }

#composer { display: flex; flex-direction: column; gap: 8px; }
#composer input, #composer textarea { padding: 8px; border: 1px solid #d0d0d5; border-radius: 8px; font: inherit; }
#composer button { padding: 8px 14px; border: 0; border-radius: 8px; background: #0a66c2; color: #fff; }
#composer #compose-cancel { background: #ececf0; color: #1c1c1e; }