*{box-sizing:border-box}body{color:#202124;background:#fff;margin:0;font-family:Arial,Helvetica,sans-serif}.app{background:#fff;min-height:100vh}.topbar{border-bottom:1px solid #eee;align-items:center;gap:20px;height:72px;padding:0 18px;display:flex}.brand{color:#5f6368;align-items:center;gap:10px;width:230px;font-size:22px;display:flex}.logo{color:#1a73e8;background:#e8f0fe;border-radius:50%;place-items:center;width:38px;height:38px;display:grid}.icon-btn{color:#5f6368;cursor:pointer;background:0 0;border:0;border-radius:50%;place-items:center;width:38px;height:38px;display:grid}.icon-btn:hover{background:#f1f3f4}.search{color:#5f6368;background:#f1f3f4;border-radius:12px;flex:1;align-items:center;gap:12px;max-width:720px;height:48px;padding:0 15px;display:flex}.search input{background:0 0;border:0;outline:0;flex:1;font-size:16px}.clear{cursor:pointer;background:0 0;border:0}.top-actions{align-items:center;gap:3px;margin-left:auto;display:flex}.avatar{color:#fff;cursor:pointer;background:#1a73e8;border:0;border-radius:50%;width:34px;height:34px;font-weight:700}.layout{min-height:calc(100vh - 72px);display:flex}.sidebar{border-right:1px solid #eee;width:250px;padding:18px 12px}.compose-btn{cursor:pointer;background:#c2e7ff;border:0;border-radius:16px;align-items:center;gap:10px;margin:0 0 16px 8px;padding:14px 20px;font-size:15px;font-weight:600;display:flex}.nav-item{cursor:pointer;text-align:left;background:0 0;border:0;border-radius:0 18px 18px 0;align-items:center;gap:16px;width:100%;padding:10px 18px;font-size:14px;display:flex}.nav-item svg{width:19px}.nav-item.active{background:#d3e3fd;font-weight:700}.nav-item b{margin-left:auto}.side-section{color:#5f6368;padding:24px 18px 10px;font-size:13px;font-weight:700}.label-row{padding:8px 18px;font-size:14px}.dot{border-radius:50%;width:9px;height:9px;margin-right:10px;display:inline-block}.blue{background:#4285f4}.green{background:#34a853}.content{flex:1;min-width:0}.toolbar{border-bottom:1px solid #eee;align-items:center;gap:4px;height:58px;padding:0 14px;display:flex}.spacer{flex:1}.range{color:#5f6368;font-size:12px}.check{cursor:pointer;place-items:center;width:38px;height:38px;display:inline-grid}.check input{display:none}.check span{border:1.5px solid #777;border-radius:2px;width:17px;height:17px}.message{cursor:pointer;border-bottom:1px solid #eee;align-items:center;gap:8px;min-height:54px;padding:0 12px;font-size:14px;display:flex}.message:hover{box-shadow:inset 0 0 0 1px #ddd}.message.unread{background:#f2f6fc}.message.unread .sender,.message.unread .subject{font-weight:700}.star{color:#777;cursor:pointer;background:0 0;border:0}.star.starred{color:#fbbc04;fill:#fbbc04}.sender{white-space:nowrap;text-overflow:ellipsis;width:180px;overflow:hidden}.subject{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.subject span{color:#777;font-weight:400}.time{text-align:right;width:90px;font-size:12px;font-weight:600}.empty{text-align:center;color:#777;margin-top:100px}.empty h3{color:#333}.message-view{max-width:1000px;padding:14px 34px}.message-toolbar{border-bottom:1px solid #eee;gap:4px;padding-bottom:10px;display:flex}.message-view h1{margin:26px 0;font-size:24px;font-weight:400}.message-header{align-items:center;gap:12px;display:flex}.avatar.small{place-items:center;width:40px;height:40px;display:grid}.muted{color:#777;font-size:12px}.message-body{white-space:pre-wrap;margin:32px 52px;line-height:1.7}.reply-box{color:#777;border:1px solid #ddd;border-radius:8px;padding:16px}.compose-window{z-index:5;background:#fff;border-radius:10px 10px 0 0;width:540px;position:fixed;bottom:0;right:28px;box-shadow:0 2px 20px #0003}.compose-title{background:#f2f6fc;justify-content:space-between;padding:12px 16px;display:flex}.compose-title button{cursor:pointer;background:0 0;border:0}.compose-window input,.compose-window textarea{width:100%;font:inherit;border:0;border-bottom:1px solid #eee;outline:0;padding:12px 16px;display:block}.compose-window textarea{resize:none;height:240px}.compose-tools{color:#555;gap:18px;padding:12px 16px;display:flex}.compose-footer{align-items:center;padding:10px 16px;display:flex}.send-btn{color:#fff;cursor:pointer;background:#0b57d0;border:0;border-radius:18px;padding:9px 22px;font-weight:600}.trash-btn{cursor:pointer;color:#777;background:0 0;border:0;margin-left:auto}.dark{color:#e8eaed;background:#202124}.dark .topbar,.dark .sidebar,.dark .toolbar,.dark .message{border-color:#3c4043}.dark .topbar,.dark .sidebar,.dark .toolbar,.dark .message-view,.dark .message{background:#202124}.dark .search{background:#303134}.dark .search input{color:#fff}.dark .compose-window{background:#292a2d}.dark .compose-window input,.dark .compose-window textarea,.dark .compose-title{color:#fff;background:#292a2d;border-color:#444}@media (width<=800px){.brand{width:auto}.brand span{display:none}.sidebar{width:200px}.sender{width:100px}.search{max-width:none}.top-actions .icon-btn:first-child,.top-actions .icon-btn:nth-child(2){display:none}}@media (width<=600px){.sidebar{z-index:4;background:#fff;height:calc(100vh - 72px);position:absolute}.sender{width:90px}.message{padding:0 4px}.subject span{display:none}.compose-window{width:calc(100vw - 20px);right:10px}.message-view{padding:10px}.message-body{margin:25px 10px}}.google-login{color:#fff;cursor:pointer;background:#1a73e8;border:0;border-radius:18px;align-items:center;gap:7px;padding:9px 14px;font-weight:600;display:flex}.google-login:disabled{opacity:.65;cursor:wait}.account-pill{color:inherit;cursor:pointer;background:0 0;border:0;border-radius:20px;align-items:center;gap:7px;max-width:250px;padding:4px 8px;display:flex}.account-pill:hover{background:#f1f3f4}.account-pill>span:nth-child(2){text-overflow:ellipsis;white-space:nowrap;max-width:150px;overflow:hidden}.status-box{color:#5f6368;background:#f1f3f4;border-radius:10px;margin:18px 8px 0;padding:10px 12px;font-size:12px;line-height:1.45}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.dark .account-pill:hover{background:#303134}.dark .status-box{color:#bdc1c6;background:#303134}.dark .google-login{color:#202124;background:#8ab4f8}@media (width<=800px){.account-pill>span:nth-child(2){display:none}.google-login{padding:9px 10px}.status-box{font-size:11px}}