:root{--primary: #0b57d0;--on-primary: #ffffff;--primary-container: #d3e3fd;--on-primary-container: #041e49;--secondary-container: #e9eef6;--on-secondary-container: #1f1f1f;--surface: #fdfcff;--surface-container-lowest: #ffffff;--surface-container-low: #f8f9fd;--surface-container: #f0f4f9;--surface-container-high: #e9eef6;--surface-container-highest: #e3e8ef;--on-surface: #1f1f1f;--on-surface-variant: #444746;--on-surface-faint: #5f6368;--outline: #747775;--outline-variant: #dadce0;--error: #b3261e;--on-error: #ffffff;--error-container: #fce8e6;--on-error-container: #410e0b;--success-container: #e6f4ea;--on-success-container: #0d652d;--warning-container: #fef7e0;--on-warning-container: #5f4300;--star: #f9ab00;--inverse-surface: #303030;--inverse-on-surface: #f2f2f2;--state-hover: rgb(31 31 31 / 8%);--state-focus: rgb(31 31 31 / 12%);--state-press: rgb(31 31 31 / 16%);--scrim: rgb(0 0 0 / 32%);--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 24px;--sp-6: 32px;--sp-7: 48px;--shape-xs: 4px;--shape-sm: 8px;--shape-md: 12px;--shape-lg: 16px;--shape-xl: 28px;--shape-full: 999px;--font: "Google Sans", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;--type-label-sm: 400 11px/16px var(--font);--type-label-md: 500 12px/16px var(--font);--type-label-lg: 500 14px/20px var(--font);--type-body-sm: 400 12px/16px var(--font);--type-body-md: 400 14px/20px var(--font);--type-body-lg: 400 16px/24px var(--font);--type-title-sm: 500 14px/20px var(--font);--type-title-md: 500 16px/24px var(--font);--type-title-lg: 400 22px/28px var(--font);--ease-standard: cubic-bezier(.2, 0, 0, 1);--ease-emphasized: cubic-bezier(.05, .7, .1, 1);--dur-short: .1s;--dur-medium: .2s;--dur-long: .35s;--row-pad-y: 10px;color-scheme:light}:root[data-density=comfortable]{--row-pad-y: 14px}:root[data-density=compact]{--row-pad-y: 6px}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--primary: #a8c7fa;--on-primary: #062e6f;--primary-container: #0842a0;--on-primary-container: #d3e3fd;--secondary-container: #282a2c;--on-secondary-container: #e3e3e3;--surface: #131314;--surface-container-lowest: #0e0e0e;--surface-container-low: #1b1b1b;--surface-container: #1e1f20;--surface-container-high: #282a2c;--surface-container-highest: #333537;--on-surface: #e3e3e3;--on-surface-variant: #c4c7c5;--on-surface-faint: #9aa0a6;--outline: #8e918f;--outline-variant: #444746;--error: #f2b8b5;--on-error: #601410;--error-container: #3b1a17;--on-error-container: #f9dedc;--success-container: #1e3a25;--on-success-container: #a6dbb1;--warning-container: #3a2f00;--on-warning-container: #f7df8b;--star: #fdd663;--inverse-surface: #e3e3e3;--inverse-on-surface: #303030;--state-hover: rgb(227 227 227 / 8%);--state-focus: rgb(227 227 227 / 12%);--state-press: rgb(227 227 227 / 16%);--scrim: rgb(0 0 0 / 60%);color-scheme:dark}}:root[data-theme=dark]{--primary: #a8c7fa;--on-primary: #062e6f;--primary-container: #0842a0;--on-primary-container: #d3e3fd;--secondary-container: #282a2c;--on-secondary-container: #e3e3e3;--surface: #131314;--surface-container-lowest: #0e0e0e;--surface-container-low: #1b1b1b;--surface-container: #1e1f20;--surface-container-high: #282a2c;--surface-container-highest: #333537;--on-surface: #e3e3e3;--on-surface-variant: #c4c7c5;--on-surface-faint: #9aa0a6;--outline: #8e918f;--outline-variant: #444746;--error: #f2b8b5;--on-error: #601410;--error-container: #3b1a17;--on-error-container: #f9dedc;--success-container: #1e3a25;--on-success-container: #a6dbb1;--warning-container: #3a2f00;--on-warning-container: #f7df8b;--star: #fdd663;--inverse-surface: #e3e3e3;--inverse-on-surface: #303030;--state-hover: rgb(227 227 227 / 8%);--state-focus: rgb(227 227 227 / 12%);--state-press: rgb(227 227 227 / 16%);--scrim: rgb(0 0 0 / 60%);color-scheme:dark}@media(prefers-reduced-motion:reduce){:root{--dur-short: 0ms;--dur-medium: 0ms;--dur-long: 0ms}}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font:var(--type-body-md);color:var(--on-surface);background:var(--surface-container);-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer;border:none;background:none}:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--shape-xs)}.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--shape-full);color:var(--on-surface-variant);transition:background var(--dur-short) var(--ease-standard);flex-shrink:0}.icon-btn:hover{background:var(--state-hover)}.icon-btn:active{background:var(--state-press)}.icon-btn[aria-pressed=true],.icon-btn.active{color:var(--primary)}.icon-btn:disabled{opacity:.38;cursor:default;background:none}.icon-btn.star.on{color:var(--star)}.app{display:flex;flex-direction:column;height:100%;background:var(--surface-container)}.topbar{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);background:var(--surface-container)}.brand{display:flex;align-items:center;gap:var(--sp-2);font:var(--type-title-md);color:var(--on-surface-variant);white-space:nowrap;-webkit-user-select:none;user-select:none}.search{flex:1;max-width:720px;display:flex;align-items:center;gap:var(--sp-2);height:48px;padding:0 var(--sp-4);border-radius:var(--shape-lg);background:var(--surface-container-high);color:var(--on-surface-variant);transition:background var(--dur-short) var(--ease-standard),box-shadow var(--dur-short) var(--ease-standard)}.search:focus-within{background:var(--surface-container-lowest);box-shadow:0 1px 3px #0000001f}.search input{flex:1;border:none;background:none;outline:none;color:var(--on-surface)}.search input::placeholder{color:var(--on-surface-faint)}.topbar-end{display:flex;align-items:center;gap:var(--sp-1);margin-left:auto}.live-dot{width:8px;height:8px;border-radius:var(--shape-full);background:var(--star);flex-shrink:0;transition:background var(--dur-medium) var(--ease-standard)}.live-dot.on{background:var(--on-success-container)}.who{font:var(--type-label-lg);color:var(--on-surface-variant);padding-left:var(--sp-2);white-space:nowrap}.banner{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-4);margin:0 var(--sp-4) var(--sp-2);border-radius:var(--shape-md);font:var(--type-body-md)}.banner.error{background:var(--error-container);color:var(--on-error-container)}.banner.warning{background:var(--warning-container);color:var(--on-warning-container)}.banner.notice{background:var(--surface-container-high);color:var(--on-surface)}.banner .grow{flex:1}.banner button{font:var(--type-label-lg);color:inherit;text-decoration:underline;padding:var(--sp-1) var(--sp-2);border-radius:var(--shape-sm)}.banner button:hover{background:var(--state-hover)}.panes{display:grid;grid-template-columns:var(--rail-w, 256px) minmax(320px,1fr) minmax(0,1.4fr);gap:var(--sp-2);flex:1 1 auto;min-height:0;padding:0 var(--sp-4) var(--sp-4)}.topbar,.banner{flex:0 0 auto}.panes[data-rail=collapsed]{--rail-w: 72px}.panes[data-reader=hidden]{grid-template-columns:var(--rail-w, 256px) 1fr}.rail{display:flex;flex-direction:column;gap:var(--sp-1);min-height:0;overflow-y:auto;padding-right:var(--sp-1)}.compose{display:flex;align-items:center;gap:var(--sp-3);align-self:flex-start;height:56px;padding:0 var(--sp-5);margin-bottom:var(--sp-2);border-radius:var(--shape-lg);background:var(--primary-container);color:var(--on-primary-container);font:var(--type-label-lg);box-shadow:0 1px 3px #0000001f;transition:box-shadow var(--dur-short) var(--ease-standard),background var(--dur-short) var(--ease-standard);white-space:nowrap}.compose:hover{box-shadow:0 2px 6px #0000002e}.panes[data-rail=collapsed] .compose{padding:0;width:56px;justify-content:center}.panes[data-rail=collapsed] .compose span{display:none}.folder{display:flex;align-items:center;gap:var(--sp-4);height:40px;padding:0 var(--sp-4);border-radius:0 var(--shape-full) var(--shape-full) 0;color:var(--on-surface-variant);font:var(--type-label-lg);text-align:left;width:100%;transition:background var(--dur-short) var(--ease-standard)}.folder:hover{background:var(--state-hover)}.folder.active{background:var(--primary-container);color:var(--on-primary-container);font-weight:700}.folder .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.folder .count{font:var(--type-label-md)}.panes[data-rail=collapsed] .folder{justify-content:center;padding:0;border-radius:var(--shape-full)}.panes[data-rail=collapsed] .folder .name,.panes[data-rail=collapsed] .folder .count{display:none}.list-pane,.reader{display:flex;flex-direction:column;min-height:0;background:var(--surface-container-lowest);border-radius:var(--shape-lg);overflow:hidden}.list-toolbar{display:flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-2);border-bottom:1px solid var(--outline-variant);min-height:48px}.list-toolbar .spacer{flex:1}.list-toolbar .range{font:var(--type-label-md);color:var(--on-surface-faint);padding-right:var(--sp-2)}.list{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}.row{display:grid;grid-template-columns:auto auto auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-3);padding:var(--row-pad-y) var(--sp-3);border-bottom:1px solid var(--outline-variant);cursor:pointer;position:relative;transition:background var(--dur-short) var(--ease-standard)}.row:hover{background:var(--state-hover)}.row.selected{background:var(--primary-container)}.row.checked{background:var(--secondary-container)}.row .sender,.row .subject{color:var(--on-surface-variant)}.row.unread .sender,.row.unread .subject{color:var(--on-surface);font-weight:700}.row.selected,.row.selected .sender,.row.selected .subject,.row.selected .snippet,.row.selected .when,.row.selected .thread-count,.row.selected .icon-btn{color:var(--on-primary-container)}.row.checked,.row.checked .sender,.row.checked .subject,.row.checked .snippet,.row.checked .when,.row.checked .thread-count,.row.checked .icon-btn{color:var(--on-secondary-container)}.row.selected .icon-btn.star.on,.row.checked .icon-btn.star.on{color:var(--star)}.row .main{min-width:0;display:flex;align-items:baseline;gap:var(--sp-2)}.row .sender{flex:0 0 168px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row .subject{flex:0 1 auto;max-width:45%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row .snippet{flex:1 1 0;min-width:0;color:var(--on-surface-faint);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:1280px){.row .sender{flex-basis:140px}.row .trailing{min-width:104px}}.row .thread-count{font:var(--type-label-md);color:var(--on-surface-faint)}.row .when{font:var(--type-label-md);color:var(--on-surface-faint);white-space:nowrap}.row.unread .when{color:var(--on-surface);font-weight:700}.row .hover-actions{display:none;gap:0}.row:hover .hover-actions{display:flex}.row:hover .when{display:none}@media(hover:none){.row .hover-actions{display:none!important}.row .when{display:block!important}}.avatar{border-radius:var(--shape-full);display:grid;place-items:center;color:#fff;font-weight:500;flex-shrink:0;-webkit-user-select:none;user-select:none}.row .trailing{display:flex;align-items:center;gap:var(--sp-1);justify-content:flex-end;min-width:132px;color:var(--on-surface-faint)}.checkbox-hit{width:32px;height:32px}.checkbox{width:20px;height:20px;border-radius:var(--shape-xs);border:2px solid var(--outline);display:grid;place-items:center;color:transparent;flex-shrink:0;transition:background var(--dur-short),border-color var(--dur-short)}.checkbox.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}.empty,.placeholder{padding:var(--sp-7) var(--sp-4);text-align:center;color:var(--on-surface-faint)}.loading-more{padding:var(--sp-4);text-align:center;color:var(--on-surface-faint);font:var(--type-label-md)}.reader-head{padding:var(--sp-5) var(--sp-5) var(--sp-3);border-bottom:1px solid var(--outline-variant)}.reader-head h2{margin:0 0 var(--sp-4);font:var(--type-title-lg);color:var(--on-surface)}.reader-from{display:flex;align-items:center;gap:var(--sp-3)}.reader-from .who-line{flex:1;min-width:0}.reader-from .name{font:var(--type-title-sm);color:var(--on-surface)}.reader-from .addr{font:var(--type-body-sm);color:var(--on-surface-faint)}.reader-actions{display:flex;align-items:center;gap:var(--sp-1)}.reply-bar{display:flex;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5)}.btn-tonal{display:inline-flex;align-items:center;gap:var(--sp-2);height:40px;padding:0 var(--sp-5);border-radius:var(--shape-full);background:var(--surface-container-high);color:var(--on-surface);font:var(--type-label-lg);transition:background var(--dur-short) var(--ease-standard)}.btn-tonal:hover{background:var(--surface-container-highest)}.btn-filled{background:var(--primary);color:var(--on-primary)}.btn-filled:hover{filter:brightness(1.08);background:var(--primary)}.attachments{display:flex;flex-wrap:wrap;gap:var(--sp-2);padding:var(--sp-3) var(--sp-5)}.chip{display:inline-flex;align-items:center;gap:var(--sp-2);height:36px;padding:0 var(--sp-3);border:1px solid var(--outline-variant);border-radius:var(--shape-sm);background:var(--surface-container-low);color:var(--on-surface-variant);font:var(--type-label-md)}.chip:hover{background:var(--surface-container-high)}.chip .size{color:var(--on-surface-faint)}.body-text{padding:var(--sp-5);margin:0;white-space:pre-wrap;word-break:break-word;font:var(--type-body-md)}.body-html{flex:1;display:flex;flex-direction:column;min-height:0}.body-frame{flex:1;width:100%;border:0;min-height:480px;background:#fff}.reader-scroll{overflow-y:auto;flex:1;display:flex;flex-direction:column;min-height:0}.thread-size{font:var(--type-label-md);color:var(--on-surface-faint);vertical-align:middle}.thread-collapsed{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--outline-variant);text-align:left;transition:background var(--dur-short) var(--ease-standard)}.thread-collapsed:hover{background:var(--state-hover)}.thread-collapsed .name{font:var(--type-title-sm);color:var(--on-surface);flex-shrink:0}.thread-collapsed .preview{flex:1;min-width:0;color:var(--on-surface-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.thread-collapsed .when{font:var(--type-label-md);color:var(--on-surface-faint);flex-shrink:0}.thread-message{border-bottom:1px solid var(--outline-variant)}.thread-message-head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5) var(--sp-2);cursor:pointer}.thread-message-head .who-line{flex:1;min-width:0}.thread-message-head .name{font:var(--type-title-sm);color:var(--on-surface)}.thread-message-head .addr{font:var(--type-body-sm);color:var(--on-surface-faint)}.thread-message .body-frame{min-height:260px}.snackbar{position:fixed;left:var(--sp-5);bottom:var(--sp-5);z-index:30;display:flex;align-items:center;gap:var(--sp-4);min-width:320px;max-width:min(560px,calc(100vw - 2 * var(--sp-5)));padding:var(--sp-3) var(--sp-4);border-radius:var(--shape-sm);background:var(--inverse-surface);color:var(--inverse-on-surface);box-shadow:0 4px 16px #00000047;font:var(--type-body-md);animation:snack-in var(--dur-medium) var(--ease-emphasized)}.snackbar .grow{flex:1}.snack-action{color:var(--primary);font:var(--type-label-lg);padding:var(--sp-1) var(--sp-2);border-radius:var(--shape-sm);flex-shrink:0}.snack-action:hover{background:#ffffff1a}@keyframes snack-in{0%{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-width:860px){.snackbar{left:var(--sp-3);right:var(--sp-3);bottom:var(--sp-3);min-width:0}}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:var(--sp-4);z-index:10}.modal{width:min(760px,100%);max-height:92vh;display:flex;flex-direction:column;background:var(--surface-container-high);border-radius:var(--shape-lg);overflow:hidden;box-shadow:0 8px 24px #0000003d}.modal-head{display:flex;align-items:center;padding:var(--sp-3) var(--sp-4);font:var(--type-title-sm);background:var(--surface-container-highest)}.modal-head .grow{flex:1}.modal-body{padding:var(--sp-2) var(--sp-4);overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp-1)}.field{display:flex;align-items:center;gap:var(--sp-3);border-bottom:1px solid var(--outline-variant)}.field label{font:var(--type-body-sm);color:var(--on-surface-faint);width:56px;flex-shrink:0}.field input{flex:1;border:none;background:none;outline:none;padding:var(--sp-3) 0;color:var(--on-surface)}.modal-foot{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4)}.modal-foot .grow{flex:1}.editor-toolbar{display:flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) 0;border-bottom:1px solid var(--outline-variant)}.editor-toolbar .icon-btn{width:32px;height:32px;font:var(--type-label-lg)}.editor{min-height:220px;max-height:44vh;overflow-y:auto;padding:var(--sp-3) 0;outline:none;font:var(--type-body-md);color:var(--on-surface)}.editor:empty:before{content:"Write your message…";color:var(--on-surface-faint)}.editor.dragging{outline:2px dashed var(--primary);outline-offset:4px;border-radius:var(--shape-sm)}.editor a{color:var(--primary)}.back-only{display:none}@media(max-width:860px){.back-only{display:inline-grid}}.rail-scrim{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:19;background:var(--scrim)}.login-wrap{display:grid;place-items:center;height:100%;padding:var(--sp-4)}.login{width:min(400px,100%);display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-6);background:var(--surface-container-lowest);border-radius:var(--shape-xl);box-shadow:0 1px 3px #0000001f}.login h1{margin:0;font:var(--type-title-lg)}.login .sub{font:var(--type-body-md);color:var(--on-surface-faint);margin-top:calc(-1 * var(--sp-2))}.login input{height:56px;padding:0 var(--sp-4);border:1px solid var(--outline);border-radius:var(--shape-xs);background:transparent;color:var(--on-surface)}.login input:focus{border-color:var(--primary);outline:1px solid var(--primary)}.login button[type=submit]{height:48px;border-radius:var(--shape-full);background:var(--primary);color:var(--on-primary);font:var(--type-label-lg)}.login button[type=submit]:disabled{opacity:.5}@media(max-width:1100px){.panes[data-reader]{grid-template-columns:72px minmax(280px,1fr) minmax(0,1.2fr)}.panes[data-reader=hidden]{grid-template-columns:72px minmax(0,1fr)}.panes .compose{padding:0;width:56px;justify-content:center}.panes .compose span,.panes .folder .name,.panes .folder .count{display:none}.panes .folder{justify-content:center;padding:0;border-radius:var(--shape-full)}}@media(max-width:860px){.panes[data-reader]{grid-template-columns:minmax(0,1fr)}.panes .rail{display:none}.panes[data-rail=open] .rail{display:flex;position:fixed;inset:0 auto 0 0;z-index:20;width:280px;padding:var(--sp-4);background:var(--surface-container-low);box-shadow:0 0 24px #00000047}.panes[data-rail=open] .rail .compose{padding:0 var(--sp-5);width:auto;justify-content:flex-start}.panes[data-rail=open] .rail .compose span,.panes[data-rail=open] .rail .folder .name,.panes[data-rail=open] .rail .folder .count{display:initial}.panes[data-rail=open] .rail .folder{justify-content:flex-start;padding:0 var(--sp-4);border-radius:0 var(--shape-full) var(--shape-full) 0}.rail-scrim{display:block}.panes[data-reader=visible] .list-pane,.panes[data-reader=hidden] .reader{display:none}.row{gap:var(--sp-2)}.row .sender{flex-basis:110px}.row .snippet{display:none}.row .trailing{min-width:0}.topbar .brand{display:none}}.empty-title{font:var(--type-title-sm);color:var(--on-surface-variant)}.empty-hint{font:var(--type-body-sm);color:var(--on-surface-faint);margin-top:var(--sp-2)}.rail-section{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--sp-4) var(--sp-1);font:var(--type-label-md);color:var(--on-surface-faint);text-transform:none}.rail-empty{padding:0 var(--sp-4);font:var(--type-body-sm);color:var(--on-surface-faint)}.panes[data-rail=collapsed] .rail-section,.panes[data-rail=collapsed] .rail-empty{display:none}