:root{--accent:#1a73e8;--bg:#f6f8fc;--line:#e0e3e7}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:#202124}
.topbar{display:flex;align-items:center;gap:1rem;padding:.6rem 1rem;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.brand{font-size:1.2rem;font-weight:700;color:#202124}.brand span{color:var(--accent)}
.search{flex:1;max-width:520px}
.search input{width:100%;border:1px solid var(--line);border-radius:8px;padding:.45rem .8rem;background:var(--bg)}
.top-actions{display:flex;align-items:center;gap:.75rem;margin-left:auto;font-size:.85rem}
.app-shell{display:flex;min-height:calc(100vh - 56px)}
.sidebar{width:220px;padding:1rem;background:#fff;border-right:1px solid var(--line)}
.sidebar nav a{display:block;padding:.5rem .75rem;color:#202124;text-decoration:none;border-radius:20px;margin-bottom:.15rem}
.sidebar nav a:hover{background:#e8f0fe}
.btn-compose{display:block;text-align:center;background:var(--accent);color:#fff;border-radius:24px;padding:.6rem;text-decoration:none;margin-bottom:1rem}
.btn-compose:hover{background:#1557b0;color:#fff}
.content{flex:1;padding:1.5rem}
.mail-list{list-style:none;padding:0}
.mail-item{border-bottom:1px solid var(--line);background:#fff}
.mail-item a{display:grid;grid-template-columns:180px 1fr 300px 130px;gap:1rem;align-items:center;padding:.65rem .9rem;text-decoration:none;color:#202124}
.mail-item.unread a{font-weight:600;background:#f2f6fc}
.mail-item .preview{color:#5f6368;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-item .date{color:#5f6368;font-size:.8rem;text-align:right}
.message .body{background:#fff;border:1px solid var(--line);border-radius:8px;padding:1rem;margin:1rem 0}
.login-body{background:linear-gradient(135deg,#e8f0fe,#f6f8fc);min-height:100vh;display:flex;align-items:center;justify-content:center}
.login-card{background:#fff;padding:2rem;border-radius:16px;width:360px;box-shadow:0 10px 40px rgba(0,0,0,.08)}
.login-card .logo{font-size:1.4rem;font-weight:700;margin-bottom:.25rem}.login-card .logo span{color:var(--accent)}
.empty{color:#5f6368;padding:1rem;text-align:center}
@media(max-width:768px){.mail-item a{grid-template-columns:1fr auto}.sidebar{width:64px}.sidebar nav a{font-size:0}.sidebar nav a i{font-size:1.2rem}}