.auth-bg{background:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(120,119,198,.15),transparent),#09090b}.auth-card{background:#18181bcc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);box-shadow:0 0 0 1px #ffffff0d,0 20px 50px -12px #00000080}.auth-card:hover{border-color:#ffffff1f}.auth-input{background:#09090bcc;border:1px solid rgba(255,255,255,.1);transition:all .2s ease}.auth-input:focus{border-color:#ffffff40;box-shadow:0 0 0 3px #ffffff0d;outline:none}.auth-input::-moz-placeholder{color:#52525b}.auth-input::placeholder{color:#52525b}.btn-google{background:#ffffff08;border:1px solid rgba(255,255,255,.1);transition:all .2s ease}.btn-google:hover{background:#ffffff14;border-color:#fff3}.btn-microsoft{background:#ffffff08;border:1px solid rgba(255,255,255,.1);transition:all .2s ease}.btn-microsoft:hover{background:#ffffff14;border-color:#fff3}.btn-primary{background:#fafafa;color:#09090b;font-weight:600;transition:all .2s ease}.btn-primary:hover{background:#e4e4e7;transform:translateY(-1px)}.divider-line{background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);height:1px}.hero-gmail-container{--bg-color: #09090b;--sidebar-bg: #18181b;--list-bg: #09090b;--item-hover: #27272a;--text-main: #fafafa;--text-muted: #71717a;--divider: #27272a;width:100%;max-width:1000px;margin:0 auto;transform:translateZ(0);overflow:visible;position:relative}@media(max-width:768px){.hero-gmail-container{padding-right:60px;margin-right:-30px}}.gmail-interface-wrapper{position:relative;border-radius:16px;animation:border-glow 4s linear infinite;box-shadow:0 0 0 1px #ffffff0f,0 25px 50px -12px #00000080,0 0 100px -20px #ffffff0d}.gmail-interface{display:grid;grid-template-columns:180px 1fr;height:600px;background:linear-gradient(145deg,#0e0e11 0%,var(--bg-color) 50%,#0a0a0d 100%);border-radius:16px;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;overflow:hidden;position:relative;box-shadow:inset 0 1px #ffffff08}.gmail-sidebar{background:linear-gradient(180deg,#1c1c20 0%,var(--sidebar-bg) 30%,#141417 100%);padding:20px 12px;display:flex;flex-direction:column;gap:6px;overflow:hidden;border-right:1px solid rgba(255,255,255,.04)}@keyframes border-glow{0%,22%{box-shadow:0 0 0 1px #ffffff0f,0 25px 50px -12px #00000080,0 0 100px -20px #ffffff0d}26%,32%{box-shadow:0 0 0 1px #22c55e66,0 0 40px -5px #22c55e33,0 25px 50px -12px #00000080,0 0 100px -20px #22c55e1a}38%,72%{box-shadow:0 0 0 1px #ffffff0f,0 25px 50px -12px #00000080,0 0 100px -20px #ffffff0d}76%,82%{box-shadow:0 0 0 1px #fff3,0 0 40px -5px #ffffff1a,0 25px 50px -12px #00000080,0 0 100px -20px #ffffff14}88%,to{box-shadow:0 0 0 1px #ffffff0f,0 25px 50px -12px #00000080,0 0 100px -20px #ffffff0d}}.envelope-container{position:absolute;right:-60px;top:0;bottom:0;width:100px;z-index:20;overflow:visible}.compose-btn{background:#fff;color:#09090b;height:40px;width:100%;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:14px;margin-bottom:20px;text-decoration:none;transition:background-color .15s ease;cursor:pointer}.compose-btn:hover{background:#e4e4e7}.nav-item{padding:10px 12px;border-radius:6px;color:var(--text-muted);font-size:14px;display:flex;justify-content:space-between}.nav-item.active{background:#ffffff0d;color:var(--text-main);font-weight:500;border-radius:6px;border:1px solid rgba(255,255,255,.08);animation:inbox-pulse 4s ease infinite}@keyframes inbox-pulse{0%,22%{border-color:#ffffff14;box-shadow:none}28%,36%{border-color:#22c55e99;box-shadow:0 0 20px #22c55e40,inset 0 0 12px #22c55e14}46%,to{border-color:#ffffff14;box-shadow:none}}.nav-item-label{margin-top:20px;margin-bottom:6px;color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em}.nav-item-label-tag{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:6px;font-size:11px;color:var(--text-main);background:#ffffff0d;border:1px solid rgba(255,255,255,.08);animation:label-pulse 4s ease infinite;animation-delay:2s;gap:12px}.label-tag-left{display:flex;align-items:center;gap:6px}.label-count{font-size:10px;color:var(--text-muted);background:#ffffff1a;padding:2px 6px;border-radius:4px;font-weight:500}@keyframes label-pulse{0%,22%{border-color:#ffffff14;box-shadow:none}28%,36%{border-color:#fff6;box-shadow:0 0 16px #ffffff26,inset 0 0 12px #ffffff0d}46%,to{border-color:#ffffff14;box-shadow:none}}.label-indicator{width:8px;height:8px;background:#fff;border-radius:2px;flex-shrink:0;animation:indicator-glow 4s ease infinite;animation-delay:2s}@keyframes indicator-glow{0%,22%{box-shadow:none}28%,36%{box-shadow:0 0 8px #fffc}46%,to{box-shadow:none}}.email-list-container{display:flex;flex-direction:column;background:var(--list-bg);overflow:hidden;border-right:1px solid var(--divider)}.top-bar{height:56px;border-bottom:1px solid var(--divider);display:flex;align-items:center;padding:0 16px}.search-fake{background:var(--sidebar-bg);width:100%;height:40px;border-radius:6px;display:flex;align-items:center;padding-left:16px;color:var(--text-muted);font-size:14px;border:1px solid var(--divider)}.list-section{padding:12px;display:flex;flex-direction:column;gap:3px}.section-header{color:var(--text-main);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;margin:8px 0 6px 10px;padding-bottom:6px}.section-header.outsider{margin-top:20px}.email-row{height:44px;background:transparent;border-bottom:1px solid var(--divider);display:flex;align-items:center;padding:0 12px;color:var(--text-muted);font-size:13px;border-radius:4px}.email-row .check{width:16px;height:16px;border:1px solid var(--text-muted);border-radius:3px;margin-right:12px;flex-shrink:0}.email-row .star{margin-right:12px;color:var(--text-muted);font-size:16px}.email-row .sender{width:100px;font-weight:500;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}.email-row .subject{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:12px}.email-row .date{font-size:11px;margin-left:10px;flex-shrink:0}.new-row-inbox{overflow:hidden;animation:slide-in-inbox 4s ease infinite;background:#ffffff0d;border-left:2px solid var(--text-main)}.new-row-outsider{overflow:hidden;animation:slide-in-outsider 4s ease infinite;animation-delay:2s;background:#ffffff08;border-left:2px solid var(--text-muted)}@keyframes slide-in-inbox{0%,25%{height:0;opacity:0;margin:0;padding:0;border-width:0}30%{height:44px;opacity:1;padding:0 12px;border-left-width:2px}45%{background:transparent}90%{height:44px;opacity:1}to{height:0;opacity:0;padding:0;border-width:0}}@keyframes slide-in-outsider{0%,25%{height:0;opacity:0;margin:0;padding:0;border-width:0}30%{height:44px;opacity:1;padding:0 12px;border-left-width:2px}45%{background:transparent}90%{height:44px;opacity:1}to{height:0;opacity:0;padding:0;border-width:0}}.envelope{width:65px;height:45px;position:absolute;top:50%;right:-70px;transform:translateY(-50%);opacity:0;z-index:25;border-radius:5px}.envelope:before{content:"";position:absolute;top:0;left:0;border-left:32px solid transparent;border-right:33px solid transparent;border-top:22px solid rgba(0,0,0,.1)}.env-white{background:#eee;animation:path-white 4s linear infinite}.env-black{background:#333;border:1px solid #555;animation:path-black 4s linear infinite;animation-delay:2s}.env-black:before{border-top-color:#fff3}@keyframes path-white{0%{opacity:0;transform:translateY(-50%) translate3d(300px,0,0)}8%{opacity:1;transform:translateY(-50%) translate3d(150px,0,0)}18%{transform:translateY(-50%) translateZ(0)}20%{transform:translateY(-50%) translate3d(-40px,0,0)}28%{opacity:1;transform:translateY(-50%) translate3d(-200px,-120px,0) scale(.7)}32%{opacity:0;transform:translateY(-50%) translate3d(-200px,-120px,0) scale(.7)}to{opacity:0}}@keyframes path-black{0%{opacity:0;transform:translateY(-50%) translate3d(300px,0,0)}8%{opacity:1;transform:translateY(-50%) translate3d(150px,0,0)}18%{transform:translateY(-50%) translateZ(0)}20%{transform:translateY(-50%) translate3d(-40px,0,0)}28%{opacity:1;transform:translateY(-50%) translate3d(-200px,100px,0) scale(.7)}32%{opacity:0;transform:translateY(-50%) translate3d(-200px,100px,0) scale(.7)}to{opacity:0}}@media(prefers-reduced-motion:reduce){.envelope,.gmail-interface-wrapper,.new-row-inbox,.new-row-outsider,.nav-item.active,.nav-item-label-tag,.label-indicator{animation:none}.envelope{opacity:1;transform:translateY(-50%) translateZ(0)}.gmail-interface-wrapper{box-shadow:0 0 0 1px #ffffff1a}.new-row-inbox,.new-row-outsider{height:36px;opacity:1;padding:0 8px}}@media(max-width:768px){.hero-gmail-container{padding-right:0;max-width:400px;margin-left:auto;margin-right:auto}.gmail-interface{grid-template-columns:1fr;grid-template-rows:1fr;height:580px;min-height:580px;background:linear-gradient(180deg,#0e0e11 0%,var(--bg-color) 100%)}.gmail-sidebar{display:none}.email-list-container{border:none;border-radius:16px;height:100%;min-height:580px;overflow:hidden}.gmail-interface-wrapper{border-radius:16px;overflow:visible;position:relative}.envelope-container{position:absolute;left:50%;transform:translate(-50%);top:-80px;bottom:auto;width:120px;height:80px;z-index:20;overflow:visible;display:flex;justify-content:center}.envelope{width:50px;height:35px;right:auto;top:0;left:50%;transform:translate(-50%)}.envelope:before{border-left:25px solid transparent;border-right:25px solid transparent;border-top:17px solid rgba(0,0,0,.1)}.env-white{animation:path-white-mobile 4s linear infinite}.env-black{animation:path-black-mobile 4s linear infinite;animation-delay:2s}@keyframes path-white-mobile{0%{opacity:0;transform:translate(-50%) translateY(-150px)}8%{opacity:1;transform:translate(-50%) translateY(-80px)}18%{transform:translate(-50%) translateY(-10px)}20%{transform:translate(-50%) translateY(10px)}28%{opacity:1;transform:translate(-100px) translateY(150px) scale(.6)}32%{opacity:0;transform:translate(-100px) translateY(150px) scale(.6)}to{opacity:0}}@keyframes path-black-mobile{0%{opacity:0;transform:translate(-50%) translateY(-150px)}8%{opacity:1;transform:translate(-50%) translateY(-80px)}18%{transform:translate(-50%) translateY(-10px)}20%{transform:translate(-50%) translateY(10px)}28%{opacity:1;transform:translate(50px) translateY(350px) scale(.6)}32%{opacity:0;transform:translate(50px) translateY(350px) scale(.6)}to{opacity:0}}}