:root{--brand-primary: #4f46e5;--brand-accent: #0ea5e9;--brand-primary-hover: #4338ca;--brand-primary-soft: #eef0fd;--brand-accent-soft: #e6f6fd;--bg: #f4f5f7;--surface: #ffffff;--border: #e3e6ea;--border-strong: #d2d7dd;--text: #1f2430;--text-muted: #6b7280;--text-faint: #9aa1ab;--danger: #c0182b;--success: #15803d;--radius: 10px;--radius-sm: 7px;--shadow-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);--shadow-2: 0 8px 28px rgba(16, 24, 40, .18);--topbar-h: 56px;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:var(--brand-primary)}.btn{font-family:inherit;font-size:14px;font-weight:600;line-height:1;border:1px solid transparent;border-radius:var(--radius-sm);padding:9px 14px;cursor:pointer;transition:background .12s,border-color .12s,color .12s,opacity .12s;white-space:nowrap}.btn:disabled{opacity:.55;cursor:default}.btn-sm{padding:6px 10px;font-size:13px}.btn-block{width:100%}.btn-primary{background:var(--brand-primary);color:#fff}.btn-primary:not(:disabled):hover{background:var(--brand-primary-hover)}.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border-strong)}.btn-secondary:not(:disabled):hover{border-color:var(--brand-primary);color:var(--brand-primary)}.btn-ghost{background:transparent;color:var(--text-muted)}.btn-ghost:not(:disabled):hover{background:#0000000d;color:var(--text)}.icon-btn{border:none;background:transparent;font-size:18px;line-height:1;padding:8px;border-radius:var(--radius-sm);cursor:pointer;color:var(--text-muted)}.icon-btn:hover{background:#0000000f;color:var(--text)}.boot{height:100%;display:grid;place-items:center}.spinner{width:30px;height:30px;border:3px solid var(--border);border-top-color:var(--brand-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.login-screen{min-height:100%;display:grid;place-items:center;padding:24px;background:radial-gradient(1200px 500px at 50% -10%,var(--brand-primary-soft),transparent),var(--bg)}.login-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-1);padding:32px 28px;display:flex;flex-direction:column}.login-brand{display:flex;justify-content:center;margin-bottom:8px}.login-title{text-align:center;font-size:22px;margin:6px 0 2px}.login-sub{text-align:center;color:var(--text-muted);margin:0 0 20px;font-size:14px}.login-error{background:#fdecee;color:var(--danger);border:1px solid #f5c2c7;border-radius:var(--radius-sm);padding:10px 12px;font-size:13px;margin-bottom:14px}.login-help{text-align:center;font-size:13px;color:var(--text-muted);margin:16px 0 0}.field-label{font-size:13px;font-weight:600;color:var(--text-muted);margin:12px 0 6px}.field-input{font-family:inherit;font-size:15px;padding:11px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);width:100%}.field-input:focus{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 3px var(--brand-primary-soft)}.login-card .btn-primary{margin-top:22px;padding:12px;font-size:15px}.app-shell{height:100%;display:flex;flex-direction:column}.topbar{height:var(--topbar-h);flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;background:var(--surface);border-bottom:1px solid var(--border);z-index:30}.topbar-left,.topbar-right{display:flex;align-items:center;gap:10px;min-width:0}.brand-logo{display:inline-flex;align-items:center;gap:8px;min-width:0}.brand-logo img{display:block}.brand-logo-text{font-weight:800;letter-spacing:.2px;color:var(--brand-primary);white-space:nowrap}.account-email{font-size:13px;color:var(--text-muted);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.compose-btn{display:inline-flex;align-items:center;gap:7px}.compose-btn-icon{font-size:15px}.mailbox{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:240px minmax(320px,1fr) minmax(420px,1.6fr);overflow:hidden}.sidebar{min-height:0;border-right:1px solid var(--border);background:var(--surface);overflow-y:auto}.list-col{min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--border);background:var(--surface)}.read-col{min-height:0;display:flex;flex-direction:column;background:var(--bg)}.folders{padding:10px 8px}.folders-head,.reader-attachments-head{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-faint);padding:6px 10px}.folders-empty{padding:8px 10px;color:var(--text-faint);font-size:13px}.folder-list{list-style:none;margin:0;padding:0}.folder-item{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border:none;background:transparent;border-radius:var(--radius-sm);font-size:14px;color:var(--text);cursor:pointer;text-align:left}.folder-item:hover{background:#0000000d}.folder-item.active{background:var(--brand-primary-soft);color:var(--brand-primary);font-weight:700}.folder-icon{font-size:15px;width:18px;text-align:center}.folder-name{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.folder-badge{background:var(--brand-primary);color:#fff;font-size:11px;font-weight:700;min-width:20px;height:20px;padding:0 6px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center}.folder-item.active .folder-badge{background:var(--brand-primary)}.searchbar{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);position:relative}.search-icon{font-size:13px;opacity:.6;position:absolute;left:22px;pointer-events:none}.search-input{flex:1 1 auto;font-family:inherit;font-size:14px;padding:9px 12px 9px 32px;border:1px solid var(--border-strong);border-radius:20px;background:var(--bg);color:var(--text)}.search-input:focus{outline:none;background:var(--surface);border-color:var(--brand-primary);box-shadow:0 0 0 3px var(--brand-primary-soft)}.search-clear{border:none;background:transparent;cursor:pointer;font-size:13px;color:var(--text-muted);padding:4px 6px}.msglist-pane{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}.msglist-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border)}.msglist-title{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.msglist-count{font-size:12px;color:var(--text-faint)}.msglist-scroll{flex:1 1 auto;overflow-y:auto;min-height:0}.msglist-empty{padding:40px 20px;text-align:center;color:var(--text-faint);font-size:14px}.msglist{list-style:none;margin:0;padding:0}.msg-row{width:100%;text-align:left;display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:none;border-bottom:1px solid var(--border);border-left:3px solid transparent;background:transparent;cursor:pointer}.msg-row:hover{background:var(--bg)}.msg-row.selected{background:var(--brand-primary-soft);border-left-color:var(--brand-primary)}.msg-row.unread{background:#fff}.msg-row.unread .msg-sender,.msg-row.unread .msg-subject{font-weight:700;color:var(--text)}.msg-avatar{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--brand-accent-soft);color:var(--brand-primary);font-size:13px;font-weight:700}.msg-row.unread .msg-avatar{background:var(--brand-primary);color:#fff}.msg-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}.msg-line1{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.msg-sender{font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.msg-date{flex:0 0 auto;font-size:12px;color:var(--text-faint)}.msg-line2{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.msg-subject{font-size:13.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}.msg-flags{flex:0 0 auto;display:inline-flex;gap:4px;font-size:12px}.flag-star{color:#e0a106}.msg-snippet{font-size:12.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.msglist-more{padding:12px 14px}.skeleton{background:linear-gradient(90deg,#eceef1 25%,#f5f6f8 37%,#eceef1 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:6px}.skeleton-row{cursor:default}.skeleton-line{height:11px;margin:4px 0;display:block}.skeleton.msg-avatar{background-color:#eceef1}.w60{width:60%}.w90{width:90%}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.reader-pane{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}.reader-empty{display:grid;place-items:center}.reader-placeholder{text-align:center;color:var(--text-faint)}.reader-placeholder-icon{font-size:40px;margin-bottom:8px}.reader-toolbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--surface)}.reader-actions{display:flex;gap:8px;flex-wrap:wrap}.reader-scroll{flex:1 1 auto;overflow-y:auto;min-height:0;padding:20px 24px 40px}.reader-loading{display:grid;place-items:center;padding:60px}.reader-error{color:var(--danger);padding:20px}.reader-subject{font-size:20px;margin:0 0 12px;line-height:1.3}.reader-meta{border-bottom:1px solid var(--border);padding-bottom:14px;margin-bottom:18px;font-size:13px;color:var(--text-muted);display:flex;flex-direction:column;gap:3px}.reader-from strong{color:var(--text);font-size:14px}.reader-from-addr,.reader-date{color:var(--text-faint)}.reader-body-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;overflow-x:auto}.reader-body{font-size:14.5px;line-height:1.55;color:var(--text);word-break:break-word}.reader-body img{max-width:100%;height:auto}.reader-body a{color:var(--brand-primary)}.reader-body table{max-width:100%}.reader-body-text{white-space:pre-wrap;font-family:var(--font);margin:0}.reader-attachments{margin-top:20px}.attachment-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}.attachment-item{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px}.attachment-name{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment-size{color:var(--text-faint);font-size:12px}.compose-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#10182873;display:flex;align-items:flex-end;justify-content:flex-end;padding:24px}.compose-panel{width:100%;max-width:620px;max-height:90vh;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-2);display:flex;flex-direction:column;animation:slideUp .18s ease}@keyframes slideUp{0%{transform:translateY(16px);opacity:.6}to{transform:none;opacity:1}}.compose-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--brand-primary);color:#fff;border-radius:var(--radius) var(--radius) 0 0}.compose-title{font-weight:700;font-size:15px}.compose-head .icon-btn{color:#fff}.compose-head .icon-btn:hover{background:#ffffff2e}.compose-fields{padding:8px 16px;overflow-y:auto;display:flex;flex-direction:column}.compose-row{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border)}.compose-label{flex:0 0 52px;font-size:13px;color:var(--text-muted);font-weight:600}.compose-input{flex:1 1 auto;border:none;outline:none;font-family:inherit;font-size:14px;padding:11px 4px;background:transparent;color:var(--text)}.compose-cc-toggle{flex:0 0 auto}.compose-body{margin-top:12px;min-height:200px;resize:vertical;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:inherit;font-size:14.5px;line-height:1.5;padding:12px;color:var(--text)}.compose-body:focus{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 3px var(--brand-primary-soft)}.compose-foot{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--border)}.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%);z-index:60;background:#1f2430;color:#fff;padding:12px 18px;border-radius:var(--radius);font-size:14px;box-shadow:var(--shadow-2);max-width:90vw;cursor:pointer;animation:slideUp .18s ease}.toast-success{background:var(--success)}.toast-error{background:var(--danger)}.menu-btn{font-size:20px}.drawer-scrim{position:fixed;inset:var(--topbar-h) 0 0 0;background:#10182866;z-index:24}@media (max-width: 820px){.mailbox{grid-template-columns:1fr}.sidebar{position:fixed;top:var(--topbar-h);left:0;bottom:0;width:256px;max-width:80vw;z-index:25;transform:translate(-100%);transition:transform .2s ease;box-shadow:var(--shadow-2)}.sidebar.open{transform:none}.list-col{grid-column:1}.read-col{grid-column:1;grid-row:1}.mailbox.show-list .read-col,.mailbox.show-read .list-col{display:none}.mailbox.show-list .list-col{display:flex}.account-email,.compose-btn-label{display:none}.compose-btn{padding:9px 11px}.compose-overlay{padding:0;align-items:stretch}.compose-panel{max-width:100%;max-height:100%;border-radius:0}.compose-head{border-radius:0}.reader-scroll{padding:16px 16px 40px}}@media (min-width: 821px){.reader-back{display:none}}