:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #0e1118; color: #f1f4fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 8% 0%, #1b2538 0, transparent 34%), #0e1118; }
.shell { max-width: 1180px; margin: 0 auto; padding: 44px 24px; }
.eyebrow { color: #8293b8; text-transform: uppercase; letter-spacing: .15em; font-size: .68rem; margin: 0; font-weight: 700; }
h1 { margin: 5px 0 0; font-size: 2.1rem; letter-spacing: -.04em; } h2 { margin: 5px 0; letter-spacing: -.03em; } em { color: #91b3ff; font-style: normal; }
button, input { border: 1px solid #303c56; border-radius: 10px; background: #171e2c; color: inherit; padding: 12px 14px; font: inherit; }
button { cursor: pointer; transition: .2s ease; } button:hover { border-color: #8cacff; transform: translateY(-1px); }
.login-card { max-width: 460px; margin: 9vh auto 0; padding: 42px; border: 1px solid #29364f; border-radius: 24px; background: rgba(20, 27, 40, .88); box-shadow: 0 30px 100px rgba(0,0,0,.28); }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 28px; border-radius: 13px; color: #142038; background: #a9c4ff; font-size: 1.5rem; }
.brand-mark.small { width: 34px; height: 34px; margin: 0; border-radius: 10px; font-size: 1rem; }
.login-card h1 { font-size: 3.6rem; line-height: .98; margin: 14px 0; }
.login-copy, .hint { color: #8e9db9; line-height: 1.55; }
.login-card form { display: grid; gap: 9px; margin-top: 30px; } label { color: #aebbd2; font-size: .85rem; }
.primary { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; background: #a9c4ff; border-color: #a9c4ff; color: #121b2d; font-weight: 700; }
.form-error { color: #ff929b; min-height: 20px; margin: 3px 0 0; font-size: .85rem; }
.security-note { color: #7484a2; font-size: .78rem; margin: 32px 0 0; } .security-note span { color: #7fd1a4; margin-right: 6px; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.brand { display: flex; align-items: center; gap: 12px; } .top-actions { display: flex; align-items: center; gap: 18px; } .status { color: #8293b8; font-size: .85rem; }
.ghost { background: transparent; color: #aab8d3; padding: 9px 12px; }
.layout { display: grid; grid-template-columns: minmax(280px, 35%) 1fr; gap: 18px; }
.sidebar { min-width: 0; }
.folders { display: flex; gap: 8px; margin-bottom: 10px; }
.folder { flex: 1; background: transparent; border-color: transparent; color: #8293b8; text-align: left; }
.folder.active { background: #1b2942; color: #d7e2ff; border-color: #34496d; }
.folder span { float: right; color: #a9c4ff; }
.messages, .detail, .blocked-panel { border: 1px solid #29364f; border-radius: 18px; background: rgba(19, 26, 39, .9); padding: 16px; }
.messages, .detail { min-height: 460px; }
.message { display: grid; width: 100%; text-align: left; gap: 5px; margin-bottom: 8px; background: transparent; border-color: transparent; }
.message:hover, .message.unread { background: #1b2942; } .message span, .message time, .meta { color: #8293b8; font-size: .82rem; } .message.unread strong { color: #a9c4ff; }
.detail h2 { font-size: 1.6rem; } .empty-state { min-height: 420px; display: grid; place-content: center; justify-items: center; color: #6f7f9b; gap: 12px; }
.empty-state span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #1a2942; color: #9cb8ff; font-size: 1.4rem; }
.body-content { white-space: pre-wrap; line-height: 1.65; color: #d7dfef; overflow-wrap: anywhere; }
.body-content a { color: #9cb8ff; text-decoration: underline; }
.detail-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 18px; }
.blocked-panel { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; margin-top: 18px; } .blocked-panel form { display: flex; gap: 8px; align-items: center; }
.blocked-panel .hint { margin: 4px 0 0; } .secondary { background: #202d46; color: #bcd0ff; }
.blocked-row { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #29364f; padding: 12px 0 0; margin-top: 8px; }
@media (max-width: 700px) { .shell { padding: 24px 16px; } .login-card { padding: 28px; margin-top: 4vh; } .login-card h1 { font-size: 2.8rem; } .topbar, .blocked-panel { display: block; } .top-actions { margin-top: 18px; justify-content: space-between; } .layout { display: block; } .detail { margin-top: 16px; } .blocked-panel form { margin-top: 16px; display: grid; } }