/* =========================================================
   Cloudmail LOGIN — EXACT reference design (scoped to login)
   ========================================================= */

:root{
  --cm-blue: #7DA8FF;         /* accent */
  --cm-bg:   #e9e3dd;         /* outer warm background */
  --cm-in:   #f3efec;         /* inner warm surface */
  --cm-ink:  #141821;
  --cm-muted: rgba(20,24,33,.62);

  --cm-shadow: 0 26px 70px rgba(16,24,40,.18);
  --cm-radius: 46px;
  --cm-radius-in: 34px;
  --cm-pill: 999px;
}

body.task-login *{ box-sizing: border-box; }
html, body{ height:100%; }

/* Roundcube wrappers: make them behave like the reference layout */
body.task-login{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--cm-bg);
  color: var(--cm-ink);

  /* NO GRID — soft background */
  background-image:
    radial-gradient(1200px 700px at 18% 12%, rgba(125,168,255,.18), transparent 60%),
    radial-gradient(900px 520px at 92% 78%, rgba(183,104,64,.14), transparent 62%);
}

/* Center exactly like the reference body flex */
body.task-login #layout{
  min-height: 100vh !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding: 0 !important;
  background: transparent !important;
}

body.task-login #layout-content{
  width: 100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Keep the accessibility H1 but hide visually */
body.task-login h1.voice{
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Outer frame (exact) */
body.task-login .frame{
  width:min(1260px, calc(100vw - 48px));
  min-height: 640px;
  background: var(--cm-in);
  border: 8px solid rgba(255,255,255,.92);
  border-radius: var(--cm-radius);
  box-shadow: var(--cm-shadow);
  padding: 14px;
  overflow:hidden;

  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items: stretch;
}

/* Left content */
body.task-login .left{
  padding: 62px 64px 44px 64px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Logo */
body.task-login .logo-wrap{
  margin-bottom: 26px;
  user-select:none;
}
body.task-login .logo-wrap img,
body.task-login #cmLogo{
  width: 190px;
  max-width: 64%;
  height: auto;
  display:block;
}

/* Headings */
body.task-login h2{
  margin: 0 0 10px 0;
  font-size: 40px;
  letter-spacing:.2px;
}
body.task-login .sub{
  margin: 0 0 24px 0;
  color: var(--cm-muted);
  max-width: 430px;
  line-height: 1.45;
  font-size: 15px;
}

/* Sign up button */
body.task-login .signup{
  height: 52px;
  width: min(420px, 100%);
  border-radius: var(--cm-pill);
  border: 1px solid rgba(20,24,33,.10);
  background: rgba(255,255,255,.78);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 14px 38px rgba(16,24,40,.10), inset 0 1px 0 rgba(255,255,255,.85);
  font-weight: 700;
  color: rgba(20,24,33,.86);
  cursor:pointer;
  letter-spacing:.15px;
  transition: transform .12s ease, filter .12s ease;
}
body.task-login .signup:hover{ transform: translateY(-1px); filter: brightness(1.02); }
body.task-login .signup:active{ transform: translateY(0); filter: brightness(.99); }

/* Divider */
body.task-login .or{
  width: min(420px, 100%);
  display:flex;
  align-items:center;
  gap: 14px;
  margin: 18px 0 14px;
  color: rgba(20,24,33,.40);
  font-size: 14px;
}
body.task-login .or::before,
body.task-login .or::after{
  content:"";
  height: 1px;
  background: rgba(20,24,33,.12);
  flex:1;
}

/* Form */
body.task-login form{ width: min(420px, 100%); }

body.task-login label{
  display:block;
  font-size: 13px;
  font-weight: 700;
  color: rgba(20,24,33,.70);
  margin: 14px 0 8px;
  letter-spacing:.2px;
}

body.task-login input{
  width:100%;
  height: 52px;
  border-radius: var(--cm-pill);
  border: 1px solid rgba(20,24,33,.10);
  background: rgba(255,255,255,.82);
  padding: 0 18px;
  font-size: 15px;
  color: rgba(20,24,33,.92);
  outline:none;
  box-shadow: 0 14px 38px rgba(16,24,40,.10), inset 0 1px 0 rgba(255,255,255,.85);
}

/* Focus = dark outline */
body.task-login input:focus{
  border-color: rgba(20,24,33,.78);
  box-shadow:
    0 18px 46px rgba(16,24,40,.10),
    inset 0 1px 0 rgba(255,255,255,.85);
}

/* Hide placeholder on focus AND typing */
body.task-login input:focus::placeholder{ opacity: 0; }
body.task-login input:not(:placeholder-shown)::placeholder{ opacity: 0; }

/* Invalid */
body.task-login input.cm-invalid{
  border-color: rgba(220, 53, 69, .92);
  box-shadow:
    0 18px 46px rgba(16,24,40,.10),
    0 0 0 4px rgba(220, 53, 69, .12);
}

body.task-login .row{
  width: min(420px, 100%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top: 14px;
  color: rgba(20,24,33,.70);
  font-size: 14px;
}

body.task-login .check{
  display:flex;
  align-items:center;
  gap: 10px;
  user-select:none;
}
body.task-login .check input{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  box-shadow:none;
  accent-color: #5168ff;
}

body.task-login a{
  color: rgba(20,24,33,.55);
  text-decoration:none;
}
body.task-login a:hover{ text-decoration:underline; }

/* Login button */
body.task-login .btn{
  margin-top: 18px;
  width: min(420px, 100%);
  height: 54px;
  border-radius: var(--cm-pill);
  border: 1px solid #10337a;
  background: linear-gradient(90deg, #285eaa 0%, #143c6c 100%);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  letter-spacing:.2px;
  cursor:pointer;
  box-shadow: 0 20px 46px rgba(120,72,48,.22), inset 0 1px 0 rgba(255,255,255,.20);
  transition: transform .12s ease, filter .12s ease;
}
body.task-login .btn:hover{ transform: translateY(-1px); filter: brightness(1.03); }
body.task-login .btn:active{ transform: translateY(0); filter: brightness(.98); }

/* Right panel (exact) */
body.task-login .right{
  border-radius: var(--cm-radius-in);
  position:relative;
  overflow:hidden;
  isolation:isolate;

  background:
    radial-gradient(520px 360px at 18% 20%, rgba(125,168,255,.18), transparent 62%),
    linear-gradient(145deg, #0b0f16 0%, #141820 45%, #0a0e14 100%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 18px 55px rgba(0,0,0,.28);

  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 54px 46px;
}
body.task-login .right > *{ position:relative; z-index: 2; }

body.task-login .right::before{
  content:"";
  position:absolute;
  width: 520px;
  height: 520px;
  left: -140px;
  top: -140px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    rgba(183,104,64,.50),
    rgba(183,104,64,.18) 35%,
    rgba(183,104,64,0) 68%
  );
  filter: blur(26px);
  opacity: .55;
  mix-blend-mode: screen;
  animation: cmOrbDrift 26s ease-in-out infinite;
  z-index: 0;
  will-change: transform;
}
body.task-login .right::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(700px 420px at 70% 30%, rgba(255,255,255,.06), transparent 60%);
  opacity: .45;
  animation: cmOrbPulse 9s ease-in-out infinite;
  z-index: 1;
  pointer-events:none;
}

@keyframes cmOrbDrift{
  0%   { transform: translate(0, 0) scale(1); }
  16%  { transform: translate(280px, 40px) scale(1.04); }
  33%  { transform: translate(140px, 210px) scale(.98); }
  50%  { transform: translate(360px, 260px) scale(1.06); }
  68%  { transform: translate(220px, 120px) scale(1.00); }
  84%  { transform: translate(80px, 280px) scale(1.03); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes cmOrbPulse{
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: .55; transform: scale(1.02); }
}

body.task-login .right-head{
  color: rgba(255,255,255,.92);
  text-shadow: 0 18px 55px rgba(0,0,0,.55);
  max-width: 420px;
}
body.task-login .right-head .kicker{
  font-size: 16px;
  opacity:.78;
  letter-spacing:.25px;
  margin-bottom: 12px;
}
body.task-login .right-head h1{
  margin:0;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing:.2px;
}
body.task-login .right-head p{
  margin: 14px 0 0 0;
  color: rgba(255,255,255,.72);
  line-height: 1.4;
  font-size: 15px;
  max-width: 380px;
}
body.task-login .mail-art{
  margin-top: 26px;
  width: min(440px, 100%);
  align-self: flex-start;
  opacity: .96;
  filter: drop-shadow(0 30px 55px rgba(0,0,0,.35));
  pointer-events:none;
}

/* Responsive */
@media (max-width: 980px){
  body.task-login .frame{
    grid-template-columns: 1fr;
    min-height: unset;
  }
  body.task-login .right{ display:none; }
  body.task-login .left{ padding: 54px 40px 44px 40px; }
  body.task-login .logo-wrap img,
  body.task-login #cmLogo{ width: 180px; }
}

/* =========================================================
   Alignment fixes ONLY (requested)
   - Left panel: "Login" + "Business Email Made Simple."
   - Right panel: Cloudmail Suite + heading + paragraph
   ========================================================= */
body.task-login .left h2,
body.task-login .left .sub{
  text-align: left !important;
}

body.task-login .right-head,
body.task-login .right-head *{
  text-align: left !important;
}

/* FIX ONLY: Left panel "Login" heading color */
body.task-login .frame .left h2{
  color: #141821 !important;
}

/* =========================================================
   CloudMail LOGIN — force DARK background always (all themes)
   Only affects page background behind the card.
   ========================================================= */
body.task-login,
body.task-login #layout{
  background:
    radial-gradient(1200px 680px at 18% 12%, rgba(96,138,255,.22), transparent 58%),
    radial-gradient(900px 560px at 86% 18%, rgba(17,24,39,.85), transparent 55%),
    radial-gradient(900px 520px at 40% 90%, rgba(0,0,0,.55), transparent 60%),
    linear-gradient(145deg, #0b1119 0%, #0f1722 42%, #0a0f15 100%) !important;
  background-attachment: fixed !important;
}


/* =========================================================
   CloudMail LOGIN — remove the light background strip
   so the dark background shows everywhere behind the card.
   ========================================================= */
body.task-login #layout-content,
body.task-login #layout-content.selected,
body.task-login #layout-content.no-navbar{
  background: transparent !important;
}




/* =========================================================
   CloudMail LOGIN — remove ONLY the light outer band layer
   without affecting the card/frame layout
   ========================================================= */
body.task-login #layout{
  background-color: transparent !important;
}


/* =========================================================
   CloudMail LOGIN — remove the light background strip
   so the dark background shows everywhere behind the card.
   ========================================================= */
body.task-login #layout-content,
body.task-login #layout-content.selected,
body.task-login #layout-content.no-navbar{
  background: transparent !important;
}


/* =========================================================
   CloudMail LOGIN — restore CARD (frame) cream background
   Keeps dark background behind the card.
   ========================================================= */
body.task-login main.frame{
  background: #f5f1ea !important;
}