:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:#202b38;background:#f5f7fa}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}.boot{display:grid;place-items:center;height:100vh;color:#7c8791;font-size:13px}.app{display:grid;grid-template-columns:250px 380px 1fr;height:100vh}.sidebar{background:#fff;border-right:1px solid #e4e8ed;padding:20px 14px;display:flex;flex-direction:column}.brand{display:flex;gap:10px;align-items:center;padding:2px 8px 22px}.logo{width:34px;height:34px;border-radius:10px;background:#17202a;color:#fff;display:grid;place-items:center}.logo.big{width:46px;height:46px;border-radius:13px;margin:0 auto}.brand b{display:block;font-size:15px}.brand small,.account small{display:block;color:#87919b;font-size:10px}nav{display:flex;flex-direction:column;gap:3px}nav a{display:flex;gap:10px;align-items:center;padding:9px 11px;border-radius:9px;color:#5c6873;font-size:13px;cursor:pointer}nav a.active{background:#eaf1ff;color:#1c4fd6;font-weight:650}.pill{margin-left:auto;background:#dbe5f7;color:#1c4fd6;border-radius:20px;padding:1px 8px;font-size:10px;font-weight:700}nav a:not(.active) .pill{background:#eef0f3;color:#7c8791}.account{margin-top:auto;display:flex;align-items:center;gap:9px;padding:9px;border:1px solid #e6eaee;border-radius:11px}.avatar{width:32px;height:32px;border-radius:9px;background:#eaf1ff;color:#1c4fd6;display:grid;place-items:center;font-weight:700}.account-main{min-width:0;flex:1}.account b{font-size:11px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon{background:none;border:0;color:#7c8791;padding:6px}.list-col{background:#fff;border-right:1px solid #e4e8ed;display:flex;flex-direction:column;min-width:0}.list-search{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid #eef0f3;color:#8b959e}.list-search input{border:0;outline:none;font-size:13px;width:100%;background:transparent;color:#202b38}.list{overflow:auto}.list-empty{padding:40px 20px;text-align:center;color:#8b959e;font-size:12px}.mail-row{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #f1f3f5;padding:12px 16px}.mail-row:hover{background:#fafbfc}.mail-row.active{background:#eaf1ff}.mail-row-top{display:flex;justify-content:space-between;gap:10px}.mail-from{font-size:12.5px;font-weight:650;color:#202b38;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mail-date{font-size:10px;color:#8b959e;white-space:nowrap}.mail-subject{font-size:12px;color:#3c4652;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mail-meta{font-size:10px;color:#9aa4ad;margin-top:3px}.reader{display:flex;flex-direction:column;min-width:0;background:#fff}.reader-empty{align-items:center;justify-content:center;gap:8px;color:#9aa4ad;text-align:center}.reader-empty p{margin:6px 0 0;font-size:14px;color:#7c8791}.reader-empty small{font-size:11px}.reader-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 26px 12px}.reader-head h1{margin:0;font-size:20px;letter-spacing:-.3px}.reader-actions{display:flex;gap:8px;flex:0 0 auto}.primary,.secondary,.danger{border-radius:9px;border:1px solid transparent;font-size:12px;font-weight:650;padding:8px 12px;display:inline-flex;align-items:center;gap:6px}.primary{background:#1c4fd6;color:#fff}.secondary{background:#fff;border-color:#dfe4e9;color:#3e4a55}.danger{background:#fff3f1;border-color:#f1d2cf;color:#b13d33}.reader-meta{padding:0 26px 14px;border-bottom:1px solid #eef0f3}.reader-meta div{display:flex;gap:10px;font-size:12px;margin:3px 0}.reader-meta span{color:#8b959e;min-width:64px}.reader-meta b{color:#3c4652;font-weight:600}.reader-body{flex:1;border:0;width:100%;background:#fff}.login{display:grid;place-items:center;height:100vh}.login-card{background:#fff;border:1px solid #e3e8ed;border-radius:16px;padding:36px;width:360px;text-align:center;box-shadow:0 12px 40px #1e2a370f}.login-card h1{margin:14px 0 6px;font-size:22px}.login-card p{color:#7c8791;font-size:12px;margin:0 0 18px}.login-card input{width:100%;border:1px solid #dfe4e9;border-radius:9px;padding:11px;font-size:13px;margin-bottom:10px}.login-card .primary{width:100%;justify-content:center}.login-msg{display:block;margin-top:12px;color:#55626e;font-size:11px}.toast{position:fixed;bottom:18px;left:50%;transform:translate(-50%);background:#2d3842;color:#fff;padding:10px 16px;border-radius:9px;font-size:12px;box-shadow:0 8px 24px #0003}@media(max-width:1000px){.app{grid-template-columns:64px 300px 1fr}.brand small,.account-main,.brand b,nav a span:not(.pill){display:none}}.nav-item{display:flex;gap:10px;align-items:center;width:100%;padding:9px 11px;border-radius:9px;color:#5c6873;font-size:13px;background:none;border:0;text-align:left}.nav-item:hover:not(:disabled){background:#f5f7f9}.nav-item.active{background:#eaf1ff;color:#1c4fd6;font-weight:650}.nav-item:disabled{opacity:.45}.empty-trash{margin-left:auto;background:#fff3f1;border:1px solid #f1d2cf;color:#b13d33;border-radius:7px;padding:4px 9px;font-size:10px;font-weight:650}.google-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:1px solid #dadce0;background:#fff;color:#3c4043;border-radius:9px;padding:11px;font-size:13px;font-weight:600}.google-btn:hover:not(:disabled){background:#f8f9fa;box-shadow:0 1px 3px #3c404326}.login-note{display:block;margin-top:14px;color:#9aa4ad;font-size:10px}.attach-bar{padding:10px 26px;border-bottom:1px solid #eef0f3;display:flex;flex-direction:column;gap:8px}.attach-label{display:flex;align-items:center;gap:6px;font-size:11px;color:#7c8791}.attach-list{display:flex;flex-wrap:wrap;gap:8px}.attach-chip{display:flex;align-items:center;gap:7px;border:1px solid #dfe4e9;background:#fff;border-radius:9px;padding:7px 11px;font-size:11px;color:#2e3943;max-width:280px}.attach-chip:hover{background:#f5f9ff;border-color:#bcd3f7}.attach-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.attach-chip small{color:#9aa4ad;flex:0 0 auto}.attach-chip svg{color:#1c4fd6;flex:0 0 auto}
