/* CT2wild Mail: separate theme inspired by the existing DL Panel. */
:root { --ct-bg: #1e1e1e; --ct-panel: #252526; --ct-border: #414145; --ct-blue: #0e639c; --ct-text: #f2f2f2; }
body.task-login { background: var(--ct-bg) !important; font-family: "Segoe UI", Arial, sans-serif; }
body.task-login #layout { min-height: 100vh; height: auto; background: var(--ct-bg) !important; }
body.task-login #layout-content.ct-login {
  background: transparent !important; display: grid !important; place-items: center;
  width: 100%; min-width: 0; min-height: 100vh; height: auto; padding: 32px 20px;
  color: var(--ct-text); overflow: visible; flex: 1;
}
.ct-login-card { width: min(100%, 420px); padding: 32px; background: var(--ct-panel); border: 1px solid var(--ct-border); border-radius: 12px; box-shadow: 0 18px 60px #0003; }
.ct-wordmark { display: flex; align-items: center; gap: 12px; color: #fff !important; font-size: 25px; font-weight: 750; letter-spacing: .06em; text-decoration: none !important; }
.ct-wordmark span { font-size: 11px; letter-spacing: .12em; color: #b7ddf4; padding: 5px 7px; border: 1px solid #37576b; border-radius: 4px; }
.ct-login-card h1 { color: #fff; font-size: 22px; margin: 30px 0 8px; font-weight: 600; text-align: left; }
.ct-intro { color: #b6b6bc; margin: 0 0 26px; font-size: 14px; text-align: left; }
body.task-login #login-form { position: static; top: auto; bottom: auto; width: 100%; max-width: none; margin: 0; text-align: left; }
body.task-login #login-form .input-group { margin-bottom: 16px; }
body.task-login #login-form .input-group-text { background: #181818 !important; border-color: var(--ct-border) !important; color: #b7ddf4 !important; }
body.task-login #login-form input { min-height: 46px; background: #181818 !important; border-color: var(--ct-border) !important; color: #fff !important; border-radius: 0 6px 6px 0; }
body.task-login #login-form input::placeholder { color: #b6b6bc; opacity: 1; }
body.task-login #login-form button { min-height: 46px; background: var(--ct-blue) !important; border-color: #2684bd !important; border-radius: 6px; font-weight: 600; width: 100%; }
body.task-login #login-form input:focus { border-color: #65b7e6 !important; box-shadow: 0 0 0 2px #65b7e650; }
.ct-login-help { font-size: 12px; line-height: 1.65; color: #b6b6bc; margin: 22px 0 0; overflow-wrap: anywhere; }
.ct-login-help strong { color: #dedee3; font-weight: 500; }
body.task-login #login-footer { color: #a9a9af; font-size: 11px; text-align: left; margin-top: 28px; padding: 18px 0 0; border-top: 1px solid var(--ct-border); }
.ct-menu-brand { display: block; padding: 14px 4px 12px; text-align: center; text-decoration: none !important; color: #b7ddf4 !important; font-weight: 750; font-size: 17px; letter-spacing: .025em; border-bottom: 1px solid #ffffff1c; }
.ct-menu-brand span { display: block; color: #c9c9cf; font-size: 9px; letter-spacing: .1em; font-weight: 400; margin-top: 3px; }
body:not(.task-login) #layout-menu { background: #202124; }
#taskmenu a.selected { background-color: #094771 !important; color: #e4f4ff !important; }
#taskmenu a.compose { color: #86cef6 !important; }
@media (max-width: 480px) {
  body.task-login #layout-content.ct-login { padding: 24px 16px; }
  .ct-login-card { padding: 26px 22px; }
  .ct-wordmark { font-size: 22px; }
}
@media (max-width: 1024px) { .ct-menu-brand { display: none; } }
@media (max-height: 520px) { body.task-login #layout-content.ct-login { align-items: start; } }