:root{
  --primary:#0d6efd;
  --ink:#0b1220;
  --muted:#64748b;
  --line:#e6ebf2;
  --card:#ffffff;
  --shadow:0 18px 50px rgba(10, 22, 70, .18);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  overflow-x:hidden;
}

/* Background */
body.uc-login{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background:#f6f8fc;
}

.uc-bg{
  min-height:100vh;
  position:relative;
  background-image:url('../login_images/joint-project-management-meeting-in-a-conference-r.jpg');
  background-size:cover;
  background-position:center;
}

.uc-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(246, 248, 252, .82);
  backdrop-filter: blur(7px);
}

.uc-bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 380px at 75% 40%, rgba(13, 110, 253, .10), transparent 60%),
    radial-gradient(700px 360px at 20% 70%, rgba(13, 110, 253, .07), transparent 60%);
}

/* Header */
.uc-header{
  position:relative;
  z-index:2;
  border-bottom:1px solid rgba(230, 235, 242, .9);
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
}

.uc-navbar{padding:14px 0;}

.uc-brand-logo{
  width:50px;
  height:50px;
  object-fit:contain;
}

.uc-brand-text{font-size:20px; letter-spacing:.2px;}

.uc-nav .nav-link{
  color:var(--muted) !important;
  font-weight:400;
  padding:.5rem 1rem;
}

.uc-nav .nav-link:hover{color:var(--ink) !important;}

.uc-active{color:var(--primary) !important; font-weight:500;}

.uc-btn-contact{
  background:#f1f4fa;
  border:1px solid var(--line);
  color:var(--primary);
  padding:.55rem 1rem;
  border-radius:10px;
}

.uc-btn-contact:hover{
  background:#eaf0ff;
  border-color:#d9e5ff;
  color:var(--primary);
}

/* Main */
.uc-main{
  position:relative;
  z-index:1;
  padding:56px 0 28px;
}

.uc-auth-wrap{
  min-height:calc(100vh - 88px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
}

.uc-card{
  width:520px;
  max-width:92vw;
  background:rgba(255,255,255,.92);
  border:1px solid #dbe7ff;
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:44px 42px 34px;
}

.uc-title{
  font-size:36px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 8px;
  color:var(--ink);
  text-align:center;
}

.uc-sub{
  margin:0 0 26px;
  color:var(--muted);
  text-align:center;
  font-size:16px;
}

.uc-form .form-group{margin-bottom:18px;}

.uc-label{
  font-size:14px;
  color:#1f2937;
  font-weight:400;
  margin-bottom:8px;
}

.uc-label-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:8px;
}

.uc-forgot{
  font-size:13px;
  font-weight:500;
  color:var(--primary);
  text-decoration:none;
}

.uc-forgot:hover{color:var(--primary); text-decoration:underline;}

.uc-input{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
  padding:0 12px;
  height:52px;
}

.uc-input:focus-within{
  border-color:rgba(13,110,253,.35);
  box-shadow:0 0 0 4px rgba(13,110,253,.12);
}

.uc-ic{
  color:#6b7280;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.uc-control{
  border:0 !important;
  outline:none !important;
  box-shadow:none !important;
  padding:0 !important;
  height:100%;
  font-size:15px;
  background:transparent !important;
}

.uc-control::placeholder{color:#9aa7bb;}

.uc-eye{
  border:0;
  background:transparent;
  padding:6px;
  margin-left:auto;
  color:#6b7280;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.uc-eye:hover{color:#374151;}

.btn-primary{background-color:var(--primary) !important; border-color:var(--primary) !important;}

.uc-login-btn{
  height:56px;
  border-radius:12px;
  font-size:16px;
  box-shadow:0 12px 24px rgba(13,110,253,.24);
  margin-top:10px;
}

.uc-arrow{font-size:20px; margin-left:10px; position:relative; top:1px;}

.uc-divider{
  margin:22px 0 14px;
  display:flex;
  align-items:center;
  gap:12px;
  color:#9aa7bb;
  font-size:12px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.uc-divider::before,
.uc-divider::after{
  content:"";
  height:1px;
  background:var(--line);
  flex:1;
}

.uc-divider span{white-space:nowrap;}

.uc-enterprise{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:14px;
}

.uc-enterprise-muted{color:var(--muted);}

.uc-enterprise-link{
  color:var(--primary);
  font-weight:500;
  text-decoration:none;
}

.uc-enterprise-link:hover{color:var(--primary); text-decoration:underline;}

.uc-footer{
  text-align:center;
  color:#97a3b6;
  font-size:12px;
  padding:8px 0 22px;
  position:relative;
  z-index:1;
}

/* Modal polish */
.uc-modal .modal-header{border-bottom:1px solid #eef2f7;}
.uc-modal .modal-title{font-weight:700;}

/* Responsive */
@media (max-width: 767.98px){
  .uc-navbar{padding:10px 0;}
  .uc-main{padding-top:36px;}
  .uc-card{padding:30px 22px 24px;}
  .uc-title{font-size:24px;}
  .uc-btn-contact{width:100%;}
  .uc-mobile-cta{padding:10px 0 2px;}
  .uc-nav .nav-link{padding-left:0; padding-right:0;}
}

/* =========================
   Forgot Password page extras
   - Uses same UI system as login
========================= */
.uc-fp-meta{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.uc-back{
  color:var(--primary);
  font-weight:500;
  text-decoration:none;
}

.uc-back:hover{
  color:var(--primary);
  text-decoration:underline;
}
