/* Premium Login UI for MilkGuru */
:root{
  --bg-overlay: rgba(0,0,0,.65);
  --card-bg: rgba(255,255,255,0.06);
  --card-border: rgba(255,255,255,0.12);
  --primary-1: #57ea85; /* #2563eb -> #1d4ed8 gradient */
  --primary-2: #1d4ed8;
  --success: #10b981;
  --glass-radius: 25px;
  --glass-blur: 18px;
  --shadow: 0 12px 40px rgba(2,6,23,0.45);
  --soft-white: rgba(255,255,255,0.9);
}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:Inter,Segoe UI,Roboto,system-ui,-apple-system,"Noto Sans",sans-serif;margin:0;background:#0b1220;color:var(--soft-white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* Background full screen */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden}
.bg-img{height:100%;object-fit:cover;display:block;width:100%;filter:brightness(.4) contrast(1.0)}
.bg-overlay{position:fixed;inset:0;background:var(--bg-overlay);z-index:-1}

/* Centered login card */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px}
.card{width:400px;max-width:100%;border-radius:var(--glass-radius);backdrop-filter:blur(var(--glass-blur));background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));border:1px solid var(--card-border);box-shadow:var(--shadow);padding:28px;position:relative;overflow:hidden;transform:translateY(50px);opacity:0;animation:cardEnter .8s ease-out .1s forwards}
@keyframes cardEnter{to{transform:translateY(0);opacity:1}}

.brand-area{display:flex;align-items:center;flex-direction:column;gap:10px;margin-bottom:18px;text-align:center}
.brand-area .logo-wrapper{display:flex;justify-content:center;align-items:center;width:auto;padding:0}
.brand-area .logo{width:48px !important;height:48px !important;max-width:48px !important;max-height:48px !important;object-fit:contain;display:block;border-radius:12px;background:rgba(255,255,255,0.08);padding:0}
/* .logo{animation:logoFloat 4s ease-in-out infinite} */
@keyframes logoFloat{0%{transform:translateY(0)}50%{transform:translateY(-12px)}100%{transform:translateY(0)}}
.title{font-size:20px;margin:6px 0 0 0;color:var(--soft-white);font-weight:700}
.subtitle{margin:0;color:rgba(255,255,255,0.85);font-weight:600;font-size:14px}
.tagline{margin:3px 0 0 0;color:rgba(255,255,255,0.7);font-size:12px}

.form{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.field{display:flex;flex-direction:column;gap:6px}
.label-text{font-size:14px;color:rgba(255, 255, 255, 0.8)}
.password-field{position:relative;display:flex;align-items:center}
.password-field input{padding-right:45px;width:100%}
.password-toggle{position:absolute;right:12px;border:none;background:transparent;color:var(--soft-white);width:32px;height:32px;border-radius:32px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.password-toggle:hover{background:rgba(255,255,255,0.12);color:#fff}
input{padding:12px 14px;border-radius:14px;background:transparent;border:1px solid rgba(255,255,255,0.08);color:var(--soft-white);outline:none;font-size:15px;transition:box-shadow .18s ease,transform .12s ease}
input::placeholder{color:rgba(255,255,255,0.45)}
input:focus{box-shadow:0 0 15px rgba(255, 255, 255, 0.877);border-color:rgba(41, 223, 123, 0.596);transform:translateY(-1px)}

.actions{display:flex;align-items:center;justify-content:center;margin-top:12px}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 20px;border-radius:14px;border:none;cursor:pointer;font-weight:700;color:var(--soft-white);font-size:15px;user-select:none;transition:transform .12s ease,box-shadow .12s ease;width:auto}
.btn.primary{background:linear-gradient(90deg,var(--primary-1),var(--primary-2));box-shadow:0 6px 18px rgba(29,78,216,0.22)}
.btn.primary:hover{transform:translateY(-2px)}
.btn.primary:active{transform:scale(.98)}
.btn .spinner{display:none;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,0.2);border-top-color:var(--soft-white);animation:spin .9s linear infinite}
.btn.loading .spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

.remember-me{margin:8px 0;display:flex;align-items:center}
.remember-me label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;margin:0}
.remember-me input{cursor:pointer}

.links{margin-top:12px;text-align:center}
.links a{color:rgba(255,255,255,0.87);font-size:13px;text-decoration:none}
.links a:hover{text-decoration:underline}

/* Floating blurred circles */
.floating-blurs{position:absolute;inset:0;pointer-events:none}
.blur{position:absolute;border-radius:50%;filter:blur(100px);opacity:.25}
.blur-a{width:220px;height:220px;background:linear-gradient(45deg,#60a5fa,#34d399);left:-60px;top:-40px}
.blur-b{width:240px;height:240px;background:linear-gradient(45deg,#22c1c3,#60a5fa);right:-80px;bottom:-60px}
.blur-c{width:180px;height:180px;background:linear-gradient(45deg,#10b981,#60a5fa);left:20%;bottom:-90px}

/* Ripple effect element container */
.btn-ripple{position:relative;overflow:hidden}
.btn-ripple .ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,0.35);animation:rippleAnim .6s ease-out;pointer-events:none}
@keyframes rippleAnim{to{transform:scale(6);opacity:0}}

/* Milk can loading animation (used during login) */
.milkcan-icon{width:84px;height:84px;border-radius:12px;background:linear-gradient(90deg,var(--primary-1),var(--primary-2));display:flex;align-items:center;justify-content:center;color:white;font-size:48px;transition:all .3s ease}
.milkcan-loading{animation:milkcanBounce 1.2s ease-in-out infinite}
.milkcan-success{animation:milkcanSuccess .6s cubic-bezier(0.68, -0.55, 0.265, 1.55)}
@keyframes milkcanBounce{
  0%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-12px) scale(1.04)}
  100%{transform:translateY(0) scale(1)}
}
@keyframes milkcanSuccess{
  0%{transform:scale(1) rotate(0deg);opacity:1}
  50%{transform:scale(1.12) rotate(180deg)}
  100%{transform:scale(1) rotate(360deg);opacity:1}
}

.msg{margin-top:14px;text-align:center;font-size:14px;line-height:1.5}
.msg.error{color:#f87171}
.msg.success{color:#34d399}

/* Responsive */
@media (max-width:640px){
  .login-wrap{padding:20px}
  .card{width:100%;padding:22px}
  .title{font-size:18px}
  .subtitle,.tagline{font-size:13px}
  .btn{width:100%}
  .field input{font-size:15px}
}
@media (max-width:480px){
  .login-wrap{padding:16px}
  .card{padding:18px}
}

/* Accessibility / reduce motion */
@media (prefers-reduced-motion:reduce){
  .card{animation:none}
  .blur{filter:none}
}