:root{--bg: #fafaf9;--fg: #1f2937;--muted: #6b7280;--accent: #1d4ed8;--border: #e5e7eb;--unread: #111827;--hover: #f3f4f6;--selected: #dbeafe}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans SC,sans-serif;color:var(--fg);background:var(--bg);font-size:14px}button{cursor:pointer;border:1px solid var(--border);background:#fff;padding:6px 12px;border-radius:6px;font-size:13px}button:hover{background:var(--hover)}.login{display:grid;place-items:center;height:100%}.login form{display:flex;flex-direction:column;gap:12px;width:360px;padding:24px;border:1px solid var(--border);border-radius:10px;background:#fff}.login h1{margin:0 0 8px;color:var(--accent)}.login label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}.login input{padding:8px 10px;border:1px solid var(--border);border-radius:6px;font-size:14px}.login .error{color:#b91c1c;font-size:12px}.inbox{display:grid;grid-template-columns:240px 1fr 400px;height:100%}.inbox .sidebar{border-right:1px solid var(--border);overflow-y:auto}.sidebar header{padding:12px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--border)}.sidebar h2{margin:0;font-size:16px;color:var(--accent)}.sidebar ul{list-style:none;margin:0;padding:0}.sidebar li{padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:2px}.sidebar li:hover{background:var(--hover)}.sidebar li.active{background:var(--selected)}.sidebar .name{font-weight:500}.sidebar .email{color:var(--muted);font-size:12px}.mail-list{overflow-y:auto;border-right:1px solid var(--border)}.mail-list table{width:100%;border-collapse:collapse}.mail-list tr{cursor:pointer;border-bottom:1px solid var(--border)}.mail-list tr:hover{background:var(--hover)}.mail-list tr.unread .from,.mail-list tr.unread .subj{font-weight:600;color:var(--unread)}.mail-list td{padding:10px 12px;vertical-align:top}.mail-list .from{width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mail-list .subj{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}.mail-list .preview{color:var(--muted);font-size:12px;max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-list .date{width:140px;color:var(--muted);white-space:nowrap;font-size:12px}.mail-list .error{padding:12px;background:#fee2e2;color:#991b1b}.preview-pane{padding:16px;position:relative;overflow-y:auto}.preview-pane>button{position:absolute;top:8px;right:8px}.preview-pane h3{margin-top:0}.preview-pane .body-preview{background:#fff;padding:12px;border-radius:6px;white-space:pre-wrap;word-wrap:break-word;font-family:inherit;border:1px solid var(--border)}.preview-pane .hint{color:var(--muted);font-size:12px}.loading{display:grid;place-items:center;height:100%;color:var(--muted)}@media(max-width:768px){.inbox{grid-template-columns:1fr}.inbox .sidebar,.mail-list .date,.mail-list .preview{display:none}.preview-pane{position:fixed;inset:0;background:#fff;z-index:10}}