:root {
  --orbions-teal: #00baa5;
  --orbions-teal-deep: #025567;
  --orbions-ink: #061115;
  --orbions-panel: rgba(7, 20, 24, 0.88);
  --orbions-line: rgba(176, 235, 229, 0.15);
  --orbions-soft: rgba(0, 186, 165, 0.18);
}

html,
body.task-login {
  background:
    radial-gradient(circle at 72% 18%, rgba(0, 186, 165, 0.26), transparent 30%),
    radial-gradient(circle at 18% 88%, rgba(2, 85, 103, 0.34), transparent 36%),
    linear-gradient(135deg, #02070a 0%, #071418 48%, #020506 100%) !important;
}

body.task-login #layout-content {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 72px 20px 54px !important;
  background: transparent !important;
}

body.task-login #layout-content > .box,
body.task-login #layout-content > div {
  max-width: 460px !important;
}

body.task-login #login-form {
  width: min(430px, calc(100vw - 40px)) !important;
  box-sizing: border-box !important;
  text-align: center !important;
  background: var(--orbions-panel) !important;
  border: 1px solid var(--orbions-line) !important;
  border-radius: 28px !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.56), 0 0 90px rgba(0, 186, 165, 0.16) !important;
  backdrop-filter: blur(18px);
  padding: 34px !important;
}

body.task-login #login-form::before {
  content: 'ORBIONS Webmail';
  display: block;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

body.task-login #logo,
body.task-login .login-logo {
  display: block !important;
  width: min(260px, 72vw) !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  margin: 0 auto 24px !important;
  filter: drop-shadow(0 0 24px rgba(0, 186, 165, 0.34));
}

body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr,
body.task-login #login-form td {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border: 0 !important;
  padding: 0 !important;
}

body.task-login #login-form td.title,
body.task-login #login-form label[for='rcmloginuser'],
body.task-login #login-form label[for='rcmloginpwd'],
body.task-login #login-form .input-group-prepend {
  display: none !important;
}

body.task-login #login-form tr,
body.task-login #login-form td.input {
  margin: 0 0 14px !important;
}

body.task-login input,
body.task-login .form-control {
  width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 20px !important;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid rgba(190, 245, 239, 0.16) !important;
  color: #fff !important;
  border-radius: 14px !important;
  font-size: 18px !important;
  line-height: 58px !important;
  text-align: left !important;
}

body.task-login input:focus,
body.task-login .form-control:focus {
  border-color: rgba(0, 186, 165, 0.82) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 186, 165, 0.22) !important;
}

body.task-login .formbuttons {
  margin: 12px 0 0 !important;
}

body.task-login .button,
body.task-login button[type='submit'],
body.task-login .btn-primary,
body.task-login .button.mainaction {
  width: 100% !important;
  min-height: 58px !important;
  margin: 0 !important;
  background: linear-gradient(135deg, var(--orbions-teal), var(--orbions-teal-deep)) !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 46px rgba(0, 186, 165, 0.23) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
}

body.task-login #login-footer,
body.task-login #login-footer a[href*='roundcube'] {
  display: none !important;
}

body.task-login::before {
  content: 'ORBIONS WEBMAIL';
  position: fixed;
  top: 34px;
  left: 40px;
  z-index: 1;
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

body:not(.task-login) {
  --layout-menu-background: #061115;
  --layout-sidebar-background: #08171b;
  --layout-list-background: #0a1b20;
  --layout-content-background: #071419;
  --color-link: var(--orbions-teal);
  --color-main: var(--orbions-teal);
  background:
    radial-gradient(circle at 90% 4%, rgba(0, 186, 165, 0.14), transparent 32%),
    linear-gradient(135deg, #061115, #091b20 58%, #050b0e) !important;
}

#layout-menu,
#layout-sidebar,
#layout-list,
#layout-content,
#layout-content .iframe-wrapper {
  border-color: rgba(190, 245, 239, 0.09) !important;
}

#layout-menu {
  background: linear-gradient(180deg, #061115 0%, #082229 100%) !important;
  box-shadow: inset -1px 0 0 rgba(190, 245, 239, 0.08);
}

#layout-sidebar,
#layout-list,
#layout-content {
  background-color: rgba(7, 20, 24, 0.92) !important;
}

#taskmenu a.selected,
#taskmenu a:hover,
.toolbar a.button:hover,
.toolbar .button:hover,
a,
.listing tbody tr.selected td {
  color: var(--orbions-teal) !important;
}

.listing tbody tr.selected td,
.listing li.selected,
.messagelist tr.selected td {
  background: rgba(0, 186, 165, 0.14) !important;
}

.button.mainaction,
.btn-primary,
button.btn-primary {
  background: linear-gradient(135deg, var(--orbions-teal), var(--orbions-teal-deep)) !important;
  border-color: transparent !important;
  box-shadow: 0 14px 34px rgba(0, 186, 165, 0.14) !important;
}

.orbions-shell-badge {
  position: fixed;
  right: 18px;
  bottom: 16px;
  z-index: 10;
  padding: 8px 12px;
  border: 1px solid rgba(190, 245, 239, 0.12);
  border-radius: 999px;
  background: rgba(6, 17, 21, 0.78);
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  pointer-events: none;
}

@media (max-width: 720px) {
  body.task-login::before {
    top: 18px;
    left: 20px;
    font-size: 10px;
  }

  body.task-login #login-form {
    width: min(390px, calc(100vw - 28px)) !important;
    border-radius: 24px !important;
    padding: 28px !important;
  }

  body.task-login #login-form input.form-control,
  body.task-login #login-form button[type='submit'] {
    height: 54px !important;
    min-height: 54px !important;
    font-size: 16px !important;
  }

  body.task-login #logo {
    width: min(230px, 76vw) !important;
  }

  .orbions-shell-badge {
    display: none;
  }
}