:root{--primary:#7c3aed;--secondary:#06b6d4;--bg:#050816;--surface:#0f172a;--card:#ffffff0d;--border:#ffffff14;--text:#fff;--muted:#9ca3af;--shadow:0 20px 60px #00000059;--radius:20px;--transition:.28s cubic-bezier(.4,0,.2,1)}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-up{animation:.6s fadeUp}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.float{animation:6s ease-in-out infinite float}@keyframes pulseGlow{0%{box-shadow:0 0 #0000}50%{box-shadow:0 0 35px #7c3aed59}to{box-shadow:0 0 #0000}}.glow{animation:3s infinite pulseGlow}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{color:#fff;background:#050816;font-family:Inter,system-ui,sans-serif;overflow-x:hidden}button{font:inherit;cursor:pointer;transition:all .25s}input,textarea,select{font:inherit}:root{--bg1:#0f172a;--bg2:#0b1220;--accent:#7c3aed}html,body,#root{height:100%}body{background:var(--bg1);color:#e6eef8;margin:0;font-family:system-ui,sans-serif}.app{min-height:100vh;position:relative;overflow:hidden}.bg{z-index:-1;pointer-events:none;background:linear-gradient(120deg,var(--bg1),var(--bg2));position:absolute;inset:0;transform:translateZ(0)}.bg:before,.bg:after{content:"";filter:blur(80px);opacity:.55;border-radius:45%;width:60vmax;height:60vmax;position:absolute;transform:translate(-10%,-20%)rotate(15deg)}.bg:before{background:radial-gradient(circle at 30% 30%,#7c3aedd9,#0000 40%);animation:12s ease-in-out infinite float1;top:-30%;left:-20%}.bg:after{background:radial-gradient(circle at 70% 70%,#10b981b3,#0000 30%);animation:15s ease-in-out infinite float2;bottom:-30%;right:-20%}@keyframes float1{0%{transform:translate(-10%,-20%)rotate(0)}50%{transform:translate(-5%,-15%)rotate(10deg)}to{transform:translate(-10%,-20%)rotate(0)}}@keyframes float2{0%{transform:translate(10%,20%)rotate(0)}50%{transform:translate(5%,15%)rotate(-8deg)}to{transform:translate(10%,20%)rotate(0)}}.topbar{z-index:3;justify-content:space-between;align-items:center;padding:20px 32px;display:flex;position:relative}.login-panel{z-index:3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffff0a;border-radius:12px;max-width:420px;margin:80px auto 0;padding:24px;position:relative;box-shadow:0 10px 30px #02061799}.login-form label{color:#cfe6ff;margin-bottom:6px;font-weight:600;display:block}.login-form select,input{width:100%;color:inherit;background:linear-gradient(#ffffff08,#ffffff03);border:1px solid #ffffff14;border-radius:12px;padding:12px 44px 12px 14px;transition:box-shadow .18s,transform .12s;box-shadow:inset 0 1px #ffffff05,0 8px 24px #0206178c}.login-form select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M6 7l4 4 4-4' stroke='%23ffffff' stroke-opacity='0.9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-position:right 12px center;background-repeat:no-repeat;padding-right:44px}.login-form input:focus,.login-form select:focus,.field input:focus,.field textarea:focus,.field select:focus{outline:none;box-shadow:0 6px 24px #7c3aed2e,0 0 0 4px #7c3aed0f}.device-panel{background:#ffffff05;border-radius:8px;margin-top:16px;padding:12px}.compose-area{z-index:3;justify-content:center;padding:40px;display:flex;position:relative}.compose-card{background:linear-gradient(#12102299,#0c0b168c);border-radius:16px;width:820px;max-width:95%;padding:26px;transition:transform .25s,box-shadow .2s;transform:perspective(900px)rotateX(3deg);box-shadow:0 30px 70px #020617bf}.compose-card:before{content:"";background:linear-gradient(180deg,var(--accent),#06b6d4);opacity:.9;border-top-left-radius:16px;border-bottom-left-radius:16px;width:6px;position:absolute;top:0;bottom:0;left:0}.compose-card{position:relative;overflow:hidden}.compose-card:hover{transform:translateY(-8px)scale(1.01);box-shadow:0 40px 100px #7c3aed40}.field label{color:#cfe6ff;margin-bottom:6px;display:block}.field input,.field select,.field textarea{width:100%;color:inherit;resize:vertical;background:linear-gradient(#ffffff05,#00000040);border:1px solid #ffffff0f;border-radius:10px;padding:12px;transition:all .25s}.field input:hover,.field textarea:hover,.field select:hover{transform:translateY(-2px)}.login-form select option,.field select option{color:#e6eef8;background:#0c0b16fa}.login-form select option:checked,.field select option:checked{color:#fff;background:linear-gradient(90deg,#7c3aed2e,#06b6d41f)}.login-form select::-ms-expand{display:none}.actions{align-items:center;gap:12px;margin-top:8px;display:flex}.send{background:linear-gradient(90deg,var(--accent),#06b6d4);color:#fff;cursor:pointer;border:none;border-radius:12px;padding:10px 18px;transition:transform .12s,box-shadow .12s;transform:translateZ(0);box-shadow:0 10px 30px #7c3aed47}.send:active{transform:scale(.98)}.status{opacity:.9}@media (width<=600px){.compose-card{padding:16px}}.login-wrapper{justify-content:center;align-items:center;min-height:100vh;padding:30px;display:flex;position:relative;overflow:hidden}.login-card{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);z-index:5;background:#ffffff0d;border:1px solid #ffffff14;border-radius:28px;width:420px;padding:45px;position:relative;box-shadow:0 20px 80px #00000073}.login-card h1{letter-spacing:-.02em;margin-top:20px;font-size:2rem;font-weight:700}.login-card p{color:#aab4d6;margin-top:10px;margin-bottom:30px;line-height:1.6}.logo-circle{color:#fff;background:linear-gradient(135deg,#7c3aed,#06b6d4);border-radius:50%;justify-content:center;align-items:center;width:74px;height:74px;font-size:1.8rem;display:flex;box-shadow:0 0 60px #7c3aed73}.input-group{margin-bottom:22px}.input-group label{margin-bottom:10px;font-weight:600;display:block}.input-group input,.input-group select{color:#fff;background:#111827;border:none;border-radius:14px;outline:none;width:100%;padding:14px 16px;transition:all .25s;box-shadow:inset 0 1px #ffffff0a}.input-group input:focus,.input-group select:focus{box-shadow:0 0 0 3px #7c3aed40}.password-box{background:#111827;border-radius:14px;align-items:center;display:flex;overflow:hidden;box-shadow:inset 0 1px #ffffff0a}.password-box input{background:0 0;border:none;flex:1}.login-submit{color:#fff;cursor:pointer;background:linear-gradient(135deg,#7c3aed,#06b6d4);border:none;border-radius:14px;width:100%;margin-top:8px;padding:14px 16px;font-weight:700;transition:transform .2s,box-shadow .2s;box-shadow:0 16px 40px #7c3aed47}.login-submit:hover{transform:translateY(-2px);box-shadow:0 22px 48px #7c3aed57}.login-submit.secondary{box-shadow:none;background:#ffffff1f}.login-footer{text-align:center;color:#94a3b8;margin-top:24px;font-size:.92rem}.eye-btn{color:#fff;background:0 0;border:none;padding:15px}.login-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#7c3aed,#06b6d4);border:none;border-radius:16px;justify-content:center;align-items:center;gap:10px;width:100%;margin-top:10px;padding:15px;font-size:16px;font-weight:600;display:flex}.login-btn:hover{box-shadow:0 15px 45px #7c3aed59}.login-glow{filter:blur(140px);opacity:.18;background:conic-gradient(from 180deg,#7c3aed,#06b6d4,#7c3aed);border-radius:50%;width:700px;height:700px;position:absolute}.device-modal{z-index:20;background:#111827;border-radius:24px;flex-direction:column;align-items:center;gap:18px;width:360px;padding:35px;display:flex;position:fixed;box-shadow:0 25px 80px #00000073}.device-modal input{color:#fff;background:#1f2937;border:none;border-radius:12px;width:100%;padding:14px}.register-btn{color:#fff;cursor:pointer;background:#7c3aed;border:none;border-radius:14px;width:100%;padding:14px;font-weight:600}.navbar{z-index:100;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#05081673;border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;padding:20px 40px;display:flex;position:sticky;top:0}.nav-left{align-items:center;gap:28px;display:flex}.brand{align-items:center;gap:10px;font-size:20px;font-weight:700;display:flex}.search-box{background:#111827;border-radius:14px;align-items:center;gap:10px;width:320px;padding:12px 18px;display:flex}.search-box input{color:#fff;background:0 0;border:none;outline:none;width:100%}.nav-right{align-items:center;gap:18px;display:flex}.profile{align-items:center;gap:10px;display:flex}.profile small{color:#94a3b8;display:block}.icon-btn{color:#fff;cursor:pointer;background:#111827;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:all .25s;display:flex}.icon-btn:hover{background:#1f2937;transform:translateY(-2px)}.logout{color:#fff;cursor:pointer;background:#ef4444;border:none;border-radius:14px;align-items:center;gap:8px;padding:12px 18px;transition:all .25s;display:flex}.logout:hover{transform:translateY(-2px)}.dashboard{z-index:1;width:min(1400px,95%);margin:auto;padding:40px 0;position:relative}.stats-grid{grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:40px;display:grid}.stat-card{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffff0d;border:1px solid #ffffff14;border-radius:24px;align-items:center;gap:18px;padding:24px;transition:all .3s;display:flex}.stat-card:hover{box-shadow:0 20px 60px #7c3aed2e}.stat-icon{color:#fff;border-radius:18px;justify-content:center;align-items:center;width:60px;height:60px;display:flex}.stat-card small{color:#94a3b8;font-size:14px}.stat-card h2{margin-top:8px;font-size:28px}.compose-area{padding:0}@media (width<=1100px){.stats-grid{grid-template-columns:repeat(2,1fr)}.search-box{display:none}}@media (width<=700px){.navbar{padding:18px}.stats-grid{grid-template-columns:1fr}.nav-right{gap:10px}.logout{display:none}}.compose-card{box-shadow:none;background:0 0;padding:0;overflow:hidden;transform:none}.editor,.preview{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffff0d;border:1px solid #ffffff14;border-radius:24px;padding:28px;box-shadow:0 20px 60px #00000059}.compose-header{justify-content:space-between;align-items:center;margin-bottom:30px;display:flex}.compose-header h2{margin-bottom:8px;font-size:28px}.compose-header p{color:#94a3b8}.editor-tools{gap:10px;display:flex}.tool-btn{color:#fff;cursor:pointer;background:#111827;border:none;border-radius:14px;width:46px;height:46px;font-size:20px;transition:all .25s}.tool-btn:hover{background:#1f2937;transform:translateY(-3px)}.field{margin-bottom:20px}.field label{margin-bottom:10px;font-weight:600;display:block}.field input,.field textarea,.field select{color:#fff;background:#111827;border:1px solid #ffffff0d;border-radius:16px;outline:none;width:100%;padding:15px 18px;transition:all .25s}.field input:focus,.field textarea:focus,.field select:focus{border-color:#7c3aed;box-shadow:0 0 0 4px #7c3aed33}.editor-textarea{resize:vertical;min-height:300px;line-height:1.6}.bottom-bar{justify-content:space-between;align-items:center;margin-top:24px;display:flex}.bottom-bar span{color:#94a3b8}.preview-header{border-bottom:1px solid #ffffff14;margin-bottom:20px;padding-bottom:15px;font-size:22px;font-weight:700}.preview-body{color:#111827;background:#fff;border-radius:18px;min-height:550px;padding:30px;overflow:auto}.empty-preview{color:#94a3b8;justify-content:center;align-items:center;height:500px;font-size:18px;display:flex}.status-badge{text-transform:capitalize;border-radius:999px;margin-top:20px;padding:10px 18px;font-weight:600;display:inline-flex}.status-badge.sending{background:#ca8a04}.status-badge.sent{background:#15803d}.status-badge.error{background:#b91c1c}@media (width<=1100px){.compose-layout{grid-template-columns:1fr}.preview{order:-1}}.bg{animation:8s ease-in-out infinite pulseBG}@keyframes pulseBG{0%{filter:saturate()}50%{filter:saturate(1.4)}to{filter:saturate()}}.mail-layout{grid-template-columns:380px 1fr;gap:25px;margin-top:30px;display:grid}.mail-list{background:#ffffff0d;border-radius:20px;height:700px;padding:20px;overflow:auto}.mail-item{cursor:pointer;background:#ffffff05;border-radius:14px;margin-bottom:12px;padding:18px;transition:all .25s}.mail-item:hover{background:#7c3aed26}.mail-item.featured{border:1px solid #c084fc47}.mail-item.active{background:#7c3aed4d}.mail-item.unread{border-left:3px solid #06b6d4}.mail-meta-row{color:#94a3b8;justify-content:space-between;align-items:center;gap:8px;margin:8px 0 6px;font-size:12px;display:flex}.star-toggle{color:#fbbf24;cursor:pointer;background:0 0;border:none}.star-toggle.active{opacity:1}.attachment-icon{color:#64748b;margin-top:6px}.folder-switcher{flex-wrap:wrap;gap:8px;margin:10px 0 14px;display:flex}.folder-switcher button{color:#fff;cursor:pointer;background:#ffffff08;border:1px solid #ffffff14;border-radius:999px;padding:8px 12px}.folder-switcher button.active{background:#7c3aed}.compose-fab{color:#fff;cursor:pointer;background:linear-gradient(135deg,#7c3aed,#06b6d4);border:none;border-radius:999px;align-items:center;gap:8px;margin-bottom:14px;padding:10px 12px;display:flex}.compose-drawer-backdrop{z-index:1000;background:#0206178c;justify-content:flex-end;display:flex;position:fixed;inset:0}.compose-drawer{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);background:#080c18f5;border-left:1px solid #ffffff14;width:min(480px,100%);height:100%;padding:24px}.compose-drawer-form{flex-direction:column;gap:14px;display:flex}.compose-drawer-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.viewer-toolbar{justify-content:flex-end;gap:8px;margin-bottom:18px;display:flex}.icon-btn.small{border-radius:50%;width:38px;height:38px}.icon-btn.small.active{background:#7c3aed}.icon-btn.small.danger{background:#ef4444}.mail-viewer{background:#ffffff0d;border-radius:20px;height:700px;padding:24px;overflow:auto}.mail-details{color:#94a3b8;justify-content:space-between;align-items:flex-start;gap:12px;margin:12px 0 8px;display:flex}.attachment-pill{background:#ffffff14;border-radius:999px;align-items:center;gap:8px;margin-bottom:12px;padding:8px 12px;display:inline-flex}.mail-body{color:#e2e8f0;line-height:1.7}.mail-body img{border-radius:12px;max-width:100%}.mail-plain-text{white-space:pre-wrap;word-break:break-word;color:#e2e8f0;font-family:inherit}@media (width<=1100px){.mail-app{grid-template-columns:1fr}.sidebar{height:auto}.mail-list,.mail-viewer{height:auto;min-height:420px}}@media (width<=700px){.mail-list-header{flex-wrap:wrap}.search-input{margin-top:0}.compose-drawer{width:100%}}.mail-row{justify-content:space-between;margin-bottom:6px;display:flex}.mail-item p{color:#9ca3af;margin-top:8px;font-size:13px}.mail-list-header{justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;display:flex}.mail-list-header.featured{background:#7c3aed29;border:1px solid #c084fc3d;border-radius:16px;padding:14px 16px}.title-block{flex-direction:column;gap:4px;display:flex}.section-label{letter-spacing:.16em;text-transform:uppercase;color:#c4b5fd;margin:0;font-size:12px}.inbox-feature-banner{background:linear-gradient(135deg,#7c3aed47,#06b6d429);border:1px solid #ffffff14;border-radius:18px;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px;padding:16px 18px;display:flex}.feature-pill{text-transform:uppercase;letter-spacing:.1em;background:#ffffff24;border-radius:999px;margin-bottom:8px;padding:6px 10px;font-size:12px;font-weight:600;display:inline-flex}.feature-stat{white-space:nowrap;background:#ffffff1f;border-radius:999px;padding:10px 14px;font-weight:700}.mail-meta{color:#94a3b8;justify-content:space-between;margin:20px 0;display:flex}.empty-state,.empty-state-viewer,.empty-mail{text-align:center;opacity:.8;color:#dbe4f0;flex-direction:column;justify-content:center;align-items:center;gap:12px;height:100%;padding:24px;display:flex}.loading{text-align:center;padding:40px}.mail-list-body{flex-direction:column;gap:10px;display:flex}.mail-skeleton{background:#ffffff08;border:1px solid #ffffff0a;border-radius:14px;padding:14px}.mail-skeleton-line{background:#ffffff14;border-radius:999px;height:10px;margin-bottom:8px}.mail-skeleton-line.short{width:55%}.mail-skeleton-line.tiny{width:30%}.mail-skeleton.large{width:70%;height:18px;margin-bottom:14px}.mail-app{grid-template-columns:230px 380px 1fr;gap:25px;display:grid}.mail-app-featured .mail-list,.mail-app-featured .mail-viewer{box-shadow:inset 0 1px #ffffff0a}.sidebar{background:#ffffff0d;border-radius:20px;flex-direction:column;gap:12px;height:700px;padding:20px;display:flex}.sidebar button{color:#fff;cursor:pointer;background:0 0;border:none;border-radius:14px;align-items:center;gap:12px;padding:14px;transition:all .25s;display:flex}.sidebar button:hover{background:#7c3aed2e}.sidebar .active{background:#7c3aed}.search-input{color:#fff;background:#111827;border:none;border-radius:12px;width:100%;margin-top:15px;padding:12px}.delete-btn{color:#fff;cursor:pointer;background:#ef4444;border:none;border-radius:12px;margin-bottom:20px;padding:10px 18px}.star-btn{cursor:pointer;color:gold;background:0 0;border:none}.dashboard-tabs{background:#ffffff08;border:1px solid #ffffff0d;border-radius:12px;gap:12px;width:fit-content;margin-bottom:24px;padding:6px;display:flex}.dashboard-tabs button{color:#94a3b8;cursor:pointer;background:0 0;border:none;border-radius:8px;align-items:center;gap:8px;padding:8px 18px;font-size:14px;font-weight:600;transition:all .25s;display:flex}.dashboard-tabs button:hover{color:#f1f5f9;background:#ffffff0d}.dashboard-tabs button.active{background:var(--accent);color:#fff;box-shadow:0 4px 12px #7c3aed33}.login-card{box-sizing:border-box;width:100%;max-width:420px}@media (width<=480px){.login-card{border-radius:20px;padding:28px 20px}.login-wrapper{padding:16px}.login-card h1{font-size:1.6rem}.logo-circle{width:60px;height:60px;font-size:1.5rem}}@media (width<=768px){.navbar{padding:16px 20px}.nav-left .brand span{font-size:16px}.search-box,.profile div{display:none!important}.logout{justify-content:center;align-items:center;width:44px;height:44px;border-radius:50%!important;padding:12px!important;display:flex!important}.logout-text{display:none!important}.stats-grid{grid-template-columns:repeat(2,1fr)!important;gap:12px!important;margin-bottom:20px!important}.stat-card{border-radius:16px!important;gap:10px!important;padding:14px!important}.stat-icon{border-radius:12px!important;width:44px!important;height:44px!important}.stat-icon svg{width:18px!important;height:18px!important}.stat-card h2{margin-top:4px!important;font-size:20px!important}.stat-card small{font-size:11px!important}.dashboard{box-sizing:border-box!important;width:100%!important;padding:16px!important}.dashboard-tabs{box-sizing:border-box!important;width:100%!important;display:flex!important}.dashboard-tabs button{flex:1!important;justify-content:center!important}}@media (width<=900px){.mail-app{grid-template-columns:1fr!important;gap:0!important}.sidebar,.mail-app:not(.has-selected-mail) .mail-viewer{display:none!important}.mail-app:not(.has-selected-mail) .mail-list{width:100%!important;height:auto!important;min-height:500px!important;display:block!important}.mail-app.has-selected-mail .mail-list{display:none!important}.mail-app.has-selected-mail .mail-viewer{width:100%!important;height:auto!important;min-height:500px!important;display:block!important}.back-to-list-btn{justify-content:center;align-items:center;display:flex!important}}@media (width>=901px){.back-to-list-btn{display:none!important}}.compose-layout{grid-template-columns:1.2fr .8fr;gap:30px;display:grid}@media (width<=1100px){.compose-layout{grid-template-columns:1fr!important}.preview{order:0!important}}@media (width<=768px){.compose-area{padding:16px 0!important}.compose-layout{gap:16px!important}.editor,.preview{border-radius:16px!important;padding:16px!important}.preview-body{min-height:350px!important;padding:16px!important}.empty-preview{height:300px!important;font-size:15px!important}.compose-header h2{font-size:22px!important}.field input,.field textarea,.field select{border-radius:12px!important;padding:12px!important}.editor-textarea{min-height:200px!important}}