*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:var(--font-body);
  background:var(--bg-primary);
  color:var(--text-primary);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transition:background 0.4s,color 0.4s;
}
/* Global UDC watermark (theme.css) is redundant over the page's own
   background photo — suppress it on this page only. */
body::before{display:none;}

/* BACKGROUND IMAGE */
.login-bg{
  position:fixed;inset:0;
  background-image:url('../../../images/the_pearl.jpg');
  background-size:cover;
  background-position:center;
  opacity:0.28;
  pointer-events:none;z-index:0;
}
[data-theme="light"] .login-bg{opacity:1;}

/* SCROLL PROGRESS */
#scroll-progress{
  position:fixed;top:0;left:0;height:3px;
  background:linear-gradient(90deg,var(--accent-indigo),var(--accent-cyan));
  z-index:9999;width:100%;
  box-shadow:0 0 8px var(--accent-indigo);
}

/* THEME TOGGLE */
.btn-theme{
  position:fixed;top:20px;right:20px;z-index:100;
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--border-glass);
  background:var(--bg-glass);
  color:var(--text-secondary);font-size:16px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.btn-theme:hover{border-color:var(--accent-indigo);color:var(--text-primary);}
.btn-theme .material-symbols-outlined{font-size:20px;}

/* CARD */
.login-card{
  position:relative;z-index:10;
  width:100%;max-width:440px;
  margin:20px;
  background:var(--bg-card);
  border:1px solid var(--border-glass);
  border-radius:32px;
  padding:44px 40px;
  box-shadow:0 30px 80px rgba(0,0,0,0.35), 0 0 0 1px var(--border-glass);
  animation:cardIn 0.5s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes cardIn{
  from{opacity:0;transform:translateY(30px) scale(0.97);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
[data-theme="light"] .login-card{
  box-shadow:0 20px 60px rgba(79,70,229,0.12), 0 0 0 1px var(--border-glass);
}

/* LOGO */
.login-logo-wrap{
  display:flex;flex-direction:column;align-items:center;margin-bottom:10px;
}
.login-logo-mark{
  width:72px;height:72px;
  border-radius:18px;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.login-logo-mark img{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
}

/* HEADLINE */
.login-headline{
  font-family:var(--font-body);font-size:28px;font-weight:800;
  color:var(--text-primary);letter-spacing:-0.02em;
  margin-bottom:6px;
}
.login-sub{
  font-size:14px;color:var(--text-muted);margin-bottom:32px;line-height:1.5;
}

/* FIELDS */
.field-group{margin-bottom:16px;position:relative;}
.field-label{
  display:block;font-size:11px;font-weight:700;font-family:var(--font-body);
  color:var(--text-muted);letter-spacing:0.08em;text-transform:uppercase;
  margin-bottom:8px;
}
.field-wrap{
  position:relative;display:flex;align-items:center;
}
.field-icon{
  position:absolute;
  left:16px;
  color:var(--text-muted);
  font-size:18px;
  z-index:1;
  pointer-events:none;
}
.field-input{
  width:100%;height:52px;
  padding:0 16px 0 48px;
  background:var(--bg-glass);
  border:1px solid var(--border-glass);
  border-radius:16px;
  color:var(--text-primary);
  font-family:var(--font-body);font-size:14px;
  outline:none;
  transition:all 0.25s;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}
.field-input::placeholder{color:var(--text-muted);}
.field-input:focus{
  border-color:var(--accent-indigo);
  background:var(--bg-glass-hover);
  box-shadow:0 0 0 4px var(--glow-indigo);
}
.field-wrap:focus-within .field-icon{color:var(--accent-indigo);}

/* PASSWORD TOGGLE */
.pw-toggle{
  position:absolute;right:14px;
  background:none;border:none;cursor:pointer;
  color:var(--text-muted);
  padding:4px;border-radius:6px;
  transition:color 0.2s;z-index:2;
  display:flex;align-items:center;justify-content:center;
}
.pw-toggle:hover{color:var(--text-secondary);}
.pw-toggle .material-symbols-outlined{font-size:20px;}

/* ERROR */
#loginMessage{
  font-size:13px;font-weight:500;
  color:var(--accent-cyan);
  min-height:18px;margin-bottom:4px;
  transition:all 0.2s;
  text-align:center;
}
#loginMessage.error{color:#F87171;}
#loginMessage.success{color:#34D399;}

/* BUTTON */
.btn-login{
  width:100%;height:52px;
  border:none;border-radius:16px;cursor:pointer;
  background:linear-gradient(135deg,var(--accent-indigo),var(--accent-violet));
  color:white;
  font-family:var(--font-body);font-weight:700;font-size:15px;
  letter-spacing:0.01em;
  box-shadow:0 8px 30px var(--glow-indigo);
  transition:all 0.25s;
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:8px;
  position:relative;overflow:hidden;
}
.btn-login::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.1),transparent);
  opacity:0;transition:opacity 0.25s;
}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 14px 40px var(--glow-indigo);}
.btn-login:hover::before{opacity:1;}
.btn-login:active{transform:translateY(0);}
.btn-login:disabled{opacity:0.6;cursor:not-allowed;transform:none;}
/* Hidden by default until the username field passes checkEmailDomain() —
   see login.js. A real CSS rule (not inline style=), same convention as the
   project's other JS-toggled visibility (see CLAUDE.md). */
.login-btn-hidden{display:none;}
.btn-arrow{
  width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,0.2);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;
  transition:transform 0.2s;
}
.btn-login:hover .btn-arrow{transform:translateX(3px);}

@media(max-width:480px){
  .login-card{padding:36px 28px;border-radius:28px;}
  .login-headline{font-size:24px;}
}