/* Milan login page styles */
*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;position:fixed;top:0;left:0;right:0;bottom:0}body{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,sans-serif;background:radial-gradient(ellipse at 20%0,rgba(20,100,184,.3)0,transparent 50%),radial-gradient(ellipse at 80% 10%,rgba(217,70,239,.22)0,transparent 42%),radial-gradient(ellipse at 50% 100%,rgba(245,158,11,.12)0,transparent 55%),radial-gradient(ellipse at 5% 80%,rgba(6,182,212,.15)0,transparent 40%),#050e2b;display:flex;align-items:center;justify-content:center;padding:1rem}.milan-container{max-width:1300px;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:1.8rem;background:rgba(255,255,255,.28);backdrop-filter:blur(2px);border-radius:2.5rem;padding:.8rem;max-height:98vh;overflow:hidden}.hero-panel{background:rgba(255,255,255,.98);border-radius:2rem;padding:2rem 1.8rem;box-shadow:0 25px 45px -12px rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.9);display:flex;flex-direction:column;justify-content:space-between;height:100%;overflow-y:auto;scrollbar-width:thin}.hero-panel::-webkit-scrollbar{width:4px}.milan-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(245,158,11,.14);padding:.4rem 1rem;border-radius:40px;margin-bottom:1.5rem;font-weight:600;font-size:.85rem;color:#fbbf24;width:fit-content}.milan-badge span{font-weight:800;font-size:1.2rem;letter-spacing:.1em}.hero-title{font-size:2.8rem;font-weight:800;line-height:1.2;letter-spacing:-.02em;background:linear-gradient(145deg,#0f172a,#1e293b);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:1.5rem}.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:.9rem 0 1.1rem}.feature-item{display:block;padding:.85rem .8rem;border:1px solid rgba(245,158,11,.18);border-radius:15px;background:linear-gradient(145deg,rgba(245,158,11,.07),rgba(13,59,122,.18))}.feature-icon{width:36px;height:36px;background:rgba(245,158,11,.13);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;margin-bottom:.5rem}.feature-text h4{font-weight:700;font-size:.82rem;margin-bottom:.2rem;color:#f0e6ff}.feature-text p{font-size:.67rem;color:#8ba4d4;line-height:1.4}.security-footer{background:rgba(124,58,237,.08);border-radius:1.2rem;padding:.8rem 1rem;display:flex;align-items:center;gap:.8rem;margin-top:1rem;border:1px solid rgba(124,58,237,.2)}.security-footer strong{font-weight:700;font-size:.85rem}.security-footer div:last-child{font-size:.75rem;color:#334155}.login-card{background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-radius:2rem;padding:2.2rem 3rem;width:100%;margin-left:0;box-shadow:0 25px 45px -12px rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.9);display:flex;flex-direction:column;justify-content:center;height:100%;overflow-y:auto;scrollbar-width:thin}.login-card::-webkit-scrollbar{width:4px}.logo-center{text-align:center;margin-bottom:.8rem}.logo-center h2{font-size:1.9rem;letter-spacing:.28em;font-weight:800;background:linear-gradient(135deg,#f59e0b,#fbbf24,#d946ef);-webkit-background-clip:text;background-clip:text;color:transparent}.card-header{text-align:center;margin-bottom:1.2rem}.card-header h3{font-size:1.6rem;font-weight:700;margin-bottom:.2rem}.card-header p{color:#6b7280;font-size:.85rem}.tabs{display:flex;gap:.5rem;background:rgba(0,0,0,.03);border-radius:2rem;padding:.2rem;margin-bottom:1.2rem}.tab{flex:1;background:0 0;border:0;padding:.6rem;border-radius:2rem;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s;color:#4b5563}.tab.active{background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.05);color:#fbbf24}.input-group{margin-bottom:1rem}.input-label{display:block;font-weight:500;font-size:.8rem;margin-bottom:.3rem;color:#1f2937}.input-wrapper{position:relative;display:flex;align-items:center}.input-icon{position:absolute;left:.9rem;color:#94a3b8;width:1rem;height:1rem}.input-field{width:100%;padding:.7rem .9rem .7rem 2.3rem;border:1px solid #e2e8f0;border-radius:1.2rem;background:#fff;font-size:.85rem;transition:all .2s;outline:0}.input-field:focus{border-color:#fbbf24;box-shadow:0 0 0 3px rgba(36,105,255,.15)}.eye-btn{position:absolute;right:.8rem;background:0 0;border:0;cursor:pointer;color:#94a3b8;font-size:1rem}.options-row{display:flex;justify-content:space-between;align-items:center;margin:.8rem 0 1.2rem}.checkbox{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:#4b5563;transform:translateX(8px)}.forgot-link{font-size:.8rem;color:#fbbf24;text-decoration:none;font-weight:500;transform:translateX(-8px)}.login-button{width:100%;background:linear-gradient(135deg,#f59e0b,#fbbf24,#d946ef);border:0;padding:.75rem;border-radius:1.8rem;font-weight:700;font-size:.9rem;color:#fff;display:flex;align-items:center;justify-content:center;gap:.4rem;cursor:pointer;transition:transform .1s,opacity .2s;box-shadow:0 6px 14px rgba(36,105,255,.3)}.login-button:hover{transform:scale(.98);opacity:.92}.login-button:disabled{opacity:.6;cursor:not-allowed}.divider{text-align:center;margin:.9rem 0;position:relative;font-size:.75rem;color:#94a3b8}.divider::before,.divider::after{content:"";position:absolute;top:50%;width:42%;height:1px;background:#e2e8f0}.divider::before{left:0}.divider::after{right:0}.did-button{width:100%;background:rgba(0,0,0,.02);border:1px solid #e2e8f0;padding:.7rem;border-radius:1.8rem;font-weight:500;display:flex;align-items:center;justify-content:center;gap:.6rem;cursor:pointer;transition:all .2s;font-size:.85rem;color:#1f2937}.did-button:hover{background:rgba(36,105,255,.06);border-color:rgba(36,105,255,.3)}.did-badge{background:linear-gradient(135deg,#f59e0b,#fbbf24,#d946ef);color:#fff;padding:2px 8px;border-radius:30px;font-size:.7rem;font-weight:700}.register-link{text-align:center;margin-top:.6rem;font-size:.8rem;color:#6b7280;transform:translateY(-6px)}.register-link a{color:#fbbf24;font-weight:600;text-decoration:none;cursor:pointer}.hidden{display:none!important}.auth-msg{text-align:center;font-size:.75rem;margin-top:.6rem;min-height:1.6rem;color:#e5484d}@media (max-width:1000px){.milan-container{gap:1rem;padding:.5rem}.hero-panel{padding:1.5rem 1.2rem}.hero-title{font-size:2.3rem;margin-bottom:1rem}.feature-grid{gap:.9rem}.feature-icon{width:34px;height:34px;font-size:1.1rem}.feature-text h4{font-size:.9rem}.feature-text p{font-size:.75rem}.login-card{padding:1.2rem 1.2rem}.card-header h3{font-size:1.4rem}}@media (max-width:780px){.milan-container{grid-template-columns:1fr;max-width:480px;gap:.8rem;overflow-y:auto}body{padding:.5rem}.hero-panel,.login-card{padding:1rem}.hero-title{font-size:1.8rem;margin-bottom:.5rem}.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}.feature-item{padding:.65rem .55rem}.feature-icon{width:26px;height:26px;font-size:.85rem;margin-bottom:.3rem}.feature-text h4{font-size:.72rem}.feature-text p{font-size:.58rem}.card-header h3{font-size:1.3rem}.tab{padding:.4rem;font-size:.8rem}.input-field{padding:.6rem .8rem .6rem 2rem}}

:root{--bg:#050e2b!important;--card:#0a1a3e!important;--text:#f0e6ff!important;--muted:#8ba4d4!important;--line:rgba(100,160,255,0.18)!important;--brand:#f59e0b!important;--brand2:#d946ef!important;--brand3:#1464b8!important;--danger:#ef4444!important;--shadow:0 18px 50px rgba(0,0,0,.55)!important;--radius:24px!important;--k-gold:#f59e0b;--k-gold2:#fbbf24;--k-lotus:#d946ef;--k-lotus2:#e879f9;--k-peacock:#0d3b7a;--k-peacock2:#1464b8;--k-cyan:#06b6d4;--k-cyan2:#22d3ee;--k-night:#050e2b;--k-midnight:#0a1a3e;--k-cream:#fef3c7;--k-glow:rgba(245,158,11,0.22)}body{background:radial-gradient(ellipse at 20%0,rgba(20,100,184,.3)0,transparent 50%),radial-gradient(ellipse at 80% 10%,rgba(217,70,239,.22)0,transparent 42%),radial-gradient(ellipse at 50% 100%,rgba(245,158,11,.12)0,transparent 55%),radial-gradient(ellipse at 5% 80%,rgba(6,182,212,.15)0,transparent 40%),#050e2b!important;color:var(--text)!important}body.dark{--bg:#03091c!important;--card:#060f26!important}.topbar{background:linear-gradient(135deg,rgba(5,14,43,.94)0,rgba(10,26,62,.94) 60%,rgba(13,59,122,.9) 100%)!important;border-bottom:1px solid rgba(245,158,11,.22)!important;backdrop-filter:blur(20px)!important;box-shadow:0 4px 28px rgba(245,158,11,.08),0 1px 0 rgba(245,158,11,.14) inset!important}body.dark .topbar{background:linear-gradient(135deg,rgba(3,9,28,.96)0,rgba(6,15,38,.96) 60%,rgba(13,59,122,.92) 100%)!important}.brand img{background:#060f26!important;box-shadow:0 0 0 2px rgba(245,158,11,.35),0 8px 24px rgba(245,158,11,.2)!important;border-radius:16px!important;padding:3px!important}.brand h1{background:linear-gradient(135deg,#f59e0b 0,#fbbf24 40%,#d946ef 80%,#e879f9 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;letter-spacing:.14em!important}.brand .tag{color:#fbbf24!important}.card{background:linear-gradient(160deg,rgba(10,26,62,.96)0,rgba(8,20,50,.98) 100%)!important;border:1px solid rgba(245,158,11,.16)!important;box-shadow:0 12px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04)!important}.card:hover{border-color:rgba(245,158,11,.28)!important}button{background:linear-gradient(135deg,#f59e0b,#fbbf24)!important;color:#030920!important;font-weight:900!important;box-shadow:0 4px 14px rgba(245,158,11,.3)!important}button:hover{filter:brightness(1.12)!important;box-shadow:0 6px 20px rgba(245,158,11,.42)!important}button.ghost{background:0 0!important;color:var(--text)!important;border:1px solid rgba(245,158,11,.3)!important;box-shadow:none!important}button.ghost:hover{border-color:rgba(245,158,11,.6)!important;color:#fbbf24!important}button.ok{background:linear-gradient(135deg,#d946ef,#e879f9)!important;color:#fff!important;box-shadow:0 4px 14px rgba(217,70,239,.3)!important}button.soft{background:rgba(245,158,11,.12)!important;color:#fbbf24!important;box-shadow:none!important}button.danger{background:#ef4444!important;color:#fff!important;box-shadow:0 4px 14px rgba(239,68,68,.25)!important}input,textarea,select{background:rgba(5,14,43,.8)!important;border:1px solid rgba(245,158,11,.22)!important;color:#f0e6ff!important;caret-color:#fbbf24!important}input:focus,textarea:focus,select:focus{border-color:rgba(245,158,11,.7)!important;box-shadow:0 0 0 3px rgba(245,158,11,.16)!important;outline:0!important}input::placeholder,textarea::placeholder{color:rgba(139,164,212,.55)!important}.menu button{background:0 0!important;color:#c8d8f0!important;box-shadow:none!important}.menu button:hover,.menu button.active{background:rgba(245,158,11,.12)!important;color:#fbbf24!important;box-shadow:none!important}.navlinks a{color:#8ba4d4!important}.navlinks a:hover{color:#fbbf24!important}.authHero{background:radial-gradient(circle at 30% 15%,rgba(217,70,239,.38)0,transparent 32%),radial-gradient(circle at 75% 5%,rgba(245,158,11,.3)0,transparent 24%),radial-gradient(circle at 10% 70%,rgba(6,182,212,.25)0,transparent 30%),radial-gradient(circle at 88% 85%,rgba(20,100,184,.5)0,transparent 28%),linear-gradient(160deg,#050e2b 0,#0a1a3e 45%,#0d3b7a 100%)!important;border:1px solid rgba(245,158,11,.22)!important;box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 0 60px rgba(217,70,239,.06)!important}.authBox{background:linear-gradient(170deg,rgba(10,26,62,.98)0,rgba(7,18,48,.99) 55%,rgba(13,59,122,.9) 100%)!important;border:1px solid rgba(245,158,11,.28)!important;box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(245,158,11,.12)!important}.authBox label{color:#b8ccee!important}.authBox input{background:rgba(5,14,43,.88)!important;border:1px solid rgba(100,160,255,.22)!important;color:#f0e6ff!important}.authBox input:focus{border-color:rgba(245,158,11,.65)!important;box-shadow:0 0 0 3px rgba(245,158,11,.18)!important}.authBox input::placeholder{color:rgba(139,164,212,.5)!important}#loginBtn,#registerBtn{background:linear-gradient(135deg,#f59e0b 0,#fbbf24 50%,#d946ef 100%)!important;color:#030920!important;font-weight:900!important;box-shadow:0 6px 24px rgba(245,158,11,.38)!important;border:0!important}#loginBtn:hover,#registerBtn:hover{filter:brightness(1.1)!important;box-shadow:0 8px 32px rgba(245,158,11,.52)!important}.tabs{background:rgba(5,14,43,.7)!important;border:1px solid rgba(245,158,11,.15)!important;border-radius:999px!important}.tab{color:#8ba4d4!important;background:0 0!important;box-shadow:none!important}.tab.active{background:linear-gradient(135deg,rgba(245,158,11,.22),rgba(217,70,239,.16))!important;color:#fbbf24!important;box-shadow:0 0 0 1px rgba(245,158,11,.35)!important}.reactionBar button{background:0 0!important;color:#8ba4d4!important;box-shadow:none!important}.reactionBar button.active{background:rgba(245,158,11,.14)!important;color:#fbbf24!important}.post{background:linear-gradient(160deg,rgba(10,26,62,.97)0,rgba(8,20,50,.99) 100%)!important;border:1px solid rgba(245,158,11,.14)!important}.bubble{background:rgba(5,14,43,.7)!important}.health{background:rgba(245,158,11,.14)!important;color:#fbbf24!important}.did{background:rgba(245,158,11,.07)!important;border:1px solid rgba(245,158,11,.15)!important;color:#b8ccee!important}.avatar{background:linear-gradient(135deg,#f59e0b,#d946ef)!important}.privacyMeter span{background:linear-gradient(90deg,#fbbf24,#d946ef)!important}.toast{background:#0a1a3e!important;border:1px solid rgba(245,158,11,.3)!important}.empty{border-color:rgba(245,158,11,.2)!important;color:#8ba4d4!important}.modal{background:#0a1a3e!important;border:1px solid rgba(245,158,11,.22)!important}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:rgba(5,14,43,.6)}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#f59e0b,#d946ef);border-radius:99px}::selection{background:rgba(245,158,11,.3);color:#fff}@keyframes k-aurora{0%{opacity:.55;transform:scale(1) rotate(0deg)}33%{opacity:.8;transform:scale(1.06) rotate(2deg)}66%{opacity:.6;transform:scale(.97) rotate(-1.5deg)}to{opacity:.55;transform:scale(1) rotate(0deg)}}.authHero::before{animation:k-aurora 7s ease-in-out infinite!important}@keyframes k-marigold{0%,to{box-shadow:0 0 0 2px rgba(245,158,11,.35),0 8px 24px rgba(245,158,11,.2)}50%{box-shadow:0 0 0 3px rgba(245,158,11,.55),0 8px 28px rgba(245,158,11,.38),0 0 36px rgba(245,158,11,.12)}}.brand img{animation:k-marigold 3s ease-in-out infinite!important}.heroTitle{background:linear-gradient(135deg,#fbbf24 0,#f59e0b 30%,#e879f9 70%,#d946ef 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;text-shadow:none!important}.heroTagline .space{color:#22d3ee!important}.heroTagline .people{color:#e879f9!important}.heroBadge{background:rgba(245,158,11,.14)!important;border:1px solid rgba(245,158,11,.35)!important;color:#fbbf24!important}.heroPill{background:rgba(5,14,43,.7)!important;border:1px solid rgba(245,158,11,.18)!important;color:#d8e8ff!important}.heroCard{background:rgba(5,14,43,.7)!important;border:1px solid rgba(245,158,11,.16)!important}.heroCard .icon{background:rgba(245,158,11,.16)!important}.heroCard:nth-child(2) .icon{background:rgba(217,70,239,.18)!important}.heroCard:nth-child(3) .icon{background:rgba(6,182,212,.18)!important}.heroFooter{background:rgba(5,14,43,.6)!important;border:1px solid rgba(245,158,11,.16)!important}.heroLogo{background:rgba(3,9,28,.88)!important;border:1px solid rgba(245,158,11,.4)!important;box-shadow:0 0 0 1px rgba(217,70,239,.2) inset,0 16px 54px rgba(0,0,0,.5),0 0 44px rgba(245,158,11,.18)!important}.person{background:linear-gradient(160deg,rgba(10,26,62,.8)0,rgba(5,14,43,.92) 100%)!important;border:1px solid rgba(245,158,11,.14)!important}.composer{border:1px solid rgba(245,158,11,.14)!important}.stat{border-color:rgba(245,158,11,.16)!important}body.native-apk .topbar{background:linear-gradient(135deg,#050e2b,#0d3b7a)!important;box-shadow:0 6px 20px rgba(245,158,11,.18)!important}body.native-apk.milan-android-polish .topbar{background:linear-gradient(135deg,#050e2b,#0d3b7a)!important}body.native-apk .auth{background:linear-gradient(180deg,#050e2b 0,#0d3b7a 42%,#050e2b 42%)!important}body>.milan-container{background:rgba(10,26,62,.3)!important;backdrop-filter:blur(4px)!important}.hero-panel{background:linear-gradient(160deg,rgba(10,26,62,.98)0,rgba(8,20,50,.99) 100%)!important;border:1px solid rgba(245,158,11,.22)!important;color:#f0e6ff!important}.hero-panel .hero-title{background:linear-gradient(135deg,#fbbf24 0,#f59e0b 35%,#e879f9 75%,#d946ef 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}.hero-panel .feature-icon{background:rgba(245,158,11,.14)!important}.hero-panel .feature-text h4{color:#f0e6ff!important}.hero-panel .feature-text p{color:#8ba4d4!important}.hero-panel .security-footer{background:rgba(5,14,43,.7)!important;border:1px solid rgba(245,158,11,.25)!important}.hero-panel .milan-badge{background:rgba(245,158,11,.14)!important;color:#fbbf24!important;border:1px solid rgba(245,158,11,.3)!important}.login-card{background:linear-gradient(170deg,rgba(10,26,62,.98)0,rgba(13,59,122,.9) 100%)!important;border:1px solid rgba(245,158,11,.28)!important;box-shadow:0 25px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(245,158,11,.1)!important}.logo-center h2{background:linear-gradient(135deg,#f59e0b,#fbbf24,#d946ef)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}.card-header h3{color:#f0e6ff!important}.card-header p{color:#8ba4d4!important}.tabs{background:rgba(5,14,43,.7)!important}.tab{color:#8ba4d4!important}.tab.active{background:linear-gradient(135deg,rgba(245,158,11,.22),rgba(217,70,239,.16))!important;color:#fbbf24!important;box-shadow:0 0 0 1px rgba(245,158,11,.35)!important}.input-field{background:rgba(5,14,43,.85)!important;border:1px solid rgba(100,160,255,.22)!important;color:#f0e6ff!important}.input-field:focus{border-color:rgba(245,158,11,.65)!important;box-shadow:0 0 0 3px rgba(245,158,11,.16)!important}.input-label{color:#b8ccee!important}.login-button{background:linear-gradient(135deg,#f59e0b 0,#fbbf24 50%,#d946ef 100%)!important;color:#030920!important;font-weight:900!important;box-shadow:0 6px 24px rgba(245,158,11,.38)!important;border:0!important}.login-button:hover{opacity:1!important;filter:brightness(1.1)!important;box-shadow:0 8px 32px rgba(245,158,11,.52)!important}.did-button{background:rgba(5,14,43,.7)!important;border:1px solid rgba(245,158,11,.25)!important;color:#c8d8f0!important}.did-button:hover{background:rgba(245,158,11,.1)!important;border-color:rgba(245,158,11,.5)!important;color:#fbbf24!important}.did-badge{background:linear-gradient(135deg,#f59e0b,#d946ef)!important;color:#030920!important}.forgot-link{color:#fbbf24!important}.register-link a{color:#fbbf24!important}.checkbox{color:#8ba4d4!important}body>.milan-container{background:radial-gradient(ellipse at 20%0,rgba(20,100,184,.3)0,transparent 50%),radial-gradient(ellipse at 80% 10%,rgba(217,70,239,.22)0,transparent 42%),radial-gradient(ellipse at 50% 100%,rgba(245,158,11,.12)0,transparent 55%),#050e2b!important}@keyframes k-float-orb{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.04)}}.authHero::after{background:radial-gradient(circle,rgba(245,158,11,.4)0,rgba(6,182,212,.2) 40%,transparent 68%)!important;animation:k-float-orb 8s ease-in-out infinite!important}.auth-msg{color:#f87171!important}@keyframes k-spin-ring{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}.heroLogo::after{content:"";position:absolute;inset:-4px;border-radius:32px;background:conic-gradient(#f59e0b 0deg 60deg,transparent 60deg 120deg,#d946ef 120deg 180deg,transparent 180deg 240deg,#06b6d4 240deg 300deg,transparent 300deg 360deg);z-index:-1;animation:k-spin-ring 4s linear infinite;opacity:.7}@keyframes k-scroll-glow{0%,to{background:linear-gradient(180deg,#f59e0b,#d946ef)}50%{background:linear-gradient(180deg,#d946ef,#06b6d4)}}::-webkit-scrollbar-thumb{animation:k-scroll-glow 4s ease-in-out infinite}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Premium entrance + micro-interactions (login/register) */
@keyframes milanRise{0%{opacity:0;transform:translateY(18px) scale(.985)}100%{opacity:1;transform:none}}
.milan-container{animation:milanRise .6s cubic-bezier(.16,.84,.44,1) both}
.login-card{animation:milanRise .7s cubic-bezier(.16,.84,.44,1) .08s both}
.logo-center img{transition:transform .4s cubic-bezier(.16,.84,.44,1)}
.logo-center img:hover{transform:scale(1.06) rotate(-3deg)}
.input-field{transition:border-color .2s,box-shadow .25s,background .2s!important}
.input-field:focus{transform:translateZ(0)}
.login-button,.did-button{transition:transform .12s cubic-bezier(.16,.84,.44,1),box-shadow .25s,filter .2s!important}
.login-button:active{transform:scale(.97)}
.login-button{position:relative;overflow:hidden}
.login-button::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s}
.login-button:hover::after{left:140%}
.feature-item{transition:transform .25s}
.feature-item:hover{transform:translateX(4px)}
.feature-icon{transition:transform .3s,box-shadow .3s}
.feature-item:hover .feature-icon{transform:scale(1.08);box-shadow:0 6px 18px rgba(245,158,11,.25)}
.tab{transition:all .2s cubic-bezier(.16,.84,.44,1)!important}
@media (prefers-reduced-motion:reduce){.milan-container,.login-card{animation:none}}

:root{
  --milan-bg:#07101f;
  --milan-card:rgba(12,23,40,.92);
  --milan-border:rgba(255,255,255,.09);
  --milan-text:#f7f9fc;
  --milan-muted:#9aa7ba;
  --milan-accent:#6d8cff;
}
html,body{
  background:var(--milan-bg);
  color:var(--milan-text);
}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
#authView{
  min-height:100svh;
}
#loginBox,#registerBox{
  background:var(--milan-card);
  border:1px solid var(--milan-border);
  border-radius:22px;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
  backdrop-filter:blur(10px);
}
#loginBox h1,#registerBox h1,
#loginBox h2,#registerBox h2{
  font-weight:800;
  letter-spacing:-.03em;
}
#loginBox p,#registerBox p{
  color:var(--milan-muted);
}
#loginBox input,#registerBox input{
  background:rgba(255,255,255,.035);
  border:1px solid var(--milan-border);
  color:var(--milan-text);
  border-radius:12px;
}
#loginBtn,#registerBtn{
  font-weight:800;
  border-radius:12px;
  min-height:46px;
  transition:transform .14s ease,opacity .14s ease;
}
#loginBtn:hover,#registerBtn:hover{
  transform:translateY(-1px);
}
.tab{
  font-weight:700;
}
#authMsg{
  font-weight:600;
}
@media (prefers-reduced-motion:reduce){
  #loginBtn,#registerBtn{transition:none}
}

body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-size:200px 200px}@keyframes milan-aurora-login{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.milan-login-aurora{position:relative;overflow:hidden}.milan-login-aurora::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:linear-gradient(270deg,rgba(99,102,241,.22),rgba(139,92,246,.18),rgba(59,130,246,.14),rgba(16,185,129,.12),rgba(99,102,241,.22));background-size:400% 400%;animation:milan-aurora-login 10s ease infinite;border-radius:inherit}.milan-login-aurora>*{position:relative;z-index:1}#milan-did-gen{font-family:"Courier New",monospace;font-size:10px;color:#4ade80;letter-spacing:.05em;line-height:1.6;background:rgba(2,6,23,.6);padding:10px 12px;border-radius:10px;overflow:hidden;height:60px;margin-top:10px;display:none;word-break:break-all}input:focus{box-shadow:0 0 0 3px rgba(99,102,241,.25)!important;border-color:rgba(99,102,241,.5)!important}#milan-login-progress{height:3px;background:linear-gradient(90deg,#245dff,#7c3aed,#10b981);background-size:200% 100%;border-radius:999px;width:0%;transition:width .3s ease;margin-top:8px;animation:milan-progress-shift 1.5s linear infinite;display:none}@keyframes milan-progress-shift{0%{background-position:0 0}to{background-position:200%0}}

/* Compact the login so the WHOLE form (incl. OR + everything below) fits and
   is reachable on any screen size. Targets index.html's real classes. */
.milan-container { max-height: 100vh !important; gap: 1rem !important; align-items: stretch !important; }
.login-card { padding: 0.9rem 1.4rem !important; justify-content: flex-start !important; overflow-y: auto !important; max-height: 100% !important; }
.login-card::-webkit-scrollbar { width: 6px; }
.login-card::-webkit-scrollbar-thumb { background: rgba(245,158,11,.4); border-radius: 99px; }
.logo-center { zoom: 0.58 !important; margin: 0 0 2px !important; }
.card-header { margin: 0 0 6px !important; }
.tabs { margin: 4px 0 8px !important; }
.input-group { margin-bottom: 8px !important; }
.input-field { height: 42px !important; }


/* MILAN storage upgrade */
.milan-storage-upgrade{
  margin:18px 0 10px;
  padding:14px;
  border:1px solid rgba(245,158,11,.22);
  border-radius:16px;
  background:rgba(245,158,11,.055);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.milan-storage-upgrade-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:11px;
}
.milan-storage-upgrade-head strong{
  display:block;
  font-size:14px;
}
.milan-storage-upgrade-head span{
  display:block;
  margin-top:3px;
  font-size:11px;
  opacity:.68;
}
.milan-storage-current{
  padding:5px 8px;
  border-radius:999px;
  font-size:10px !important;
  font-weight:700;
  white-space:nowrap;
  color:#92400e;
  background:#fef3c7;
}
.milan-storage-plans{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.milan-storage-plan{
  border:1px solid rgba(148,163,184,.25);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  padding:11px 10px;
  cursor:pointer;
  color:inherit;
  text-align:left;
}
.milan-storage-plan strong{
  display:block;
  font-size:14px;
}
.milan-storage-plan span{
  display:block;
  margin-top:4px;
  font-size:12px;
  font-weight:700;
  opacity:.82;
}
.milan-storage-plan:hover{
  border-color:rgba(245,158,11,.5);
  transform:translateY(-1px);
}

.milan-payment-modal{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  padding:18px;
}
.milan-payment-modal.hidden{display:none}
.milan-payment-backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.76);
  backdrop-filter:blur(10px);
}
.milan-payment-card{
  position:relative;
  z-index:1;
  width:min(430px,100%);
  max-height:calc(100vh - 36px);
  overflow:auto;
  padding:24px;
  border:1px solid rgba(245,158,11,.24);
  border-radius:22px;
  background:#0b1224;
  color:#fff;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.milan-payment-close{
  position:absolute;
  top:9px;
  right:12px;
  border:0;
  background:transparent;
  color:#fff;
  font-size:28px;
  cursor:pointer;
}
.milan-payment-brand{
  font-size:10px;
  letter-spacing:.14em;
  font-weight:800;
  opacity:.55;
}
.milan-payment-card h3{
  margin:6px 0 2px;
}
.milan-payment-card > p{
  margin:0 0 16px;
  font-size:13px;
  opacity:.75;
}
.milan-payment-qr-wrap{
  display:flex;
  justify-content:center;
  padding:12px;
  border-radius:18px;
  background:#fff;
}
.milan-payment-qr{
  width:min(250px,72vw);
  aspect-ratio:1;
  object-fit:contain;
  display:block;
}
.milan-payment-instruction{
  display:grid;
  gap:3px;
  margin:13px 0;
  font-size:12px;
}
.milan-payment-instruction span{opacity:.65}
.milan-payment-fields{
  display:grid;
  gap:10px;
}
.milan-payment-fields label{
  display:grid;
  gap:6px;
  font-size:12px;
}
.milan-payment-fields input{
  width:100%;
  box-sizing:border-box;
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(255,255,255,.05);
  color:#fff;
}
.milan-payment-submit{
  border:0;
  border-radius:11px;
  padding:12px;
  font-weight:800;
  cursor:pointer;
  background:linear-gradient(135deg,#f59e0b,#fbbf24,#d946ef);
  color:#111827;
}
.milan-payment-status{
  min-height:18px;
  margin-top:8px;
  font-size:12px;
}
@media(max-width:560px){
  .milan-storage-upgrade-head{align-items:flex-start}
  .milan-storage-plans{grid-template-columns:1fr 1fr}
  .milan-payment-card{padding:20px}
}

/* MILAN storage upgrade card: whole card is clickable */
a.milan-storage-upgrade{
  display:block;
  text-decoration:none !important;
  color:inherit !important;
  cursor:pointer;
  position:relative;
  z-index:5;
}
a.milan-storage-upgrade:hover{transform:translateY(-1px)}
a.milan-storage-upgrade:active{transform:translateY(0)}
a.milan-storage-upgrade .milan-storage-plan{cursor:pointer}

/* MILAN storage upgrade — primary login CTA */
.milan-storage-top-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  margin:14px 0 12px;
  padding:14px 15px;
  border:1px solid rgba(245,158,11,.26);
  border-radius:15px;
  background:
    linear-gradient(135deg,rgba(245,158,11,.11),rgba(217,70,239,.09)),
    rgba(7,17,31,.38);
  box-shadow:0 10px 28px rgba(0,0,0,.12);
}
.milan-storage-top-copy{
  min-width:0;
  display:grid;
  gap:3px;
}
.milan-storage-top-kicker{
  font-size:9px;
  font-weight:900;
  letter-spacing:.13em;
  color:#fbbf24;
}
.milan-storage-top-copy strong{
  color:#f8fafc;
  font-size:14px;
  line-height:1.2;
}
.milan-storage-top-copy small{
  color:#94a3b8;
  font-size:10px;
  line-height:1.4;
}
.milan-storage-top-button{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:40px;
  padding:10px 14px;
  border-radius:11px;
  color:#111827 !important;
  background:linear-gradient(135deg,#f59e0b,#fbbf24,#d946ef);
  font-size:11px;
  font-weight:900;
  text-decoration:none !important;
  box-shadow:0 7px 20px rgba(245,158,11,.16);
}
.milan-storage-top-button span{font-size:14px}
@media(max-width:620px){
  .milan-storage-top-cta{
    flex-direction:column;
    align-items:stretch;
  }
  .milan-storage-top-button{width:100%}
}

.milan-storage-footer-link{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 13px;
  border-radius:10px;
  background:linear-gradient(135deg,#f59e0b,#fbbf24,#d946ef);
  color:#111827 !important;
  font-size:10px;
  font-weight:900;
  text-decoration:none !important;
}

.auth-value{
  margin:12px 0 16px;
  padding:12px 14px;
  border:1px solid rgba(245,158,11,.18);
  border-radius:12px;
  background:rgba(245,158,11,.05);
  text-align:center;
}
.auth-value strong{
  display:block;
  font-size:13px;
  line-height:1.35;
  color:#f8fafc;
  margin-bottom:4px;
}
.auth-value span{
  display:block;
  font-size:11px;
  line-height:1.5;
  color:#94a3b8;
}



@media (max-width:780px){.desktop-hero{display:none!important}}

@media (max-width:780px){.hero-panel{display:none!important}}

@media (min-width:781px){
  html,body{overflow:auto;position:static;min-height:100%;height:auto}
  body{min-height:100vh}
  .milan-container{
    max-height:none!important;
    height:auto!important;
    min-height:0!important;
    align-items:stretch!important;
  }
  .login-card{
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    overflow:visible!important;
    justify-content:center!important;
  }
}
@media (min-width:781px){
  .hero-panel .security-footer{
    margin-top:.45rem!important;
    margin-bottom:.45rem!important;
    padding:.7rem .9rem!important;
  }
  .hero-panel .feature-grid{
    margin-top:.45rem!important;
  }
}


/* =========================================================
   MILAN LOGIN — RESPONSIVE TARGET
   Desktop / Tablet / Mobile
   ========================================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  width:100%;
  min-height:100%;
  margin:0;
  padding:0;
}

body{
  background:
    radial-gradient(circle at 8% 15%, rgba(55,75,190,.22), transparent 30%),
    radial-gradient(circle at 90% 20%, rgba(165,70,210,.17), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(20,130,220,.10), transparent 35%),
    #050a20;
}

/* ---------- DESKTOP ---------- */

@media (min-width:1101px){
  #root{
    width:100vw;
    min-height:100vh;
    padding:24px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .milan-container{
    width:min(1440px,100%);
    height:min(820px,calc(100vh - 48px));
    min-height:640px;
    margin:0 auto;
    padding:12px;
    display:grid;
    grid-template-columns:minmax(0,1.22fr) minmax(420px,.78fr);
    gap:20px;
    overflow:hidden;
    border-radius:32px;
  }

  .hero-panel{
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    padding:42px;
    border-radius:26px;
    overflow:auto;
  }

  .hero-title{
    max-width:820px;
    font-size:clamp(2.7rem,3.4vw,4.15rem);
    line-height:1.05;
  }

  .feature-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
  }

  .login-card{
    width:100%;
    height:100%;
    min-width:0;
    padding:38px 38px;
    border-radius:26px;
    overflow:auto;
    justify-content:center;
  }

  .logo-center img{
    width:72px;
    height:72px;
  }

  .login-card h1,
  .login-card .card-title{
    font-size:1.75rem;
  }

  .auth-input,
  .auth-value,
  .login-card input{
    min-height:50px;
  }

  .login-card button{
    min-height:50px;
  }
}

/* ---------- TABLET ---------- */

@media (min-width:781px) and (max-width:1100px){
  #root{
    width:100vw;
    min-height:100vh;
    padding:18px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .milan-container{
    width:100%;
    height:min(760px,calc(100vh - 36px));
    min-height:580px;
    margin:0 auto;
    padding:10px;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(370px,.95fr);
    gap:14px;
    overflow:hidden;
    border-radius:28px;
  }

  .hero-panel{
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    padding:30px;
    border-radius:22px;
    overflow:auto;
  }

  .hero-title{
    max-width:620px;
    font-size:clamp(2.15rem,4.2vw,3.25rem);
    line-height:1.06;
  }

  .feature-grid{
    grid-template-columns:1fr;
    gap:10px;
  }

  .login-card{
    width:100%;
    height:100%;
    min-width:0;
    padding:28px 26px;
    border-radius:22px;
    overflow:auto;
    justify-content:center;
  }

  .logo-center img{
    width:64px;
    height:64px;
  }

  .login-card h1,
  .login-card .card-title{
    font-size:1.5rem;
  }

  .auth-input,
  .auth-value,
  .login-card input{
    min-height:48px;
  }

  .login-card button{
    min-height:48px;
  }
}

/* ---------- MOBILE ---------- */

@media (max-width:780px){
  html,
  body{
    width:100%;
    min-width:100%;
    min-height:100%;
    overflow-x:hidden;
  }

  body{
    background:
      radial-gradient(circle at 50% 0%, rgba(65,80,190,.24), transparent 38%),
      #050a20;
  }

  #root{
    width:100%;
    min-height:100vh;
    padding:12px;
    display:flex;
    align-items:stretch;
    justify-content:center;
  }

  .milan-container{
    width:100%;
    min-height:calc(100vh - 24px);
    margin:0;
    padding:0;
    display:block;
    border-radius:22px;
    overflow:visible;
    background:transparent;
  }

  .hero-panel{
    display:none !important;
  }

  .login-card{
    width:100%;
    min-height:calc(100vh - 24px);
    margin:0;
    padding:28px 20px 24px;
    border-radius:22px;
    overflow:visible;
    justify-content:flex-start;
  }

  .logo-center{
    margin-bottom:10px;
  }

  .logo-center img{
    width:62px;
    height:62px;
  }

  .login-card h1,
  .login-card .card-title{
    font-size:1.42rem;
    line-height:1.2;
  }

  .auth-input,
  .auth-value,
  .login-card input{
    width:100%;
    min-height:48px;
    font-size:16px;
  }

  .login-card button{
    width:100%;
    min-height:48px;
    font-size:15px;
  }

  .auth-tabs{
    width:100%;
  }

  .auth-tabs button{
    flex:1 1 0;
  }

  .security-footer{
    margin-top:18px;
  }
}

/* ---------- SMALL PHONES ---------- */

@media (max-width:390px){
  #root{
    padding:8px;
  }

  .milan-container{
    min-height:calc(100vh - 16px);
  }

  .login-card{
    min-height:calc(100vh - 16px);
    padding:22px 16px 18px;
    border-radius:18px;
  }

  .logo-center img{
    width:56px;
    height:56px;
  }

  .login-card h1,
  .login-card .card-title{
    font-size:1.3rem;
  }

  .feature-item{
    padding:12px;
  }

  .security-footer{
    font-size:.78rem;
  }
}

/* =========================================================
   MILAN LOGIN — FINAL VISUAL POLISH
   ========================================================= */

.milan-container,
.hero-panel,
.login-card{
  box-sizing:border-box;
}

.milan-container{
  isolation:isolate;
}

.hero-panel{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.login-card{
  position:relative;
  display:flex;
  flex-direction:column;
}

.hero-title{
  letter-spacing:-.035em;
  text-wrap:balance;
}

.hero-panel p,
.hero-panel .hero-subtitle{
  max-width:720px;
  line-height:1.6;
}

.feature-item{
  min-width:0;
}

.feature-item *{
  max-width:100%;
}

.login-card > *{
  max-width:100%;
}

.login-card input,
.login-card button,
.auth-input,
.auth-value{
  box-sizing:border-box;
}

.login-card input{
  min-width:0;
}

@media (min-width:1101px){
  .milan-container{
    grid-template-columns:minmax(0,1.2fr) minmax(430px,.8fr) !important;
  }

  .hero-panel{
    padding:44px 46px !important;
  }

  .login-card{
    padding:40px 42px !important;
  }
}

@media (min-width:781px) and (max-width:1100px){
  .milan-container{
    grid-template-columns:minmax(0,1.04fr) minmax(380px,.96fr) !important;
  }

  .hero-panel{
    padding:28px !important;
  }

  .login-card{
    padding:28px 26px !important;
  }
}

@media (max-width:780px){
  .login-card{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }

  .login-card input,
  .login-card button,
  .auth-input,
  .auth-value{
    width:100% !important;
  }

  .login-card form,
  .auth-form,
  .login-form{
    width:100%;
    max-width:100%;
  }
}

@media (max-width:390px){
  .login-card{
    padding-left:15px !important;
    padding-right:15px !important;
  }
}


/* =========================================================
   MILAN — WINDOWS CHROME DESKTOP
   100% VIEWPORT / NO SCROLL / SINGLE AUTHORITATIVE BLOCK
   ========================================================= */

@media (min-width:1101px){
  html,
  body{
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    overflow-x:hidden !important;
    overflow-y:hidden !important;
  }

  #root{
    width:100vw !important;
    height:100vh !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }

  .milan-container{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:12px !important;
    overflow:hidden !important;
    display:grid !important;
    grid-template-columns:minmax(0,1.2fr) minmax(430px,.8fr) !important;
    gap:20px !important;
  }

  .hero-panel,
  .login-card{
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:100% !important;
    max-height:100% !important;
    overflow:hidden !important;
  }
}

/* LOGIN VIEWPORT SCROLL FIX */
html,body{width:100%;height:100%;margin:0!important;overflow:hidden!important}body{min-height:0!important}#root{width:100%;height:100%;min-height:0!important;max-height:100dvh!important;overflow:hidden!important}

/* DESKTOP LOGIN CARD SCROLL LOCK */
@media (min-width:781px){html,body{overflow:hidden!important;height:100
/* DESKTOP LOGIN CARD SCROLL LOCK */
@media (min-width:781px){
  html,body{overflow:hidden!important;height:100%!important;min-height:0!important}
  .milan-container{height:calc(100vh - 24px)!important;max-height:calc(100vh - 24px)!important;overflow:hidden!important}
  .hero-panel,.login-card{height:100%!important;min-height:0!important;max-height:none!important;overflow:hidden!important}
}

/* FINAL DESKTOP NO-SCROLL LOCK */
@media (min-width:781px){
  html,body{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    overflow:hidden!important;
    position:fixed!important;
    inset:0!important;
  }
  body{padding:0!important}
  .milan-container{
    width:calc(100% - 24px)!important;
    height:calc(100% - 24px)!important;
    max-height:calc(100% - 24px)!important;
    margin:12px!important;
    overflow:hidden!important;
  }
  .hero-panel,.login-card{
    height:100%!important;
    max-height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }
}

/* FINAL APP HEIGHT FIX */
@media (min-width:781px){
  .app{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    overflow:hidden!important;
  }
}

/* WINDOWS CHROME DESKTOP — ABSOLUTE NO SCROLL */
@media (min-width:1101px){
  html,
  body{
    overflow:clip!important;
    overflow-x:clip!important;
    overflow-y:clip!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
  }

  .app,
  .milan-container{
    overflow:clip!important;
    overflow-x:clip!important;
    overflow-y:clip!important;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar{
    display:none!important;
    width:0!important;
    height:0!important;
  }
}

/* WINDOWS CHROME DESKTOP — PREMIUM FIT PASS 01 */
@media (min-width:1101px){
  .milan-container{
    height:calc(100vh - 28px)!important;
    max-height:calc(100vh - 28px)!important;
    padding:12px!important;
    gap:20px!important;
  }

  .hero-panel{
    padding:28px 30px 22px!important;
    border-radius:24px!important;
  }

  .hero-title{
    font-size:clamp(42px,4.4vw,58px)!important;
    line-height:.98!important;
    letter-spacing:-2.2px!important;
    margin-bottom:14px!important;
  }

  .hero-panel .milan-badge{
    margin-bottom:18px!important;
  }

  .feature-grid{
    gap:10px!important;
    margin:24px 0 18px!important;
  }

  .feature-item{
    padding:10px!important;
    border-radius:14px!important;
  }

  .feature-icon{
    width:32px!important;
    height:32px!important;
    margin-bottom:6px!important;
  }

  .feature-text h4{
    font-size:12px!important;
  }

  .feature-text p{
    font-size:10px!important;
    line-height:1.35!important;
  }

  .security-footer{
    padding:9px 11px!important;
    margin-top:10px!important;
  }

  .login-card{
    padding:20px 28px!important;
    border-radius:22px!important;
  }

  .logo-center{
    margin-bottom:6px!important;
  }

  .logo-center h2{
    font-size:1.65rem!important;
  }

  .card-header{
    margin-bottom:10px!important;
  }

  .card-header h3{
    font-size:1.35rem!important;
  }

  .tabs{
    margin-bottom:10px!important;
  }

  .input-group{
    margin-bottom:8px!important;
  }

  .input-field{
    min-height:40px!important;
    padding:9px 12px!important;
  }

  .options-row{
    margin:6px 0 9px!important;
  }

  .login-button,
  .did-button{
    min-height:40px!important;
    padding:9px 12px!important;
  }

  .divider{
    margin:10px 0!important;
  }

  .register-link{
    margin-top:6px!important;
  }
}

/* MILAN — WINDOWS CHROME PREMIUM UI PASS 02 */
@media (min-width:1101px){
  .milan-container{
    grid-template-columns:minmax(0,1.18fr) minmax(400px,430px)!important;
    gap:26px!important;
    background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.02))!important;
    border:1px solid rgba(255,255,255,.08)!important;
    box-shadow:0 30px 90px rgba(0,0,0,.55)!important;
  }

  .hero-panel{
    position:relative!important;
    padding:34px 34px 24px!important;
    background:
      radial-gradient(circle at 15% 12%,rgba(124,58,237,.16),transparent 28%),
      radial-gradient(circle at 85% 82%,rgba(217,70,239,.10),transparent 25%),
      linear-gradient(145deg,#0c0c12,#09090d)!important;
    border:1px solid rgba(255,255,255,.07)!important;
  }

  .hero-panel::after{
    content:"";
    position:absolute;
    top:18px;
    right:18px;
    width:80px;
    height:80px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(167,139,250,.16),transparent 68%);
    pointer-events:none;
  }

  .hero-title{
    max-width:650px!important;
    font-size:clamp(50px,4.1vw,62px)!important;
    line-height:.94!important;
    letter-spacing:-2.8px!important;
  }

  .hero-panel .feature-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
  }

  .hero-panel .feature-item{
    min-height:96px!important;
    padding:12px 13px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important;
    border:1px solid rgba(255,255,255,.07)!important;
    transition:transform .18s ease,border-color .18s ease,background .18s ease!important;
  }

  .hero-panel .feature-item:hover{
    transform:translateY(-2px)!important;
    border-color:rgba(167,139,250,.24)!important;
    background:linear-gradient(145deg,rgba(167,139,250,.08),rgba(255,255,255,.02))!important;
  }

  .login-card{
    position:relative!important;
    padding:24px 28px 22px!important;
    background:
      radial-gradient(circle at 50% 0%,rgba(167,139,250,.10),transparent 34%),
      linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.025))!important;
    border:1px solid rgba(255,255,255,.11)!important;
    box-shadow:
      0 28px 80px rgba(0,0,0,.62),
      inset 0 1px 0 rgba(255,255,255,.09)!important;
  }

  .login-card::before{
    content:"";
    position:absolute;
    left:28px;
    right:28px;
    top:0;
    height:1px;
    background:linear-gradient(90deg,transparent,#a78bfa,#f472b6,transparent);
    opacity:.8;
  }

  .logo-center{
    margin-bottom:8px!important;
  }

  .logo-center img{
    width:58px!important;
    height:58px!important;
    border-radius:17px!important;
    margin-bottom:6px!important;
    box-shadow:0 10px 30px rgba(167,139,250,.22),0 0 0 1px rgba(255,255,255,.08)!important;
  }

  .logo-center h2{
    font-size:1.45rem!important;
    letter-spacing:.32em!important;
  }

  .card-header h3{
    font-size:1.55rem!important;
    letter-spacing:-.8px!important;
  }

  .card-header p{
    margin-top:5px!important;
    color:#858591!important;
  }

  .tabs{
    padding:3px!important;
    border:1px solid rgba(255,255,255,.07)!important;
    background:rgba(0,0,0,.28)!important;
  }

  .tab{
    padding:9px 12px!important;
    font-size:.84rem!important;
  }

  .input-label{
    color:#b2b2bd!important;
    letter-spacing:.1em!important;
  }

  .input-field{
    min-height:43px!important;
    background:rgba(0,0,0,.34)!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:12px!important;
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
  }

  .input-field:focus{
    background:rgba(0,0,0,.42)!important;
    border-color:rgba(167,139,250,.62)!important;
    box-shadow:0 0 0 3px rgba(167,139,250,.11)!important;
  }

  .login-button{
    min-height:44px!important;
    border-radius:12px!important;
    background:linear-gradient(100deg,#f59e0b 0%,#fbbf24 42%,#ec4899 100%)!important;
    color:#09090b!important;
    font-weight:800!important;
    letter-spacing:.01em!important;
    box-shadow:0 10px 26px rgba(236,72,153,.18)!important;
  }

  .login-button:hover{
    transform:translateY(-1px)!important;
    filter:brightness(1.06)!important;
  }

  .did-button{
    min-height:42px!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.025)!important;
    border:1px solid rgba(255,255,255,.10)!important;
    transition:background .18s ease,border-color .18s ease,transform .18s ease!important;
  }

  .did-button:hover{
    transform:translateY(-1px)!important;
    background:rgba(167,139,250,.07)!important;
    border-color:rgba(167,139,250,.3)!important;
  }

  .dwn-status{
    border-color:rgba(34,197,94,.13)!important;
    background:rgba(0,0,0,.26)!important;
  }
}

/* MOBILE — remove storage top card */
@media (max-width:780px){
  .milan-storage-top-cta{
    display:none !important;
  }
}

/* Password visibility control — Android Chrome/WebView safe */
.input-wrapper .eye-btn{
  position:absolute!important;
  right:4px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  padding:0!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  color:#94a3b8!important;
  font-size:1rem!important;
  font-weight:400!important;
  line-height:1!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  cursor:pointer!important;
  filter:none!important;
}

.input-wrapper .input-field{
  padding-right:3.2rem!important;
}

.input-wrapper .eye-btn:hover,
.input-wrapper .eye-btn:active,
.input-wrapper .eye-btn:focus{
  background:rgba(245,158,11,.08)!important;
  background-image:none!important;
  box-shadow:none!important;
  color:#fbbf24!important;
  filter:none!important;
  outline:none!important;
}

@media (max-width:780px){
  .input-wrapper .eye-btn{
    width:42px!important;
    height:42px!important;
  }
}

/* FINAL PASSWORD EYE FIX — prevent global button rules from expanding it */
#togglePasswordBtn{
  position:absolute!important;
  top:50%!important;
  right:6px!important;
  transform:translateY(-50%)!important;
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  flex:0 0 40px!important;
  flex-grow:0!important;
  flex-shrink:0!important;
  align-self:center!important;
  padding:0!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  border-radius:50%!important;
  box-shadow:none!important;
  color:#97a2bd!important;
  font-size:18px!important;
  line-height:1!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}

#togglePasswordBtn:hover,
#togglePasswordBtn:focus,
#togglePasswordBtn:active{
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  flex:0 0 40px!important;
  background:rgba(79,124,246,.12)!important;
  background-color:rgba(79,124,246,.12)!important;
  box-shadow:none!important;
  outline:none!important;
}

#loginPass{
  width:100%!important;
  padding-right:52px!important;
}


/* PASSWORD EYE ACCESSIBILITY + TOUCH */
#togglePasswordBtn{
  -webkit-tap-highlight-color:transparent!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  touch-action:manipulation!important;
}

/* DESKTOP: move auth value card to top */
@media (min-width:1101px){.hero-panel{justify-content:flex-start!important}.hero-panel>div:first-child{display:flex!important;flex-direction:column!important}.auth-value{order:-1!important}}