/* KROPP.TO editorial v21: shared neutral UI for Roundcube Elastic child skin */
@font-face{font-family:Outfit;src:url('./outfit-latin.woff2') format('woff2');font-style:normal;font-weight:300 800;font-display:swap}
html{--kropp-bg:#070909;--kropp-bg-deep:#070909;--kropp-panel:#101415;--kropp-panel-2:#14191c;--kropp-panel-3:#1c2429;--kropp-hover:#1c2429;--kropp-border:#303a40;--kropp-border-soft:#263034;--kropp-line:#303a40;--kropp-text:#e7eae8;--kropp-muted:#969f9a;--kropp-accent:#719884;--kropp-accent-soft:rgba(113,152,132,.10);--kropp-blue:#14191c;--kropp-blue-border:#303a40;--kropp-blue-line:#303a40}
body{font-family:Outfit,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
body.task-login,html body.task-login{
  background:radial-gradient(ellipse min(88vw,1080px) min(51vh,610px) at 50% 41%,rgba(32,45,37,.22),transparent 78%),#070909!important;
  background-color:#070909!important;color:#e7eae8!important;
  font-family:Outfit,system-ui,sans-serif!important
}
body.task-login::before,html body.task-login::before{
  background-image:linear-gradient(rgba(172,190,177,.03) 1px,transparent 1px),
  linear-gradient(90deg,rgba(172,190,177,.03) 1px,transparent 1px)!important;
  background-size:68px 68px!important;opacity:.47!important;
  animation:none!important
}
body.task-login::after,html body.task-login::after{background:none!important;box-shadow:none!important}
body.task-login #kropp-particles{display:none!important}
body.task-login #layout-content,html body.task-login #layout-content{
  background:#101415!important;border:1px solid #303a40!important;border-radius:18px!important;
  box-shadow:0 20px 70px rgba(0,0,0,.22)!important;backdrop-filter:none!important
}
body.task-login #logo{filter:none!important}
body.task-login .kropp-login-subtitle{
 color:#8492a8!important;font-family:Outfit,system-ui,sans-serif!important;
 font-size:16px!important;font-weight:400!important;line-height:1.35!important;
 letter-spacing:0!important
}
html body.task-login #rcmloginuser,html body.task-login #rcmloginpwd,body.task-login select{
  background:#0c1011!important;background-image:none!important;color:#e7eae8!important;border:1px solid #303a40!important;
  border-radius:10px!important;box-shadow:none!important;font-family:Outfit,system-ui,sans-serif!important
}
html body.task-login #rcmloginuser:focus,html body.task-login #rcmloginpwd:focus,body.task-login select:focus{
  border-color:#719884!important;box-shadow:0 0 0 3px rgba(113,152,132,.12)!important
}
html body.task-login #login-form #rcmloginsubmit{
  background:#14191c!important;background-image:none!important;border:1px solid #303a40!important;
  color:#dce3e0!important;border-radius:10px!important;box-shadow:none!important;
  text-shadow:none!important;font:720 17px/1.3 Outfit,system-ui,sans-serif!important;
  transition:background .15s,border-color .15s!important
}
html body.task-login #rcmloginsubmit:hover,html body.task-login #rcmloginsubmit:active{
  background:#1c2429!important;border-color:#566775!important;color:#f2f5f4!important
}
body.task-login button:focus-visible,body.task-login a:focus-visible{
  outline:2px solid #78a3d4!important;outline-offset:3px!important
}
/* Roundcube login: match the Account card's aligned label and arrow. */
html body.task-login #login-form #rcmloginsubmit{
    display:flex!important;align-items:center!important;justify-content:center!important;
    gap:10px!important;width:100%!important;min-height:54px!important
}
html body.task-login #rcmloginsubmit>span:first-child{
    font-family:Outfit,system-ui,sans-serif!important;
    font-size:17px!important;font-weight:720!important;
    letter-spacing:0!important;line-height:1!important
}
html body.task-login .kropp-login-arrow{display:inline-block!important;margin:0!important;
    font-size:22px!important;line-height:1!important;transform:none!important}
html body.task-login #rcmloginuser::placeholder,
html body.task-login #rcmloginpwd::placeholder{
    color:#60708a!important;-webkit-text-fill-color:#60708a!important;opacity:1!important
}
html body.task-login #rcmloginuser,
html body.task-login #rcmloginpwd{caret-color:#dce3e0!important}
html body.task-login #logo{opacity:1!important;filter:none!important}
/* Authenticated mail shell: dark neutrals, flatter controls, readable separation. */
body:not(.task-login){--kropp-bg:#070909;--kropp-panel:#101415;--kropp-panel-2:#14191c;
  --kropp-panel-3:#1c2429;--kropp-text:#e7eae8;--kropp-border:#303a40;
  --kropp-muted:#969f9a;--kropp-accent:#719884}
body:not(.task-login) .btn-primary,
body:not(.task-login) button.btn-primary{
  background:#14191c!important;background-image:none!important;border:1px solid #303a40!important;
  color:#e7eae8!important;box-shadow:none!important;border-radius:10px!important
}
body:not(.task-login) .btn-primary:hover,
body:not(.task-login) button.btn-primary:hover{background:#1c2429!important;border-color:#566775!important}
body:not(.task-login) :is(input,select,textarea):focus{outline-color:#719884!important}
@media(max-width:600px){body.task-login #layout-content{width:min(440px,100%)!important;border-radius:16px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important}}


/* KROPP.TO 2026 editorial: post-login Roundcube look, retain pane layout. */
html.kropp-ui-v4 body:not(.task-login) #layout-sidebar,
html.kropp-ui-v4 body:not(.task-login) #layout-list{
  background-color:var(--kropp-panel)!important;
  border-color:var(--kropp-border-soft)!important;
}
html.kropp-ui-v4 body:not(.task-login) #layout-content{
  background-color:var(--kropp-bg)!important;
  color:var(--kropp-text)!important;
}
html.kropp-ui-v4 body:not(.task-login) :is(.toolbar,.header){
  border-color:var(--kropp-border-soft)!important;
  color:var(--kropp-text)!important;
}
html.kropp-ui-v4 body:not(.task-login) :is(.popupmenu,.popover,.ui-dialog,.modal-content){
  background-color:var(--kropp-panel-2)!important;
  color:var(--kropp-text)!important;
  border:1px solid var(--kropp-border)!important;
  box-shadow:0 18px 56px rgba(0,0,0,.25)!important;
}
html.kropp-ui-v4 body:not(.task-login) :is(.btn-primary,.mainaction){
  background:#14191c!important;background-image:none!important;
  color:#e7eae8!important;border-color:#303a40!important;box-shadow:none!important;
}
html.kropp-ui-v4 body:not(.task-login) :is(.btn-primary,.mainaction):hover{
  background:#1c2429!important;border-color:#566775!important;
}
html.kropp-ui-v4 body:not(.task-login) :is(input,select,textarea):focus-visible,
html.kropp-ui-v4 body:not(.task-login) :is(button,a):focus-visible{
  outline:2px solid #78a3d4!important;outline-offset:2px!important;
}
@media(prefers-reduced-motion:reduce){
 html.kropp-ui-v4 body:not(.task-login) *,html.kropp-ui-v4 body:not(.task-login) *::before{
  animation-duration:.01ms!important;transition-duration:.01ms!important
 }
}

/* Stalwart account shortcut in authenticated Roundcube settings only. */
body.task-settings #kropp-account-security-li{
 border-top:1px solid var(--kropp-border-soft)!important;
 margin-top:10px!important;padding-top:5px!important;
}
body.task-settings .kropp-account-security-link{
 display:flex!important;align-items:center!important;
 min-height:44px!important;padding:10px 14px!important;
 color:var(--kropp-text)!important;
 text-decoration:none!important;transition:background .15s!important;
 border-radius:10px!important;
}
body.task-settings .kropp-account-security-link:hover,
body.task-settings .kropp-account-security-link:focus-visible{
 background:var(--kropp-hover)!important;
 color:var(--kropp-text)!important;
}