@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";
*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#0a0a0f;--bg-secondary:#12121a;--bg-tertiary:#1a1a28;--bg-hover:#22223a;--bg-active:#2a2a45;--surface:#16162a;--surface-hover:#1e1e35;--surface-border:#ffffff0f;--surface-border-active:#7864ff4d;--text-primary:#e8e6f0;--text-secondary:#9896a8;--text-tertiary:#6b6980;--text-inverse:#0a0a0f;--accent:#7c6aff;--accent-hover:#9182ff;--accent-soft:#7c6aff1f;--accent-glow:#7c6aff40;--success:#3dd68c;--warning:#ffb340;--danger:#ff5c72;--info:#5cc8ff;--unread-dot:#7c6aff;--unread-bg:#7c6aff0d;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", "Fira Code", monospace;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--shadow-sm:0 1px 3px #0000004d;--shadow-md:0 4px 12px #0006;--shadow-lg:0 8px 32px #00000080;--shadow-glow:0 0 24px #7c6aff26;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-normal:.25s cubic-bezier(.4, 0, .2, 1);--transition-slow:.4s cubic-bezier(.4, 0, .2, 1);--sidebar-width:320px;--header-height:56px}html{scroll-behavior:smooth;font-size:14px}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;line-height:1.5}a{color:inherit;text-decoration:none}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}input,textarea{color:inherit;background:0 0;border:none;outline:none;font-family:inherit}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--text-tertiary);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.app-layout{height:100vh;display:flex;overflow:hidden}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);background:var(--bg-secondary);border-right:1px solid var(--surface-border);flex-direction:column;height:100vh;display:flex}.sidebar-header{padding:var(--space-lg);border-bottom:1px solid var(--surface-border);align-items:center;gap:var(--space-md);display:flex}.sidebar-logo{background:linear-gradient(135deg, var(--accent), #a78bfa);border-radius:var(--radius-md);flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:1.2rem;display:flex}.sidebar-title{letter-spacing:-.02em;font-size:1.15rem;font-weight:700}.sidebar-subtitle{color:var(--text-tertiary);margin-top:2px;font-size:.78rem}.sidebar-stats{padding:var(--space-md) var(--space-lg);gap:var(--space-sm);display:flex}.stat-badge{padding:var(--space-xs) var(--space-md);background:var(--surface);border-radius:var(--radius-full);color:var(--text-secondary);align-items:center;gap:var(--space-xs);font-size:.78rem;display:flex}.stat-badge .count{color:var(--text-primary);font-weight:600}.stat-badge.unread .count{color:var(--accent)}.mail-list{padding:var(--space-sm);flex:1;overflow-y:auto}.mail-item{align-items:flex-start;gap:var(--space-md);padding:var(--space-md);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast);display:flex;position:relative}.mail-item:hover{background:var(--bg-hover)}.mail-item.active{background:var(--bg-active);border:1px solid var(--surface-border-active)}.mail-item.unread{background:var(--unread-bg)}.mail-item.unread .mail-sender,.mail-item.unread .mail-subject{color:var(--text-primary);font-weight:600}.unread-indicator{background:var(--unread-dot);width:8px;height:8px;box-shadow:0 0 8px var(--accent-glow);border-radius:50%;flex-shrink:0;margin-top:6px}.mail-item-content{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.mail-sender,.mail-subject{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:.92rem;overflow:hidden}.mail-time{color:var(--text-tertiary);white-space:nowrap;flex-shrink:0;margin-top:2px;font-size:.75rem}.main-content{flex-direction:column;flex:1;height:100vh;display:flex;overflow:hidden}.mail-detail-header{padding:var(--space-lg) var(--space-xl);border-bottom:1px solid var(--surface-border);gap:var(--space-md);flex-direction:column;display:flex}.mail-detail-subject{letter-spacing:-.02em;font-size:1.4rem;font-weight:700;line-height:1.3}.mail-detail-meta{align-items:center;gap:var(--space-lg);color:var(--text-secondary);font-size:.85rem;display:flex}.mail-detail-meta .label{color:var(--text-tertiary);margin-right:var(--space-xs)}.mail-detail-actions{gap:var(--space-sm);margin-left:auto;display:flex}.mail-detail-body{padding:var(--space-xl);flex:1;overflow-y:auto}.mail-body-text{white-space:pre-wrap;word-wrap:break-word;color:var(--text-primary);font-size:.95rem;line-height:1.7}.mail-body-html{line-height:1.6}.mail-body-html iframe{border-radius:var(--radius-md);background:#fff;border:none;width:100%;min-height:400px}.tabs{border-bottom:1px solid var(--surface-border);margin-bottom:var(--space-md);gap:0;display:flex}.tab{padding:var(--space-sm) var(--space-md);color:var(--text-secondary);transition:all var(--transition-fast);border-bottom:2px solid #0000;font-size:.85rem}.tab:hover{color:var(--text-primary)}.tab.active{color:var(--accent);border-bottom-color:var(--accent)}.btn{justify-content:center;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);transition:all var(--transition-fast);white-space:nowrap;font-size:.85rem;font-weight:500;display:inline-flex}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover);box-shadow:var(--shadow-glow)}.btn-ghost{color:var(--text-secondary)}.btn-ghost:hover{background:var(--bg-hover);color:var(--text-primary)}.btn-danger{color:var(--danger)}.btn-danger:hover{background:#ff5c721a}.btn-icon{border-radius:var(--radius-sm);justify-content:center;align-items:center;width:36px;height:36px;padding:0;font-size:1.1rem;display:flex}.empty-state{justify-content:center;align-items:center;gap:var(--space-md);height:100%;color:var(--text-tertiary);flex-direction:column;display:flex}.empty-state-icon{opacity:.4;font-size:3.5rem}.empty-state-text{font-size:1.1rem;font-weight:500}.empty-state-sub{font-size:.85rem}.login-page{background:var(--bg-primary);justify-content:center;align-items:center;min-height:100vh;display:flex;position:relative;overflow:hidden}.login-page:before{content:"";pointer-events:none;background:radial-gradient(circle at 30% 40%,#7c6aff0f 0%,#0000 60%),radial-gradient(circle at 70% 60%,#a78bfa0a 0%,#0000 50%);width:200%;height:200%;position:absolute;top:-50%;left:-50%}.login-card{background:var(--bg-secondary);border:1px solid var(--surface-border);border-radius:var(--radius-lg);width:400px;max-width:90vw;padding:var(--space-2xl);z-index:1;box-shadow:var(--shadow-lg);position:relative}.login-logo{background:linear-gradient(135deg, var(--accent), #a78bfa);border-radius:var(--radius-md);width:56px;height:56px;margin:0 auto var(--space-lg);box-shadow:var(--shadow-glow);justify-content:center;align-items:center;font-size:1.8rem;display:flex}.login-title{text-align:center;margin-bottom:var(--space-xs);font-size:1.5rem;font-weight:700}.login-desc{text-align:center;color:var(--text-tertiary);margin-bottom:var(--space-xl);font-size:.85rem}.login-form{gap:var(--space-md);flex-direction:column;display:flex}.input-group{gap:var(--space-xs);flex-direction:column;display:flex}.input-group label{color:var(--text-secondary);font-size:.8rem;font-weight:500}.input-field{width:100%;padding:var(--space-sm) var(--space-md);background:var(--surface);border:1px solid var(--surface-border);border-radius:var(--radius-sm);color:var(--text-primary);transition:border-color var(--transition-fast);font-size:.92rem}.input-field:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.login-btn{width:100%;padding:var(--space-sm) var(--space-md);background:linear-gradient(135deg, var(--accent), #9182ff);color:#fff;border-radius:var(--radius-sm);transition:all var(--transition-fast);margin-top:var(--space-sm);font-size:.95rem;font-weight:600}.login-btn:hover{box-shadow:var(--shadow-glow);transform:translateY(-1px)}.login-btn:active{transform:translateY(0)}.login-error{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);color:var(--danger);text-align:center;background:#ff5c721a;border:1px solid #ff5c7233;font-size:.85rem}.loading-spinner{padding:var(--space-2xl);color:var(--text-tertiary);justify-content:center;align-items:center;gap:var(--space-sm);display:flex}.spinner{border:2px solid var(--surface-border);border-top-color:var(--accent);border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.sidebar-actions{padding:var(--space-sm) var(--space-lg);gap:var(--space-sm);border-bottom:1px solid var(--surface-border);display:flex}@media (max-width:768px){.app-layout{flex-direction:column}.sidebar{width:100%;min-width:100%;max-height:50vh}:root{--sidebar-width:100%}}