:root{--primary:#6366f1;--primary-hover:#4f46e5;--primary-glow:#6366f133;--bg-dark:#f8fafc;--bg-card:#ffffffe6;--bg-hover:#0000000d;--text-main:#0f172a;--text-muted:#64748b;--border-color:#0000001a;--glass-bg:#fffc}*{box-sizing:border-box}body{background-color:var(--bg-dark);color:var(--text-main);-webkit-font-smoothing:antialiased;background-image:radial-gradient(circle at 10% 20%,#6366f126 0%,#0000 40%),radial-gradient(circle at 90% 80%,#8b5cf61a 0%,#0000 40%);background-attachment:fixed;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;overflow:hidden}a{color:var(--primary);text-decoration:none}button{font-family:inherit}.spinner{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.login-container{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:2rem;display:flex}.glass-panel{background:var(--bg-card);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-color);border-radius:24px;width:100%;max-width:480px;padding:3rem;transition:transform .3s,box-shadow .3s;box-shadow:0 25px 50px -12px #00000080}.glass-panel:hover{box-shadow:0 35px 60px -15px var(--primary-glow);transform:translateY(-5px)}.brand-title{background:linear-gradient(135deg,#a78bfa,#818cf8);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:.5rem;font-size:2.5rem;font-weight:700}.brand-subtitle{color:var(--text-muted);margin-bottom:2.5rem;font-size:1.1rem;line-height:1.6}.btn-primary{color:#fff;background:linear-gradient(135deg, var(--primary), var(--primary-hover));cursor:pointer;width:100%;box-shadow:0 4px 14px 0 var(--primary-glow);border:none;border-radius:12px;justify-content:center;align-items:center;gap:.75rem;padding:1rem 1.5rem;font-size:1.1rem;font-weight:600;transition:all .3s;display:flex}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6366f199}.app-layout{width:100%;height:100dvh;display:flex}.sidebar{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-right:1px solid var(--border-color);flex-direction:column;flex-shrink:0;width:280px;display:flex}.sidebar-header{border-bottom:1px solid var(--border-color);align-items:center;gap:.75rem;padding:1.5rem;display:flex}.nav-item{color:var(--text-muted);cursor:pointer;align-items:center;gap:1rem;padding:1rem 1.5rem;font-weight:500;transition:all .2s;display:flex}.nav-item:hover{background:var(--bg-hover);color:var(--text-main)}.nav-item.active{color:var(--primary);border-right:3px solid var(--primary);background:#6366f11a}.main-content{flex-direction:column;flex:1;display:flex;overflow:hidden}.top-bar{border-bottom:1px solid var(--border-color);background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);justify-content:space-between;align-items:center;height:72px;padding:0 2rem;display:flex}.search-bar{border:1px solid var(--border-color);background:#00000008;border-radius:12px;align-items:center;width:400px;padding:.5rem 1rem;transition:all .2s;display:flex}.search-bar:focus-within{border-color:var(--primary);background:#0000000d}.search-input{color:var(--text-main);background:0 0;border:none;outline:none;width:100%;margin-left:.75rem;font-size:1rem}.user-profile{align-items:center;gap:1rem;display:flex}.avatar{background:var(--primary);border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-weight:700;display:flex}.email-list{flex:1;padding:1rem 0;overflow-y:auto}.email-item{border-bottom:1px solid var(--border-color);cursor:pointer;grid-template-columns:auto 250px 1fr auto;align-items:center;gap:1rem;padding:1rem 2rem;transition:background .2s;display:grid}.email-item:hover{background:var(--bg-hover)}.email-item.unread .email-subject,.email-item.unread .email-sender{color:var(--text-main);font-weight:700}.email-sender{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;min-width:0;font-weight:500;overflow:hidden}.email-subject{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.email-snippet{color:#94a3b899;margin-left:.5rem;font-weight:400}.email-date{color:var(--text-muted);white-space:nowrap;font-size:.9rem}.email-detail{background:var(--bg-dark);flex:1;padding:2rem;overflow-y:auto}.detail-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:flex-start;margin-bottom:2rem;padding-bottom:1rem;display:flex}.detail-subject{margin:0 0 1rem;font-size:1.5rem;font-weight:600}.sender-info{align-items:center;gap:1rem;display:flex}.sender-name{font-size:1.1rem;font-weight:600}.sender-email{color:var(--text-muted);font-size:.9rem}.back-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;align-items:center;gap:.5rem;margin-bottom:1.5rem;padding:0;font-size:1rem;transition:color .2s;display:flex}.back-btn:hover{color:var(--primary)}.email-body{color:#000;border:1px solid var(--border-color);background:#fff;border-radius:12px;padding:2rem;line-height:1.6;overflow-x:auto}.email-body a{color:#2563eb;text-decoration:underline}.loading-state{height:100%;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;gap:1rem;display:flex}.compose-modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.compose-modal{background:var(--bg-dark);border:1px solid var(--border-color);border-radius:12px;flex-direction:column;width:90%;max-width:800px;display:flex;overflow:hidden;box-shadow:0 25px 50px -12px #00000080}.compose-modal.fullscreen{border:none;border-radius:0;width:100vw;max-width:none;height:100vh}.compose-header{border-bottom:1px solid var(--border-color);background:var(--glass-bg);justify-content:space-between;align-items:center;padding:1rem 1.5rem;display:flex}.compose-header h3{margin:0;font-size:1.1rem}.icon-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:.25rem;transition:all .2s;display:flex}.icon-btn:hover{background:var(--bg-hover);color:var(--text-main)}.compose-body{flex-direction:column;flex:1;gap:1rem;padding:1rem 1.5rem;display:flex}.compose-input{border:none;border-bottom:1px solid var(--border-color);color:var(--text-main);background:0 0;outline:none;padding:.5rem 0;font-family:inherit;font-size:1rem}.compose-input:focus{border-bottom-color:var(--primary)}.compose-textarea{color:var(--text-main);resize:none;background:0 0;border:none;outline:none;flex:1;min-height:400px;padding:.5rem 0;font-family:inherit;font-size:1rem}.inbox-tabs{border-bottom:1px solid var(--border-color);background:var(--glass-bg);flex-shrink:0;display:flex}.inbox-tab{cursor:pointer;color:var(--text-muted);border-bottom:3px solid #0000;flex:1;justify-content:center;align-items:center;gap:.5rem;padding:1rem;font-weight:600;transition:all .2s;display:flex}.inbox-tab:hover{background:var(--bg-hover);color:var(--text-main)}.inbox-tab.active{color:var(--primary);border-bottom-color:var(--primary);background:#6366f10d}.sender-avatar{color:#fff;background:#6366f133;flex-shrink:0;width:48px;height:48px;font-size:1.2rem}.mobile-menu-btn{display:none}.mobile-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000080;display:none;position:fixed;inset:0}@media (width<=768px){.mobile-menu-btn{margin-right:.5rem;display:flex}.sidebar{z-index:1001;transition:transform .3s;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%);box-shadow:4px 0 15px #0000001a}.sidebar.mobile-open{transform:translate(0)}.mobile-overlay{display:block}.email-item{grid-template-rows:auto auto;grid-template-columns:20px 1fr auto;gap:.25rem .75rem;padding:1rem 1.25rem}.email-item>div:first-child{grid-area:1/1/3;margin-top:2px}.email-sender{grid-area:1/2}.email-date{grid-area:1/3}.email-subject{grid-area:2/2/auto/4;font-size:.95rem}.email-snippet{display:none}.top-bar{padding:0 1rem}.search-bar{flex:1;width:auto;margin-right:.5rem}.email-detail{padding:1.5rem 1rem}.detail-header{flex-direction:column;gap:1rem}.email-date{align-self:flex-start}.email-body{padding:1.25rem}.pagination-bar{justify-content:center!important;padding:1rem!important}}