:root{--bg-color:#050505;--surface-color:#141416b3;--glass-bg:#ffffff08;--glass-border:#ffffff14;--glass-hover:#ffffff0f;--accent-primary:#3b82f6;--accent-secondary:#8b5cf6;--text-primary:#fff;--text-secondary:#a0a0a0;--sidebar-width:260px;--header-height:70px;--transition-smooth:all .3s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}body{background-color:var(--bg-color);color:var(--text-primary);width:100vw;height:100vh;overflow:hidden}#root{height:100%}.app-container{background:radial-gradient(circle at 100% 0,#3b82f60d,#0000 40%),radial-gradient(circle at 0 100%,#8b5cf60d,#0000 40%);height:100vh;display:flex}.sidebar{width:var(--sidebar-width);background:var(--surface-color);border-right:1px solid var(--glass-border);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:10;flex-direction:column;height:100%;padding:24px;display:flex}.logo{background:linear-gradient(to right, var(--accent-primary), var(--accent-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;align-items:center;gap:10px;margin-bottom:40px;font-size:1.5rem;font-weight:800;display:flex}.nav-item{color:var(--text-secondary);cursor:pointer;transition:var(--transition-smooth);border-radius:12px;align-items:center;gap:12px;margin-bottom:8px;padding:12px 16px;font-weight:500;display:flex}.nav-item:hover{background:var(--glass-bg);color:var(--text-primary);transform:translate(4px)}.nav-item.active{color:var(--accent-primary);background:#3b82f626;font-weight:600}.main-content{flex-direction:column;flex:1;display:flex;overflow:hidden}.header{border-bottom:1px solid var(--glass-border);justify-content:space-between;align-items:center;height:80px;padding:0 40px;display:flex}.search-bar{background:var(--glass-bg);border:1px solid var(--glass-border);color:#fff;border-radius:14px;width:400px;padding:12px 20px;transition:all .3s}.search-bar:focus{border-color:var(--accent-primary);outline:none;width:450px;box-shadow:0 0 0 4px #3b82f61a}.dashboard-grid{flex:1;grid-template-columns:380px 1fr;display:grid;overflow:hidden}.message-list{border-right:1px solid var(--glass-border);padding:24px 0;overflow-y:auto}.message-item{border-bottom:1px solid var(--glass-border);cursor:pointer;padding:20px 30px;transition:all .2s;position:relative}.message-item:hover{background:#ffffff05}.message-item.active{border-left:4px solid var(--accent-primary);background:#3b82f60d}.message-item.unread .subject{color:#fff;font-weight:700}.message-item.unread:after{content:"";background:var(--accent-primary);width:8px;height:8px;box-shadow:0 0 10px var(--accent-primary);border-radius:50%;position:absolute;top:50%;left:10px;transform:translateY(-50%)}.message-header{justify-content:space-between;margin-bottom:6px;display:flex}.sender{font-size:.9rem;font-weight:600}.timestamp{color:var(--text-secondary);font-size:.75rem}.subject{margin-bottom:4px;font-size:.95rem}.preview{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;overflow:hidden}.message-detail{background:#0f172a33;padding:40px;overflow-y:auto}.detail-header{border-bottom:1px solid var(--glass-border);margin-bottom:40px;padding-bottom:30px}.detail-subject{margin-bottom:24px;font-size:2rem;font-weight:800}.detail-meta{align-items:center;gap:16px;display:flex}.avatar{background:var(--accent-primary);border-radius:16px;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.2rem;font-weight:700;display:flex}.detail-body{color:#e0e0e0;font-size:1.1rem;line-height:1.8}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade{animation:.4s cubic-bezier(.4,0,.2,1) fadeIn}.auth-button{background:var(--accent-primary);color:#fff;cursor:pointer;border:none;border-radius:12px;padding:12px 24px;font-weight:600;transition:all .3s}.auth-button:hover{filter:brightness(1.2);box-shadow:0 10px 20px -10px var(--accent-primary);transform:translateY(-2px)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#fff3}