/* Black Sheep Network Mail — login-only theme, built on the genuine Roundcube form. */
body.task-login,
html body.task-login.dark-mode {
  --bsn-bg: #070e19;
  --bsn-line: rgba(181,205,236,.35);
  --bsn-text: #f7f9fd;
  --bsn-muted: #a2b1c7;
  color: var(--bsn-text) !important;
  background: #070e19 url('/skins/bsn/images/bsn-scenery.webp') center center / cover no-repeat fixed !important;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
}
body.task-login::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, rgba(22,37,59,.25) 0%, rgba(4,9,18,.52) 73%),
    linear-gradient(90deg, rgba(3,8,17,.15), rgba(3,9,19,0) 25%, rgba(3,8,17,0) 75%, rgba(3,8,17,.15));
}
body.task-login #layout,
body.task-login #layout-content {
  display: block !important;
  position: relative !important;
  margin: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: auto !important;
  overflow: visible !important;
  background: transparent !important;
}
body.task-login .bsn-login-wrap {
  isolation: isolate;
  display: flex; flex-flow: column nowrap; justify-content: center; align-items: center;
  min-height: 100vh; min-height: 100dvh;
  padding: clamp(24px, 5vh, 64px) 18px 24px;
  box-sizing: border-box;
  width: 100%;
}
body.task-login .bsn-login-card {
  box-sizing: border-box;
  width: min(100%, 594px);
  max-width: 594px;
  padding: clamp(28px, 5vw, 48px) clamp(23px, 5vw, 49px) 32px;
  text-align: center;
  background: linear-gradient(150deg, rgba(24,39,60,.95) 0%, rgba(11,21,37,.975) 51%, rgba(5,13,26,.975) 100%);
  border: 1px solid rgba(175,205,246,.55);
  border-radius: 24px;
  box-shadow: 0 0 0 1px rgba(140,188,245,.12), 0 0 36px rgba(110,158,218,.15), 0 28px 70px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.19);
}
body.task-login .bsn-brand-header { margin: 0; }
body.task-login .bsn-logo {
  display: block; width: clamp(142px, 18vw, 193px); height: auto;
  aspect-ratio: 1; object-fit: contain;
  margin: 0 auto 20px; border: 0; background: none;
  filter: drop-shadow(0 0 11px rgba(196,220,255,.4));
}
body.task-login #bsn-brand-name {
  margin: 0 !important; color: #fff !important;
  font-size: clamp(25px, 3.8vw, 33px); line-height: 1.16;
  letter-spacing: -.03em; font-weight: 750;
  text-wrap: balance;
}
body.task-login .bsn-mail-divider {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 16px auto 8px;
  color: #d7e4f4; font-size: 21px; letter-spacing: .50em; font-weight: 300;
}
body.task-login .bsn-mail-divider::before,
body.task-login .bsn-mail-divider::after { content: ''; flex: 1 1 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(196,213,237,.42)); }
body.task-login .bsn-mail-divider::after { transform: rotate(180deg); }
body.task-login .bsn-mail-divider span { padding-left: .5em; white-space: nowrap; }
body.task-login .bsn-brand-subtitle {
  margin: 0 0 28px; color: #91a4bd; font-size: clamp(9px, 1.25vw, 11px);
  letter-spacing: .37em; font-weight: 600;
}
body.task-login #login-form,
body.task-login .bsn-auth-form { display: block !important; position: relative !important; margin: 0 !important; width: 100% !important; max-width: none !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
body.task-login #login-form table,
body.task-login #login-form tbody { display: block !important; width: 100% !important; margin: 0 !important; border: 0 !important; background: transparent !important; }
body.task-login #login-form tr { display: block !important; width: 100% !important; margin: 0 0 14px !important; }
body.task-login #login-form tr:last-child { margin-bottom: 0 !important; }
body.task-login #login-form td { display: block !important; width: 100% !important; border: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; }
body.task-login #login-form td.title {
  text-align: left !important; margin-bottom: 6px !important; color: #bdcde2 !important;
  font-size: 12px !important; letter-spacing: .06em !important;
}
body.task-login #login-form td.title label { color: #bdcde2 !important; }
body.task-login #login-form td.input { position: relative !important; }
body.task-login #login-form input.form-control,
body.task-login #login-form input#rcmloginuser,
body.task-login #login-form input#rcmloginpwd {
  display: block !important;
  box-sizing: border-box !important; width: 100% !important; max-width: none !important;
  height: 53px !important; border-radius: 12px !important;
  border: 1px solid var(--bsn-line) !important;
  background: rgba(9,19,34,.73) !important;
  color: #fff !important; font-size: 15px !important;
  padding: 0 17px 0 47px !important;
  font-family: inherit !important;
  box-shadow: inset 0 1px 7px rgba(0,0,0,.15) !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
body.task-login #login-form input#rcmloginpwd { padding-right: 50px !important; }
body.task-login #login-form input::placeholder { color: #8293ab !important; opacity: 1 !important; }
body.task-login #login-form input:focus { outline: 2px solid rgba(180,212,254,.6) !important; outline-offset: 1px !important; border-color: #b6d5ff !important; }
body.task-login #login-form tr:has(#rcmloginuser) td.input::before,
body.task-login #login-form tr:has(#rcmloginpwd) td.input::before {
  content: ''; position: absolute; z-index: 2; width: 21px; height: 21px; left: 17px; top: 16px;
  pointer-events: none;
  background-repeat: no-repeat; background-size: contain;
}
body.task-login #login-form tr:has(#rcmloginuser) td.input::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfdef0' stroke-width='1.8'%3E%3Crect x='2' y='5' width='20' height='14' rx='1'/%3E%3Cpath d='m2 6 10 8 10-8'/%3E%3C/svg%3E"); }
body.task-login #login-form tr:has(#rcmloginpwd) td.input::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfdef0' stroke-width='1.8'%3E%3Crect x='5' y='10' width='14' height='12' rx='1.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
body.task-login .bsn-show-password {
  position: absolute; right: 9px; top: 7px; height: 39px; width: 37px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  color: #aebdd1; background: transparent; border: 0; border-radius: 8px;
  cursor: pointer;
}
body.task-login .bsn-show-password:focus-visible { outline: 2px solid #f5faff; }
body.task-login #rcmloginsubmit,
body.task-login #login-form button[type=submit] {
  width: 100% !important; min-height: 56px !important;
  margin-top: 9px !important;
  border: 1px solid rgba(255,255,255,.85) !important; border-radius: 12px !important;
  background: linear-gradient(180deg,#fff,#e5eaf3) !important;
  color: #111b2b !important; font-size: 17px !important; font-weight: 750 !important;
  box-shadow: 0 4px 13px rgba(0,0,0,.24) !important; cursor: pointer !important;
}
body.task-login #rcmloginsubmit:hover { background: #fff !important; transform: translateY(-1px); }
body.task-login #rcmloginsubmit:focus-visible { outline: 3px solid #b7d6ff !important; outline-offset: 2px !important; }
body.task-login .bsn-reset { margin: 18px 0 29px; }
body.task-login .bsn-reset a { color: #edf3fb !important; text-decoration: underline; text-underline-offset: 4px; font-size: 13px; }
body.task-login .bsn-feature-caption { display: flex; align-items: center; gap: 13px; color: #9baec8; font-size: 10px; letter-spacing: .30em; white-space: nowrap; margin-bottom: 20px; }
body.task-login .bsn-feature-caption::before,body.task-login .bsn-feature-caption::after { content: ''; height: 1px; background: var(--bsn-line); flex: 1; }
body.task-login .bsn-features { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
body.task-login .bsn-feature { min-width: 0; display: flex; flex-flow: column; align-items: center; justify-content: center; gap: 8px; padding: 0 8px; }
body.task-login .bsn-feature + .bsn-feature { border-left: 1px solid var(--bsn-line); }
body.task-login .bsn-feature svg { width: 26px; height: 26px; stroke: #f4f7fd; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
body.task-login .bsn-feature span { font-size: clamp(8px, 1vw, 10px); line-height: 1.35; letter-spacing: .1em; color: #f2f7ff; font-weight: 650; }
body.task-login .bsn-copyright { margin: 29px auto 0; max-width: 550px; padding: 0 10px; text-align: center; font-size: 11px; line-height: 1.5; color: #a2afc3; }
body.task-login .bsn-copyright p { margin: 4px auto; }
body.task-login .bsn-copyright p:last-child { font-size: 9px; letter-spacing: .26em; color: #8b9db7; }
body.task-login #login-footer,body.task-login .bsn-roundcube-messages { text-align: center; color: var(--bsn-muted); }
body.task-login #messagestack { position: fixed; z-index: 10; }
body.task-login .bsn-login-card .voice { position: absolute; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 540px) {
  body.task-login { background-attachment: scroll !important; }
  body.task-login .bsn-login-wrap { padding: 15px 11px 20px; justify-content: flex-start; }
  body.task-login .bsn-login-card { padding: 24px 18px 24px; border-radius: 19px; }
  body.task-login .bsn-logo { width: 150px; margin-bottom: 14px; }
  body.task-login #bsn-brand-name { font-size: 25px; }
  body.task-login .bsn-brand-subtitle { letter-spacing: .24em; margin-bottom: 22px; }
  body.task-login #login-form td.title { font-size: 11px !important; }
  body.task-login .bsn-feature span { font-size: 8px; }
  body.task-login .bsn-feature-caption { letter-spacing: .16em; }
  body.task-login .bsn-copyright { margin-top: 20px; }
}
@media (max-width: 340px) {
  body.task-login .bsn-logo { width: 120px; }
  body.task-login .bsn-brand-subtitle { font-size: 8px; }
  body.task-login #bsn-brand-name { font-size: 21px; }
  body.task-login .bsn-feature { padding: 0 3px; }
}
@media (prefers-reduced-motion: reduce) { body.task-login * { transition: none !important; } }
/* Overrides for Elastic UI.js: it adds a 31px icon span and a dynamic top offset. */
body.task-login #login-form { top: 0 !important; bottom: auto !important; }
body.task-login #login-form .input-group-prepend { display: none !important; }
body.task-login #login-form td.input { height: auto !important; min-height: 0 !important; }
body.task-login #login-form td.title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

/* Final brand alignment: native button case and accessible visibility icon. */
body.task-login #rcmloginsubmit { text-transform: none !important; letter-spacing: .01em !important; }
body.task-login .bsn-show-password svg { display: block; width: 21px; height: 21px; stroke: #c9d6e8; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }