@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap";:root{--bg-primary:#0f172a;--bg-surface:#1e293b;--bg-hover:#334155;--border-color:#334155;--text-main:#f8fafc;--text-muted:#94a3b8;--accent:#3b82f6;--accent-hover:#2563eb;--accent-light:#3b82f626;--danger:#ef4444;--success:#10b981;--warning:#f59e0b;--star-color:#eab308}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-main);min-height:100vh;font-family:Plus Jakarta Sans,sans-serif;overflow:hidden}.app-container{flex-direction:column;height:100vh;display:flex}.top-header{background:var(--bg-surface);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;gap:20px;height:64px;padding:0 24px;display:flex}.brand-section{align-items:center;gap:12px;min-width:220px;display:flex}.brand-logo{color:#fff;background:linear-gradient(135deg,#3b82f6,#8b5cf6);border-radius:10px;justify-content:center;align-items:center;width:38px;height:38px;font-size:20px;font-weight:700;display:flex;box-shadow:0 4px 12px #3b82f64d}.brand-title{letter-spacing:-.5px;font-size:18px;font-weight:700}.search-bar-container{flex:1;max-width:720px;position:relative}.search-input{border:1px solid var(--border-color);color:#fff;background:#0f172a;border-radius:28px;outline:none;width:100%;padding:12px 18px 12px 46px;font-size:14px;transition:all .2s}.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}.search-icon{color:var(--text-muted);position:absolute;top:50%;left:16px;transform:translateY(-50%)}.header-actions{align-items:center;gap:16px;display:flex}.mailbox-selector{border:1px solid var(--border-color);color:#fff;cursor:pointer;background:#0f172a;border-radius:8px;outline:none;padding:8px 14px;font-size:13px}.main-layout{flex:1;display:flex;overflow:hidden}.sidebar{background:var(--bg-surface);border-right:1px solid var(--border-color);flex-direction:column;gap:20px;width:260px;padding:20px 14px;display:flex}.btn-compose{color:#fff;cursor:pointer;background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;border-radius:14px;justify-content:center;align-items:center;gap:10px;padding:14px 22px;font-size:15px;font-weight:600;transition:all .2s;display:flex;box-shadow:0 6px 16px #2563eb59}.btn-compose:hover{transform:translateY(-2px);box-shadow:0 8px 22px #2563eb80}.nav-menu{flex-direction:column;gap:4px;display:flex}.nav-item{color:var(--text-muted);cursor:pointer;border-radius:10px;justify-content:space-between;align-items:center;padding:10px 14px;font-size:14px;font-weight:500;text-decoration:none;transition:all .15s;display:flex}.nav-item:hover{background:var(--bg-hover);color:var(--text-main)}.nav-item.active{background:var(--accent-light);color:#60a5fa;font-weight:600}.nav-label{align-items:center;gap:12px;display:flex}.badge-unread{background:var(--accent);color:#fff;border-radius:12px;padding:2px 7px;font-size:11px;font-weight:700}.content-area{background:#0b1120;flex:1;display:flex;overflow:hidden}.mail-list-panel{border-right:1px solid var(--border-color);flex-direction:column;flex:1;display:flex;overflow:hidden}.mail-toolbar{border-bottom:1px solid var(--border-color);background:var(--bg-surface);justify-content:space-between;align-items:center;height:52px;padding:0 18px;display:flex}.mail-list{flex:1;overflow-y:auto}.mail-row{cursor:pointer;border-bottom:1px solid #33415580;align-items:center;gap:16px;padding:14px 18px;transition:background .15s;display:flex}.mail-row:hover{background:#1e293bb3}.mail-row.selected{border-left:3px solid var(--accent);background:#3b82f61a}.mail-row.unread{color:#fff;background:#0f172a99;font-weight:700}.mail-star{color:#64748b;cursor:pointer;transition:color .15s}.mail-star.starred{color:var(--star-color)}.mail-sender{white-space:nowrap;text-overflow:ellipsis;width:170px;font-size:14px;overflow:hidden}.mail-snippet-block{white-space:nowrap;text-overflow:ellipsis;flex:1;align-items:center;gap:8px;font-size:14px;display:flex;overflow:hidden}.mail-subject{color:var(--text-main)}.mail-snippet{color:var(--text-muted);font-weight:400}.mail-date{color:var(--text-muted);white-space:nowrap;font-size:12px}.mail-viewer-panel{background:var(--bg-surface);flex-direction:column;flex:1.2;padding:30px;display:flex;overflow-y:auto}.viewer-header{border-bottom:1px solid var(--border-color);margin-bottom:24px;padding-bottom:20px}.viewer-subject{margin-bottom:16px;font-size:22px;font-weight:700}.viewer-meta{justify-content:space-between;align-items:center;display:flex}.viewer-avatar{color:#fff;background:linear-gradient(135deg,#3b82f6,#ec4899);border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:17px;font-weight:700;display:flex}.viewer-body{color:#cbd5e1;font-size:15px;line-height:1.7}.compose-modal{border:1px solid var(--border-color);z-index:1000;background:#1e293b;border-radius:16px 16px 0 0;flex-direction:column;width:580px;display:flex;position:fixed;bottom:0;right:28px;box-shadow:0 -8px 30px #00000080}.compose-header{background:#0f172a;border-radius:15px 15px 0 0;justify-content:space-between;align-items:center;padding:14px 18px;font-weight:600;display:flex}.compose-inputs{border-bottom:1px solid var(--border-color);flex-direction:column;gap:10px;padding:12px 18px;display:flex}.compose-field{color:#fff;background:0 0;border:none;border-bottom:1px solid #33415580;outline:none;padding:6px 0;font-size:14px}.compose-textarea{color:#fff;resize:vertical;background:0 0;border:none;outline:none;min-height:220px;padding:16px 18px;font-family:inherit;font-size:14px}.compose-footer{background:#0f172a;justify-content:space-between;align-items:center;padding:14px 18px;display:flex}.auth-wrapper{z-index:3000;background:radial-gradient(circle at 20% 20%,#3b82f61f 0%,#0000 45%),radial-gradient(circle at 80% 80%,#8b5cf61f 0%,#0000 45%),#090d16;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0;overflow-y:auto}.auth-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#1e293be0;border:1px solid #ffffff1a;border-radius:20px;width:100%;max-width:460px;padding:32px;animation:.3s cubic-bezier(.16,1,.3,1) authFadeIn;box-shadow:0 25px 50px -12px #000000a6}@keyframes authFadeIn{0%{opacity:0;transform:translateY(12px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.auth-header{text-align:center;margin-bottom:24px}.auth-header .brand-logo{width:48px;height:48px;margin:0 auto 14px;font-size:24px}.auth-header h2{letter-spacing:-.5px;color:#fff;margin-bottom:6px;font-size:22px;font-weight:700}.auth-header p{color:var(--text-muted);font-size:13px}.auth-tabs{border:1px solid var(--border-color);background:#0f172a;border-radius:12px;margin-bottom:22px;padding:4px;display:flex}.auth-tab{text-align:center;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:9px;flex:1;padding:10px;font-size:13px;font-weight:600;transition:all .2s}.auth-tab.active{color:#fff;background:#1e293b;box-shadow:0 2px 8px #0000004d}.auth-form{flex-direction:column;gap:16px;display:flex}.form-group{flex-direction:column;gap:6px;display:flex}.form-group label{color:#cbd5e1;font-size:12px;font-weight:600}.form-input{border:1px solid var(--border-color);color:#fff;background:#0f172a;border-radius:10px;outline:none;width:100%;padding:11px 14px;font-size:14px;transition:all .2s}.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}.btn-auth-submit{color:#fff;cursor:pointer;background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;border-radius:10px;width:100%;margin-top:6px;padding:13px;font-size:14px;font-weight:700;transition:all .2s;box-shadow:0 4px 14px #2563eb66}.btn-auth-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 18px #2563eb8c}.btn-auth-submit:disabled{opacity:.65;cursor:not-allowed}.auth-alert-error{color:#fca5a5;background:#ef444426;border:1px solid #ef444466;border-radius:10px;margin-bottom:16px;padding:10px 14px;font-size:13px}.auth-alert-success{color:#6ee7b7;background:#10b98126;border:1px solid #10b98166;border-radius:10px;margin-bottom:16px;padding:10px 14px;font-size:13px}.demo-credentials-box{background:#0f172ab3;border:1px dashed #334155;border-radius:10px;margin-top:20px;padding:14px;font-size:12px}.demo-credentials-title{color:#94a3b8;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:600;display:flex}.btn-quick-fill{color:#60a5fa;cursor:pointer;background:#334155;border:none;border-radius:6px;padding:4px 10px;font-size:11px;font-weight:600;transition:all .15s}.btn-quick-fill:hover{color:#93c5fd;background:#475569}.user-profile-badge{border:1px solid var(--border-color);background:#0f172a;border-radius:20px;align-items:center;gap:10px;padding:5px 12px 5px 6px;display:flex}.user-profile-avatar{color:#fff;background:linear-gradient(135deg,#3b82f6,#8b5cf6);border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:12px;font-weight:700;display:flex}.user-profile-info{flex-direction:column;line-height:1.2;display:flex}.user-profile-name{color:#f8fafc;font-size:12px;font-weight:700}.user-profile-role{text-transform:uppercase;color:#38bdf8;letter-spacing:.5px;font-size:10px;font-weight:600}.btn-logout{color:#f87171;cursor:pointer;background:#ef44441f;border:1px solid #ef44444d;border-radius:8px;align-items:center;gap:6px;padding:7px 14px;font-size:12px;font-weight:600;transition:all .15s;display:flex}.btn-logout:hover{color:#fca5a5;background:#ef444440;border-color:#ef444480}