* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: #0f1115; color: #e6e6e6; }

[hidden] { display: none !important; }

#login-screen { display: flex; align-items: center; justify-content: center; height: 100vh; }
#login-form { display: flex; flex-direction: column; gap: 0.5rem; width: 280px; }
#login-form input, #login-form button { padding: 0.6rem; font-size: 1rem; }
.error { color: #ff6b6b; min-height: 1.2rem; }

#app-screen { display: flex; height: 100vh; }
#mailboxes-panel { width: 320px; border-right: 1px solid #2a2d34; padding: 1rem; overflow-y: auto; }
#mailboxes-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
#mailboxes-actions button { flex: 1; padding: 0.5rem; }
#custom-local-part { flex: 1 1 100%; padding: 0.5rem; }
#mailboxes-list { list-style: none; padding: 0; margin: 0; }
#mailboxes-list li { padding: 0.6rem; border-radius: 6px; cursor: pointer; margin-bottom: 0.3rem; }
#mailboxes-list li:hover, #mailboxes-list li.active { background: #1c1f26; }
#mailboxes-list .badge { font-size: 0.7rem; color: #8a8; margin-left: 0.3rem; }
#mailboxes-list .expiry-info { display: block; font-size: 0.7rem; color: #888; margin-top: 0.2rem; }
.mailbox-actions { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
.mailbox-actions button { font-size: 0.75rem; padding: 0.3rem 0.5rem; }
.attachments-list { list-style: none; padding: 0; margin: 0 0 0.5rem 0; }
.attachments-list a { color: #6cb6ff; }

#inbox-panel { flex: 1; padding: 1rem; overflow-y: auto; }
#messages-list { list-style: none; padding: 0; }
#messages-list li { padding: 0.6rem; border-bottom: 1px solid #2a2d34; cursor: pointer; }
#message-detail { padding: 1rem; background: #1c1f26; border-radius: 8px; }