:root{--bg: #ffffff;--bg-alt: #f6f8fc;--border: #e0e3e7;--text: #202124;--text-dim: #5f6368;--accent: #1a73e8;--accent-bg: #e8f0fe;--danger: #d93025;--row-h: 56px;--topbar-h: 56px;--sidebar-w: 240px;--list-w: 380px;color-scheme:light dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font:14px/1.5 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg)}button{font:inherit;cursor:pointer}.app{display:flex;flex-direction:column;height:100%}.app--loading{align-items:center;justify-content:center}.topbar{display:flex;align-items:center;gap:16px;height:var(--topbar-h);padding:0 16px;border-bottom:1px solid var(--border);background:var(--bg)}.topbar__brand{font-weight:600;font-size:18px}.topbar__search{flex:1;max-width:720px}.topbar__search input{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg-alt)}.topbar__user{display:flex;align-items:center;gap:12px}.topbar__email{color:var(--text-dim)}.topbar__signout{border:1px solid var(--border);background:var(--bg);border-radius:6px;padding:6px 10px}.app__main{flex:1;display:grid;grid-template-columns:var(--sidebar-w) var(--list-w) 1fr;min-height:0}.app__error{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fce8e6;color:var(--danger);padding:8px 16px}.app__error button{background:none;border:none;color:inherit}.sidebar{border-right:1px solid var(--border);padding:12px 8px;overflow-y:auto}.sidebar__compose{width:100%;padding:12px;margin-bottom:12px;border:none;border-radius:24px;background:var(--accent);color:#fff;font-weight:600}.sidebar__item{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px;border:none;background:none;border-radius:0 16px 16px 0;text-align:left;color:var(--text)}.sidebar__item--active{background:var(--accent-bg);font-weight:600}.sidebar__name{flex:1}.sidebar__badge{color:var(--text-dim);font-size:12px}.msg-list{border-right:1px solid var(--border);overflow-y:auto;position:relative}.msg-list__empty,.msg-list__loading{padding:24px;color:var(--text-dim)}.msg-row{display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--border);background:var(--bg);overflow:hidden}.msg-row:hover{background:var(--bg-alt)}.msg-row--selected{background:var(--accent-bg)}.msg-row--unread{font-weight:700}.msg-row__star{border:none;background:none;color:var(--text-dim);font-size:16px}.msg-row__star--on{color:#f4b400}.msg-row__from{width:140px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.msg-row__subject{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.msg-row__preview{color:var(--text-dim);font-weight:400}.msg-row__date{color:var(--text-dim);font-size:12px;flex-shrink:0}.msg-row__attach{flex-shrink:0}.reading-pane{padding:16px 24px;overflow-y:auto}.reading-pane--empty{color:var(--text-dim);display:flex;align-items:center;justify-content:center}.reading-pane__subject{margin:0 0 12px;font-size:20px}.reading-pane__meta{color:var(--text-dim);font-size:13px;margin-bottom:16px}.reading-pane__date{margin-top:4px}.email-body{margin-top:8px}.email-body__banner{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fef7e0;border:1px solid #feefc3;border-radius:6px;padding:8px 12px;margin-bottom:8px;font-size:13px}.email-body__show-images{border:1px solid var(--border);background:var(--bg);border-radius:6px;padding:4px 10px}.email-body__frame{display:block;border-radius:6px}.reading-pane__attachments{margin-top:16px;font-size:13px}.reading-pane__attachments ul{margin:4px 0 0;padding-left:18px}.compose{position:fixed;right:24px;bottom:0;width:520px;max-width:calc(100vw - 48px);background:var(--bg);border:1px solid var(--border);border-radius:8px 8px 0 0;box-shadow:0 8px 24px #00000040;display:flex;flex-direction:column;z-index:50}.compose--loading{padding:16px}.compose__head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--text);color:#fff;border-radius:8px 8px 0 0}.compose__close{background:none;border:none;color:#fff}.compose__body{padding:12px 14px;display:flex;flex-direction:column;gap:8px}.compose__field,.compose__textarea{width:100%;padding:8px;border:none;border-bottom:1px solid var(--border);font:inherit}.compose__textarea{border:1px solid var(--border);border-radius:6px;resize:vertical}.compose__error{color:var(--danger);font-size:13px}.compose__attachments{margin:0;padding-left:18px;font-size:13px;color:var(--text-dim)}.compose__foot{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--border)}.compose__send{background:var(--accent);color:#fff;border:none;border-radius:18px;padding:8px 24px;font-weight:600}.compose__send:disabled{opacity:.6}.compose__attach-btn{color:var(--text-dim)}.login{height:100%;display:flex;align-items:center;justify-content:center;background:var(--bg-alt)}.login__card{width:360px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:32px;display:flex;flex-direction:column;gap:16px}.login__title{margin:0;text-align:center}.login__label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--text-dim)}.login__label input{padding:10px;border:1px solid var(--border);border-radius:8px;font:inherit}.login__submit{padding:12px;border:none;border-radius:8px;background:var(--accent);color:#fff;font-weight:600}.login__submit:disabled{opacity:.6}.login__error{color:var(--danger);font-size:13px}.login__note{text-align:center;color:var(--text-dim);font-size:12px;margin:0}@media (prefers-color-scheme: dark){:root{--bg: #1f1f1f;--bg-alt: #2a2a2a;--border: #3c4043;--text: #e8eaed;--text-dim: #9aa0a6;--accent-bg: #1a3b6b}}