:root{--bg:#f6f8fc;--panel:#fff;--border:#e0e3e7;--text:#1f1f1f;--muted:#5f6368;--accent:#1a73e8;--accent-hover:#1765cc;--sidebar:#f1f3f4;--unread:#202124}*{box-sizing:border-box}body,html{margin:0;height:100%;font-family:Segoe UI,system-ui,sans-serif;color:var(--text);background:var(--bg)}a{color:var(--accent)}.mail-app{display:grid;grid-template-columns:220px 340px 1fr;height:100vh;max-height:100vh}.mail-sidebar{background:var(--sidebar);border-right:1px solid var(--border);padding:16px 12px;display:flex;flex-direction:column;gap:8px}.mail-brand{font-weight:600;font-size:1.1rem;padding:8px 12px;color:var(--muted)}.mail-brand strong{color:var(--accent)}.mail-compose-btn{margin:8px 8px 16px;padding:12px 20px;border:none;border-radius:24px;background:#c2e7ff;color:#001d35;font-weight:600;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.1)}.mail-compose-btn:hover{background:#a8d9f7}.mail-nav button{width:100%;text-align:left;border:none;background:transparent;padding:10px 16px;border-radius:0 24px 24px 0;cursor:pointer;font-size:.95rem;color:var(--text)}.mail-nav button.active{background:#d3e3fd;font-weight:600}.mail-nav button:hover:not(.active){background:rgba(0,0,0,.04)}.mail-address{margin-top:auto;font-size:.8rem;color:var(--muted);padding:12px;word-break:break-all}.mail-list{background:var(--panel);border-right:1px solid var(--border);overflow-y:auto}.mail-search{padding:10px 12px;border-bottom:1px solid var(--border);position:-webkit-sticky;position:sticky;top:0;background:var(--panel);z-index:1}.mail-search input{padding:8px 12px;font-size:.9rem}.mail-html-frame,.mail-search input{width:100%;border:1px solid var(--border);border-radius:8px}.mail-html-frame{min-height:280px;background:#fff}.mail-attachments{list-style:none;margin:0;padding:8px 16px;border-bottom:1px solid var(--border)}.mail-attachments button{background:none;border:none;color:var(--accent);cursor:pointer;padding:4px 0;font-size:.9rem}.mail-attach-hint{font-size:.8rem;color:var(--muted);margin:4px 0 0}.mail-nav-imap{margin:8px 12px 0;width:calc(100% - 24px);padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:transparent;cursor:pointer;font-size:.85rem;color:var(--muted)}.mail-nav-imap:hover{background:#eef2f8;color:var(--text)}.imap-dl{display:grid;grid-template-columns:100px 1fr;grid-gap:8px 12px;gap:8px 12px;font-size:.9rem;margin:0 0 16px}.imap-dl dt{color:var(--muted)}.imap-dl dd{margin:0;word-break:break-all}.mail-list-item{padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer}.mail-list-item:hover{background:#f2f5fa}.mail-list-item.selected{background:#e8f0fe}.mail-list-item.unread .mail-list-subject{font-weight:700;color:var(--unread)}.mail-list-from{font-size:.85rem;color:var(--muted)}.mail-list-from,.mail-list-subject{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mail-list-subject{font-size:.95rem;margin:4px 0}.mail-list-snippet{font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mail-read{background:var(--panel);display:flex;flex-direction:column;min-width:0}.mail-read-header{padding:20px 24px;border-bottom:1px solid var(--border)}.mail-read-header h1{margin:0 0 8px;font-size:1.35rem;font-weight:400}.mail-read-meta{color:var(--muted);font-size:.9rem}.mail-read-body{padding:24px;overflow-y:auto;flex:1 1;line-height:1.5}.mail-read-body pre{white-space:pre-wrap;font-family:inherit}.mail-reply{border-top:1px solid var(--border);padding:16px 24px}.mail-reply textarea{width:100%;min-height:80px;border:1px solid var(--border);border-radius:8px;padding:12px;font-family:inherit}.mail-reply button{margin-top:8px;background:var(--accent);color:#fff;border:none;padding:10px 20px;border-radius:8px;cursor:pointer}.mail-empty{padding:48px;color:var(--muted);text-align:center}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e8f0fe,#f6f8fc)}.login-card{background:var(--panel);padding:40px;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.08);width:100%;max-width:400px}.login-card h1{margin:0 0 8px;font-size:1.5rem}.login-card p{color:var(--muted);margin:0 0 24px;font-size:.9rem}.login-card label{display:block;font-size:.85rem;margin-bottom:4px}.login-card input{width:100%;padding:10px 12px;margin-bottom:16px;border:1px solid var(--border);border-radius:8px}.login-card button[type=submit]{width:100%;padding:12px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer}.login-error{color:#c5221f;font-size:.85rem;margin-bottom:12px}.compose-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:100}.compose-dialog{background:var(--panel);width:min(560px,94vw);border-radius:12px;padding:20px;box-shadow:0 8px 32px rgba(0,0,0,.2)}.compose-dialog input,.compose-dialog textarea{width:100%;margin-bottom:12px;padding:10px;border:1px solid var(--border);border-radius:8px;font-family:inherit}.compose-actions{display:flex;gap:8px;justify-content:flex-end}@media (max-width:900px){.mail-app{grid-template-columns:1fr;grid-template-rows:auto 1fr}.mail-sidebar{flex-direction:row;flex-wrap:wrap}.mail-list{display:none}}