:root{--bg:#f6f8fc;--surface:#fff;--surface-alt:#f1f3f4;--ink:#202124;--ink-muted:#5f6368;--ink-faint:#80868b;--line:#dadce0;--accent:#1a73e8;--accent-soft:#e8f0fe;--danger:#d93025;--unread:#202124;--radius:16px;--shadow:0 1px 3px #3c404340}@media (prefers-color-scheme:dark){:root{--bg:#17181a;--surface:#1f2023;--surface-alt:#2a2b2f;--ink:#e8eaed;--ink-muted:#9aa0a6;--ink-faint:#80868b;--line:#3c4043;--accent:#8ab4f8;--accent-soft:#1f3047;--danger:#f28b82;--unread:#fff;--shadow:0 1px 3px #0009}}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;font:14px/1.5 Google Sans,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button{font:inherit;color:inherit;cursor:pointer}.app{flex-direction:column;height:100%;display:flex}.topbar{flex-shrink:0;align-items:center;gap:16px;height:64px;padding:8px 16px;display:flex}.brand{color:var(--ink-muted);align-items:center;gap:10px;font-size:20px;font-weight:500;display:flex}.brand-mark{background:var(--accent);color:#fff;border-radius:8px;place-items:center;width:32px;height:32px;font-size:15px;font-weight:700;display:grid}.search{background:var(--surface-alt);border:1px solid #0000;border-radius:8px;flex:1;align-items:center;gap:10px;max-width:720px;height:46px;padding:0 14px;transition:background .15s,box-shadow .15s;display:flex}.search:focus-within{background:var(--surface);box-shadow:var(--shadow)}.search input{color:var(--ink);background:0 0;border:0;outline:none;flex:1;font-size:15px}.search button{color:var(--ink-muted);background:0 0;border:0;border-radius:50%;padding:4px}.topbar-right{align-items:center;gap:10px;margin-left:auto;display:flex}.avatar{background:var(--accent-soft);width:34px;height:34px;color:var(--accent);border-radius:50%;place-items:center;font-weight:600;display:grid;overflow:hidden}.avatar img{object-fit:cover;width:100%;height:100%}.icon-btn{color:var(--ink-muted);background:0 0;border:0;border-radius:50%;place-items:center;width:36px;height:36px;display:grid}.icon-btn:hover{background:var(--surface-alt)}.icon-btn:disabled{opacity:.4;cursor:default}.body{flex:1;gap:8px;min-height:0;padding:0 8px 8px;display:flex}.sidebar{flex-shrink:0;width:232px;padding-right:4px;overflow-y:auto}.compose-btn{background:var(--accent-soft);color:var(--accent);height:56px;box-shadow:var(--shadow);border:0;border-radius:16px;align-items:center;gap:12px;margin-bottom:12px;padding:0 24px;font-size:14px;font-weight:600;display:flex}.compose-btn:hover{filter:brightness(.97)}.label-row{text-align:left;width:100%;height:32px;color:var(--ink);background:0 0;border:0;border-radius:0 16px 16px 0;align-items:center;gap:14px;padding:0 12px 0 20px;display:flex}.label-row:hover{background:var(--surface-alt)}.label-row.active{background:var(--accent-soft);color:var(--accent);font-weight:600}.label-row .name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.label-row .count{color:inherit;opacity:.85;font-size:12px}.label-dot{border-radius:3px;flex-shrink:0;width:10px;height:10px}.sidebar-heading{text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);padding:16px 20px 6px;font-size:11px}.panel{background:var(--surface);border-radius:var(--radius);flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.toolbar{border-bottom:1px solid var(--line);flex-shrink:0;align-items:center;gap:4px;min-height:48px;padding:6px 12px;display:flex}.toolbar .spacer{flex:1}.toolbar-label{color:var(--ink-muted);padding:0 8px;font-size:13px}.thread-list{flex:1;overflow-y:auto}.thread-row{border-bottom:1px solid var(--line);cursor:pointer;background:var(--surface);align-items:center;gap:12px;height:44px;padding:0 16px;display:flex}.thread-row:hover{box-shadow:inset 1px 0 0 var(--line), inset -1px 0 0 var(--line), var(--shadow);z-index:1}.thread-row.unread{background:var(--surface)}.thread-row.unread .sender,.thread-row.unread .subject{color:var(--unread);font-weight:700}.thread-row.selected{background:var(--accent-soft)}.thread-row .sender{text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;width:180px;overflow:hidden}.thread-row .subject-cell{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.thread-row .snippet{color:var(--ink-faint)}.thread-row .date{text-align:right;width:88px;color:var(--ink-muted);flex-shrink:0;font-size:12px}.thread-row .count-badge{color:var(--ink-faint);font-size:12px}.star{color:var(--ink-faint);background:0 0;border:0;padding:0;font-size:16px;line-height:1}.star.on{color:#f4b400}.empty{color:var(--ink-faint);text-align:center;flex:1;place-items:center;gap:8px;padding:48px;display:grid}.thread-view{flex:1;padding:20px 28px 60px;overflow-y:auto}.thread-subject{align-items:center;gap:12px;margin:0 0 20px;font-size:22px;font-weight:400;display:flex}.message{border-bottom:1px solid var(--line);padding:16px 0}.message:last-of-type{border-bottom:0}.message-head{align-items:flex-start;gap:12px;display:flex}.message-head .who{flex:1;min-width:0}.message-head .from-name{font-weight:600}.message-head .from-email{color:var(--ink-faint);font-size:12px}.message-head .when{color:var(--ink-muted);white-space:nowrap;font-size:12px}.message-body{margin-top:12px}.message-body iframe{border:0;width:100%;display:block}.collapsed-message{border-bottom:1px solid var(--line);cursor:pointer;color:var(--ink-muted);align-items:center;gap:10px;padding:10px 0;display:flex}.collapsed-message .snippet{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.images-blocked{background:var(--surface-alt);color:var(--ink-muted);border-radius:8px;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px;padding:8px 12px;font-size:13px;display:flex}.attachments{flex-wrap:wrap;gap:10px;margin-top:16px;display:flex}.attachment{color:var(--ink);border:1px solid var(--line);background:var(--surface);border-radius:8px;align-items:center;gap:8px;max-width:260px;padding:8px 12px;font-size:13px;text-decoration:none;display:flex}.attachment:hover{background:var(--surface-alt)}.attachment .meta{color:var(--ink-faint);font-size:11px}.reply-actions{gap:8px;margin-top:20px;display:flex}.pill{border:1px solid var(--line);background:var(--surface);color:var(--ink-muted);border-radius:18px;align-items:center;gap:8px;padding:8px 18px;font-weight:500;display:inline-flex}.pill:hover{background:var(--surface-alt)}.composer{background:var(--surface);z-index:40;border-radius:12px 12px 0 0;flex-direction:column;width:540px;max-width:calc(100vw - 32px);max-height:82vh;display:flex;position:fixed;bottom:0;right:24px;box-shadow:0 8px 24px #00000059}.composer-head{background:var(--surface-alt);border-radius:12px 12px 0 0;align-items:center;padding:10px 16px;font-size:14px;font-weight:600;display:flex}.composer-head .spacer{flex:1}.composer-fields{padding:0 16px}.composer-fields input,.composer-fields textarea{border:0;border-bottom:1px solid var(--line);width:100%;color:var(--ink);font:inherit;background:0 0;outline:none;padding:10px 0}.composer-body{flex:1;min-height:200px;padding:12px 16px;overflow-y:auto}.composer-body [contenteditable]{outline:none;min-height:180px}.composer-foot{align-items:center;gap:10px;padding:12px 16px;display:flex}.send-btn{background:var(--accent);color:#fff;border:0;border-radius:18px;padding:9px 24px;font-weight:600}.send-btn:disabled{opacity:.5}.composer-error{color:var(--danger);padding:0 16px 8px;font-size:13px}.chip{background:var(--surface-alt);border-radius:12px;align-items:center;gap:6px;margin:2px 4px 2px 0;padding:3px 8px;font-size:12px;display:inline-flex}.banner{color:#653b00;background:#fef7e0;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 16px;font-size:13px;display:flex}@media (prefers-color-scheme:dark){.banner{color:#fdd663;background:#3d3121}}.banner button{background:#00000014;border:0;border-radius:14px;padding:5px 14px;font-weight:600}.signin-screen{place-items:center;height:100%;padding:24px;display:grid}.signin-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;max-width:420px;padding:40px}.signin-card h1{margin:16px 0 8px;font-size:24px;font-weight:500}.signin-card p{color:var(--ink-muted);margin:0 0 24px}.google-btn{border:1px solid var(--line);color:var(--ink);background:var(--surface);border-radius:24px;align-items:center;gap:12px;padding:11px 24px;font-weight:600;text-decoration:none;display:inline-flex}.google-btn:hover{background:var(--surface-alt)}.modal-backdrop{z-index:50;background:#00000073;place-items:center;display:grid;position:fixed;inset:0}.modal{background:var(--surface);border-radius:var(--radius);width:460px;max-width:calc(100vw - 32px);box-shadow:var(--shadow);padding:24px}.modal h2{margin:0 0 4px;font-size:18px;font-weight:500}.modal .hint{color:var(--ink-muted);margin:0 0 16px;font-size:13px}.modal input{border:1px solid var(--line);width:100%;color:var(--ink);font:inherit;background:0 0;border-radius:8px;padding:10px 12px}.tester-row{border-bottom:1px solid var(--line);align-items:center;gap:8px;padding:8px 0;font-size:13px;display:flex}.tester-row .spacer{flex:1}.link-btn{color:var(--accent);background:0 0;border:0;border-radius:6px;padding:4px 8px;font-weight:600}.link-btn:hover{background:var(--surface-alt)}.danger{color:var(--danger)}.spinner{border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.shortcut-table{border-collapse:collapse;width:100%;font-size:13px}.shortcut-table td{border-bottom:1px solid var(--line);padding:6px 0}.shortcut-table kbd{background:var(--surface-alt);border:1px solid var(--line);border-radius:4px;padding:2px 7px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}@media (width<=860px){.sidebar{display:none}.thread-row .sender{width:120px}.composer{width:auto;left:0;right:0}}