: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:0;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{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;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}.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}.password-box input{background:0 0;border:none;flex:1}.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{width:min(1400px,95%);margin:auto;padding:40px 0}.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}.compose-layout{grid-template-columns:1.2fr .8fr;gap:30px;display:grid}.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()}}