/* === GLOBAL RESET === */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #0f1c24; /* dark blue */
  font-family: "Inter", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* === LOGIN LAYOUT CENTER === */
#layout-content.selected.no-navbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* === LOGO === */
#logo {
  width: 120px;
  height: auto;
  margin-bottom: 25px;
}

/* === LOGIN CARD === */
.propform {
  width: 340px;
  padding: 20px;
  background: #06131a;
  border-radius: 10px;
  box-shadow: 0 0 25px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Default RCube login form elements */
.propform input[type="text"],
.propform input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  background: #0d1c26;
  border: 1px solid #263640;
  color: #dfe9f1;
  outline: none;
  font-size: 14px;
}

.propform input[type="text"]::placeholder,
.propform input[type="password"]::placeholder {
  color: #8fa2ad;
}

/* GREEN LOGIN BUTTON */
.propform input[type="submit"],
.button.mainaction {
  background: #27c24c !important;
  color: white !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px !important;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .3px;
  font-size: 14px;
  transition: 0.2s;
}

.propform input[type="submit"]:hover,
.button.mainaction:hover {
  background: #22a140 !important;
}

/* REMOVE SUPPORT AREA */
#login-footer a,
#login-footer .support,
#login-footer .version,
#login-footer roundcube\:object {
  display: none !important;
}

/* === DISCORD SECTION BELOW CARD === */
#lux-footer {
  margin-top: 14px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Discord Icon */
#lux-discord {
  width: 36px;
  height: 36px;
  background: url('https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/discord.svg') no-repeat center/contain;
  filter: invert(100%);
  opacity: 0.8;
  cursor: pointer;
  transition: 0.2s ease;
}

#lux-discord:hover {
  opacity: 1;
}

/* Copyright */
.lux-copy {
  margin-top: 6px;
  color: #8fa2ad;
  font-size: 12px;
  user-select: none;
  text-align: center;
}

/* RESPONSIVE */
@media(max-width:500px){
  .propform{
    width: 90%;
  }
  #logo{
    width:90px;
  }
}