:root{--wn-bg:#07101a;--wn-bg2:#0d1723;--wn-panel:rgba(18,31,47,.84);--wn-panel2:rgba(9,18,29,.9);--wn-line:rgba(151,174,210,.18);--wn-line2:rgba(168,190,224,.36);--wn-text:#eaf1ff;--wn-muted:#9facbf;--wn-muted2:#6f7d93;--wn-blue:#6fa8ff;--wn-blue2:#4d7fdc;--wn-danger:#ff5b73;--wn-radius:8px;--wn-shadow:0 22px 70px rgba(0,0,0,.35);color-scheme:dark}
html,body{background:var(--wn-bg);color:var(--wn-text)}
body,input,textarea,select,button{font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:0}
body:not(.task-login) #layout{background:radial-gradient(circle at 21% 18%,rgba(83,122,189,.20),transparent 31rem),radial-gradient(circle at 78% 36%,rgba(47,82,134,.15),transparent 33rem),linear-gradient(135deg,#07101a 0%,#0d1723 44%,#08111b 100%);color:var(--wn-text)}
body:not(.task-login) #layout:before,body:not(.task-login) #layout:after{content:"";position:fixed;pointer-events:none;border:1px solid rgba(155,179,218,.10);border-radius:50%;z-index:0}
body:not(.task-login) #layout:before{width:56rem;height:56rem;left:-31rem;top:-24rem}body:not(.task-login) #layout:after{width:45rem;height:45rem;right:-24rem;bottom:-23rem}
#layout-menu,#layout-sidebar,#layout-list,#layout-content{position:relative;z-index:1}
#layout-menu{background:linear-gradient(180deg,rgba(10,20,32,.96),rgba(6,14,23,.98));border-right:1px solid var(--wn-line);box-shadow:10px 0 34px rgba(0,0,0,.24)}
#layout-menu .popover-header{background:transparent;border-bottom:1px solid var(--wn-line);min-height:5.8rem;display:flex;align-items:center;justify-content:center}
#layout-menu #logo{width:3.05rem;height:3.05rem;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(66,117,210,.25))}
#taskmenu a,#taskmenu .button{color:var(--wn-muted);border-radius:var(--wn-radius);transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
#taskmenu a:hover,#taskmenu a:focus,#taskmenu a.selected,#taskmenu .selected{color:#f6f9ff;background:linear-gradient(145deg,rgba(77,127,220,.35),rgba(83,153,255,.20));box-shadow:inset 0 0 0 1px rgba(130,173,247,.22),0 12px 26px rgba(38,80,150,.16)}
#taskmenu a:hover{transform:translateY(-1px)}#taskmenu a.logout,#taskmenu a.logout .inner:before{color:var(--wn-danger)}
#layout-sidebar,#layout-list,#layout-content{background:linear-gradient(180deg,var(--wn-panel),var(--wn-panel2));border:1px solid var(--wn-line);box-shadow:var(--wn-shadow)}
.listbox .header,#layout-content>.header,#messagelist-header{background:rgba(12,22,34,.72);border-bottom:1px solid var(--wn-line);color:var(--wn-muted)}
.header .header-title,.header-title.username,#layout-sidebar .header-title{color:var(--wn-text);font-weight:650}
.toolbar a,.toolbar .button,a.button,.button{color:var(--wn-muted);border-radius:var(--wn-radius)}
.toolbar a:hover,.toolbar a:focus,a.button:hover,a.button:focus,.button:hover,.button:focus{color:#f3f7ff;background-color:rgba(107,157,237,.12)}
.toolbar a.disabled,.toolbar .disabled,a.disabled,.button.disabled{color:rgba(159,172,191,.42)!important}
#mailsearchform,.searchbar{background:rgba(10,19,31,.82)!important;border:1px solid var(--wn-line)!important;border-radius:var(--wn-radius)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
#mailsearchform input,.searchbar input,input.form-control,textarea.form-control,.custom-select,select.form-control,.form-control{background:rgba(7,15,25,.88)!important;border-color:rgba(151,174,210,.20)!important;color:var(--wn-text)!important;box-shadow:none!important}
input.form-control::placeholder,textarea.form-control::placeholder,#mailsearchform input::placeholder{color:var(--wn-muted2)!important}
input.form-control:focus,textarea.form-control:focus,.custom-select:focus,.form-control:focus{border-color:rgba(111,168,255,.55)!important;box-shadow:0 0 0 .16rem rgba(77,127,220,.18)!important}
#folderlist-content,#messagelist-content,.scroller{scrollbar-color:rgba(130,173,247,.42) rgba(9,18,29,.40)}
#mailboxlist li,#directorylist li,.listing li,.records-table tr,.messagelist tr{color:var(--wn-muted);border-color:rgba(151,174,210,.12)!important}
#mailboxlist li a,#directorylist li a,.listing li a{color:inherit;border-radius:var(--wn-radius)}
#mailboxlist li.selected>a,#mailboxlist li a:hover,#directorylist li.selected>a,#directorylist li a:hover,.listing li.selected,.listing li:hover,.messagelist tr.selected,.messagelist tr:hover{background:linear-gradient(90deg,rgba(78,130,219,.28),rgba(63,95,149,.12))!important;color:#f3f7ff!important}
#mailboxlist li.unread>a,.messagelist tr.unread,.messagelist tr.unread td,.messagelist tr.unread a{color:#f8fbff!important;font-weight:700}.messagelist tr .subject,.messagelist tr .fromto,.messagelist tr .date{color:inherit}
.messagelist tr.unread .subject:before{content:"";display:inline-block;width:.46rem;height:.46rem;margin-right:.64rem;border-radius:50%;background:var(--wn-blue);box-shadow:0 0 0 .22rem rgba(111,168,255,.10);vertical-align:middle}
#quotadisplay,.quota-widget{color:var(--wn-muted)}#quotadisplay .count,.quota-widget .count{color:#c7d4e8}
#layout-content .iframe-wrapper{background:linear-gradient(135deg,rgba(13,25,39,.90),rgba(9,18,29,.94)),radial-gradient(circle at 50% 45%,rgba(97,133,189,.16),transparent 17rem);position:relative;overflow:hidden}
#layout-content .iframe-wrapper:before,#layout-content .iframe-wrapper:after{position:absolute;left:50%;transform:translateX(-50%);pointer-events:none;text-align:center;z-index:0}
body.task-mail.action-none #layout-content .iframe-wrapper:before{content:"No message selected";top:calc(50% + 6.2rem);color:rgba(214,224,242,.72);font-size:clamp(1.45rem,2vw,2.15rem);font-weight:500}
body.task-mail.action-none #layout-content .iframe-wrapper:after{content:"Choose a message from the list to view it here.";top:calc(50% + 9rem);color:rgba(159,172,191,.74);font-size:.98rem}
body.task-mail.action-none #messagecontframe{background:url(../images/wishnode_icon_512x512.png) center calc(50% - 3rem)/8.9rem 8.9rem no-repeat,transparent!important;opacity:.62}#messagecontframe,iframe{border:0}
.popupmenu,.menu.dropdown-menu,.ui-dialog,.ui-widget-content,.popover{background:rgba(12,22,35,.98)!important;border:1px solid var(--wn-line2)!important;color:var(--wn-text)!important;box-shadow:0 24px 70px rgba(0,0,0,.38)!important}
.popupmenu a,.popupmenu li,.menu a,.ui-dialog a{color:var(--wn-muted)}.popupmenu a:hover,.popupmenu li:hover,.menu a:hover{background:rgba(111,168,255,.12)!important;color:#f6f9ff!important}
.btn-primary,button.btn-primary,input.button.mainaction,input[type="submit"].button{background:linear-gradient(135deg,#6f93df,#496dad)!important;border-color:rgba(151,184,255,.24)!important;color:#fff!important;box-shadow:0 14px 34px rgba(65,101,179,.24)}
.btn-secondary,.btn,button,input[type="button"],input[type="submit"]{border-radius:var(--wn-radius)!important}.formbuttons,.footer,#messagelist-footer,.pagenav{background:rgba(10,19,31,.78)!important;border-color:var(--wn-line)!important;color:var(--wn-muted)}
body.task-login,body.task-login #layout{min-height:100vh;overflow:hidden;background:radial-gradient(circle at 18% 50%,rgba(70,103,158,.18),transparent 25rem),radial-gradient(circle at 68% 40%,rgba(47,71,118,.16),transparent 29rem),linear-gradient(132deg,#0b1220 0%,#111827 44%,#08111c 100%)}
body.task-login #layout{display:block}.wishnode-login-page{min-height:100vh;width:100%;display:grid!important;place-items:center;padding:clamp(1.25rem,4vw,4rem);background:linear-gradient(90deg,rgba(255,255,255,.015),rgba(255,255,255,0)),radial-gradient(circle at 50% 50%,rgba(98,129,183,.09),transparent 30rem)}
.wishnode-login-page:before,.wishnode-login-page:after{content:"";position:fixed;pointer-events:none;border:1px solid rgba(160,183,222,.16);border-radius:50%}.wishnode-login-page:before{width:55rem;height:55rem;left:-24rem;top:-34rem}.wishnode-login-page:after{width:60rem;height:60rem;right:-29rem;bottom:-31rem}
.wishnode-login-arc{position:fixed;pointer-events:none;border:1px solid rgba(160,183,222,.12);border-radius:50%}.wishnode-login-arc-top{width:40rem;height:40rem;right:-10rem;top:-14rem}.wishnode-login-arc-bottom{width:44rem;height:44rem;left:-16rem;bottom:-19rem}
.wishnode-login-mascot{position:fixed;pointer-events:none;opacity:.34;filter:drop-shadow(0 18px 35px rgba(0,0,0,.25));user-select:none}.wishnode-login-mascot-upper{width:min(16vw,13.5rem);right:11vw;top:6vh}.wishnode-login-mascot-lower{width:min(13vw,10rem);left:11vw;bottom:18vh}
.wishnode-login-card{position:relative;z-index:2;width:min(100%,49rem);min-height:43.5rem;padding:clamp(2.2rem,4.6vw,4.75rem) clamp(1.7rem,5vw,5.2rem) 1.7rem;border-radius:1.05rem;border:1px solid rgba(168,190,224,.42);background:linear-gradient(180deg,rgba(20,31,49,.72),rgba(8,14,24,.78)),radial-gradient(circle at 50% 0%,rgba(126,151,198,.13),transparent 24rem);box-shadow:0 35px 110px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.04);backdrop-filter:blur(18px)}
.wishnode-login-brand{display:flex;align-items:center;justify-content:center;gap:1.65rem;margin-bottom:1.75rem}.wishnode-login-icon{width:7.2rem;height:7.2rem;border-radius:1.45rem;box-shadow:0 18px 45px rgba(49,80,145,.25)}.wishnode-login-wordmark{width:min(18rem,50vw);opacity:.58;filter:drop-shadow(0 10px 24px rgba(84,121,190,.18))}
.wishnode-login-copy{text-align:center;margin-bottom:1.65rem}.wishnode-login-copy h2{margin:0 0 .48rem;color:#f6f9ff;font-size:clamp(1.6rem,2vw,2.05rem);line-height:1.18;font-weight:650}.wishnode-login-copy p{margin:0;color:rgba(190,201,219,.72);font-size:1.03rem}
.wishnode-login-form{width:min(100%,35rem);margin:0 auto}.wishnode-login-form table,.wishnode-login-form tbody,.wishnode-login-form tr,.wishnode-login-form td{display:block;width:100%}.wishnode-login-form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.wishnode-login-form td.title{height:0;margin:0;padding:0}.wishnode-login-form td.input,.wishnode-login-form td{padding:0!important;margin:0 0 1rem}
.wishnode-login-form input[type="text"],.wishnode-login-form input[type="email"],.wishnode-login-form input[type="password"]{width:100%!important;height:4rem;padding:0 1.15rem 0 4.35rem;border-radius:var(--wn-radius)!important;border:1px solid rgba(164,185,219,.24)!important;background:rgba(10,17,29,.62)!important;color:#edf4ff!important;font-size:1.12rem}
.wishnode-login-form .input,.wishnode-login-field-wrap{position:relative}.wishnode-login-form .input:before,.wishnode-login-field-wrap:before{content:"";position:absolute;left:1.52rem;top:50%;width:1.15rem;height:1.15rem;transform:translateY(-50%);background:rgba(189,203,228,.86);border-radius:50%}.wishnode-login-field-wrap.has-password:before{width:1.1rem;height:1.35rem;border-radius:.18rem}
.wishnode-login-form input[type="submit"],.wishnode-login-form button[type="submit"]{width:100%!important;height:4.05rem;margin-top:.9rem;border:0!important;border-radius:var(--wn-radius)!important;background:linear-gradient(135deg,#7897dc,#4d6ea8)!important;color:#fff!important;font-size:1.18rem;font-weight:700;text-transform:uppercase;box-shadow:0 18px 44px rgba(52,84,153,.26),inset 0 1px 0 rgba(255,255,255,.14)}
.wishnode-login-toggle-pass{position:absolute;right:.95rem;top:50%;width:2.5rem;height:2.5rem;transform:translateY(-50%);border:0;border-radius:50%!important;background:transparent!important;box-shadow:none!important}.wishnode-login-toggle-pass:before,.wishnode-login-toggle-pass:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.wishnode-login-toggle-pass:before{width:1.35rem;height:.88rem;border:.18rem solid rgba(190,204,228,.82);border-radius:50%/60%}.wishnode-login-toggle-pass:after{width:.38rem;height:.38rem;border-radius:50%;background:rgba(190,204,228,.9)}
body.task-login #login-footer{margin-top:6.75rem;padding-top:1.2rem;border-top:1px solid rgba(164,185,219,.18);text-align:center;color:rgba(190,201,219,.72)}.wishnode-login-footer-brand{display:inline-flex;align-items:center;gap:.55rem;font-size:1rem}.wishnode-login-footer-brand img{width:1.2rem;height:1.2rem;opacity:.74}.wishnode-login-footer-product{display:none}
@media(max-width:900px){.wishnode-login-card{min-height:auto;padding-bottom:1.5rem}.wishnode-login-brand{gap:1rem}.wishnode-login-icon{width:5.4rem;height:5.4rem}.wishnode-login-wordmark{width:13.5rem}.wishnode-login-mascot{opacity:.18}body.task-login #login-footer{margin-top:3rem}}
@media(max-width:600px){.wishnode-login-page{padding:1rem}.wishnode-login-card{width:100%;padding:2rem 1.15rem 1.25rem;border-radius:.9rem}.wishnode-login-brand{flex-direction:column;gap:.85rem}.wishnode-login-form input[type="text"],.wishnode-login-form input[type="email"],.wishnode-login-form input[type="password"],.wishnode-login-form input[type="submit"],.wishnode-login-form button[type="submit"]{height:3.55rem;font-size:1rem}.wishnode-login-form input[type="text"],.wishnode-login-form input[type="email"],.wishnode-login-form input[type="password"]{padding-left:3.7rem}.wishnode-login-mascot-upper{right:-1.5rem;top:2rem;width:8rem}.wishnode-login-mascot-lower{left:-1.25rem;bottom:4rem;width:7rem}}

/* Wishnode polish pass: stronger overrides for real Roundcube markup. */
body.task-login #layout-content.wishnode-login-page {
  position: relative !important;
  inset: auto !important;
  overflow: hidden !important;
  min-height: 100vh !important;
}

body.task-login .wishnode-login-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-height: calc(100vh - 4rem);
  overflow: visible;
}

body.task-login #login-form,
body.task-login .wishnode-login-form {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
  display: block !important;
  width: min(100%, 35rem) !important;
  max-width: 35rem !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

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;
  max-width: none !important;
  border: 0 !important;
  background: transparent !important;
}

body.task-login #login-form tr {
  margin: 0 0 1rem !important;
}

body.task-login #login-form td.title,
body.task-login #login-form label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.task-login #login-form td.input,
body.task-login #login-form .input,
body.task-login #login-form .input-group,
body.task-login #login-form .wishnode-login-field {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 4rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.task-login #login-form .input-group-prepend,
body.task-login #login-form .input-group-append {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 4rem !important;
  height: 4rem !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  background: transparent !important;
  border: 0 !important;
}

body.task-login #login-form .input-group-text {
  width: 4rem !important;
  height: 4rem !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  color: rgba(197, 211, 235, .88) !important;
  font-size: 1.22rem !important;
}

body.task-login #login-form .wishnode-login-field::before,
body.task-login #login-form td.input::before {
  display: none !important;
}

body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="email"],
body.task-login #login-form input[type="password"] {
  position: static !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 4rem !important;
  line-height: 4rem !important;
  margin: 0 !important;
  padding: 0 4.1rem !important;
  border-radius: 8px !important;
  border: 1px solid rgba(164, 185, 219, .27) !important;
  background: rgba(8, 15, 26, .72) !important;
  color: #edf4ff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 14px 32px rgba(0, 0, 0, .14) !important;
}

body.task-login #login-form input[type="text"]:focus,
body.task-login #login-form input[type="email"]:focus,
body.task-login #login-form input[type="password"]:focus {
  border-color: rgba(111, 168, 255, .70) !important;
  box-shadow: 0 0 0 .18rem rgba(111, 168, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

body.task-login #login-form .formbuttons,
body.task-login #login-form p.formbuttons,
body.task-login #login-form .submit {
  display: block !important;
  width: 100% !important;
  margin: 1.9rem 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

body.task-login #login-form input[type="submit"],
body.task-login #login-form button[type="submit"] {
  display: block !important;
  width: 100% !important;
  height: 4.05rem !important;
  margin: 0 !important;
}

body.task-login .wishnode-login-brand {
  margin-bottom: 1.55rem !important;
}

body.task-login .wishnode-login-wordmark {
  width: min(17rem, 48vw) !important;
  height: auto !important;
  object-fit: contain !important;
}

body.task-login #login-footer {
  margin-top: auto !important;
}

/* Empty preview: replace the default Roundcube watermark everywhere. */
#messagecontframe {
  color-scheme: dark;
  background:
    url(../images/wishnode_icon_512x512.png) center calc(50% - 3rem) / 9rem 9rem no-repeat,
    radial-gradient(circle at 50% 44%, rgba(97, 133, 189, .16), transparent 18rem),
    linear-gradient(135deg, rgba(13, 25, 39, .92), rgba(9, 18, 29, .96)) !important;
}

body.task-mail.action-none #messagecontframe,
body.task-mail.action-refresh #messagecontframe {
  opacity: .78 !important;
}

body.task-mail.action-none #layout-content .iframe-wrapper::before,
body.task-mail.action-refresh #layout-content .iframe-wrapper::before {
  content: "No message selected" !important;
}

body.task-mail.action-none #layout-content .iframe-wrapper::after,
body.task-mail.action-refresh #layout-content .iframe-wrapper::after {
  content: "Choose a message from the list to view it here." !important;
}

/* Loading, alerts and system messages. */
#messagestack {
  top: 1.1rem !important;
}

#messagestack .alert,
#messagestack .loading,
.ui.alert,
.boxwarning,
.boxerror,
.boxinformation,
.boxconfirmation,
.boxnotice,
.warning,
.notice {
  border: 1px solid rgba(151, 184, 255, .24) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(28, 45, 66, .96), rgba(13, 24, 38, .96)) !important;
  color: #eaf1ff !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

#messagestack .loading {
  color: #dce8ff !important;
}

#messagestack .alert-warning,
.ui.alert.alert-warning,
.boxwarning {
  border-color: rgba(255, 212, 82, .34) !important;
  background: linear-gradient(135deg, rgba(70, 55, 25, .94), rgba(18, 28, 40, .96)) !important;
}

#messagestack .alert-danger,
.ui.alert.alert-danger,
.boxerror {
  border-color: rgba(255, 91, 115, .35) !important;
  background: linear-gradient(135deg, rgba(74, 32, 45, .94), rgba(18, 28, 40, .96)) !important;
}

#messagestack .alert-success,
.ui.alert.alert-success,
.boxconfirmation {
  border-color: rgba(73, 207, 142, .32) !important;
  background: linear-gradient(135deg, rgba(24, 71, 55, .94), rgba(18, 28, 40, .96)) !important;
}

.spinner-border {
  color: #8fb7ff !important;
  border-color: currentColor rgba(143, 183, 255, .18) currentColor currentColor !important;
}

#messagestack i.icon,
.ui.alert i.icon {
  color: #8fb7ff !important;
}

/* Navigation icons: bigger, calmer, and consistent with the mockup. */
#layout-menu {
  width: 6.1rem;
}

#taskmenu {
  padding: .6rem .42rem !important;
}

#taskmenu a,
#taskmenu .button {
  width: 4.85rem !important;
  min-height: 4.85rem !important;
  margin: .22rem auto .55rem !important;
  padding: .64rem .32rem .52rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .28rem !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

#taskmenu a.selected,
#taskmenu a:focus,
#taskmenu a:hover {
  background: linear-gradient(145deg, rgba(77, 127, 220, .34), rgba(74, 116, 183, .16)) !important;
  border-color: rgba(130, 173, 247, .22) !important;
}

#taskmenu a .inner,
#taskmenu .button .inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .4rem !important;
  width: 100% !important;
  color: rgba(215, 225, 242, .82) !important;
  font-size: .78rem !important;
  line-height: 1.05 !important;
  text-align: center !important;
}

#taskmenu a .inner::before,
#taskmenu .button .inner::before {
  margin: 0 !important;
  width: 2.05rem !important;
  height: 2.05rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(182, 198, 224, .88) !important;
  font-size: 1.62rem !important;
  line-height: 1 !important;
  text-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

#taskmenu a.selected .inner::before,
#taskmenu a:hover .inner::before,
#taskmenu a:focus .inner::before,
#taskmenu a.mail .inner::before,
#taskmenu a.compose .inner::before {
  color: #66a8ff !important;
}

#taskmenu .special-buttons {
  border-top: 1px solid rgba(151, 174, 210, .16) !important;
  padding-top: .75rem !important;
}

#taskmenu a.theme .inner::before,
#taskmenu a.about .inner::before {
  color: rgba(190, 204, 228, .82) !important;
}

#taskmenu a.logout .inner,
#taskmenu a.logout .inner::before {
  color: #ff647b !important;
}

/* Top toolbar icons and controls. */
#messagelist-header .toolbar a,
#layout-content > .header .toolbar a,
#mailtoolbar a,
#mailtoolbar .button {
  min-width: 4rem !important;
  min-height: 3.35rem !important;
  padding: .34rem .58rem !important;
}

#messagelist-header .toolbar a .inner,
#layout-content > .header .toolbar a .inner,
#mailtoolbar a .inner,
#mailtoolbar .button .inner {
  color: rgba(208, 220, 238, .78) !important;
  font-size: .78rem !important;
}

#messagelist-header .toolbar a .inner::before,
#layout-content > .header .toolbar a .inner::before,
#mailtoolbar a .inner::before,
#mailtoolbar .button .inner::before {
  color: rgba(190, 204, 228, .82) !important;
  font-size: 1.35rem !important;
  margin-bottom: .16rem !important;
}

#messagelist-header .toolbar a:hover .inner::before,
#layout-content > .header .toolbar a:hover .inner::before,
#mailtoolbar a:hover .inner::before {
  color: #8fb7ff !important;
}

#mailtoolbar .disabled .inner,
#mailtoolbar .disabled .inner::before,
#messagelist-header .disabled .inner,
#messagelist-header .disabled .inner::before {
  color: rgba(143, 158, 184, .28) !important;
}

/* Lists, empty states and lower controls. */
.listing-info,
.list-empty,
.messagelist .empty,
#messagelist-content .listing-info,
#messagelist-content .empty,
#messagelist-content td.empty {
  color: rgba(188, 202, 224, .62) !important;
  background: transparent !important;
  font-weight: 500 !important;
}

#messagelist-footer,
#layout-sidebar .footer,
.pagenav {
  background: rgba(8, 16, 27, .74) !important;
  border-top: 1px solid rgba(151, 174, 210, .14) !important;
}

#quotadisplay::before,
.quota-widget::before {
  color: rgba(190, 204, 228, .82) !important;
}

.quota-widget .value,
#quotadisplay .value,
.quota-widget .bar,
#quotadisplay .bar {
  background: rgba(151, 174, 210, .16) !important;
}

.quota-widget .bar .value,
#quotadisplay .bar .value {
  background: linear-gradient(90deg, #6fa8ff, #4d7fdc) !important;
}

.pagenav a,
.pagenav .button,
#messagelist-footer a,
#messagelist-footer .button {
  color: rgba(190, 204, 228, .72) !important;
}

.pagenav a:hover,
#messagelist-footer a:hover {
  color: #8fb7ff !important;
  background: rgba(111, 168, 255, .10) !important;
}

/* Menus and forms that Roundcube opens after login. */
.popupmenu,
.popover,
.ui-dialog,
.modal-content,
.dropdown-menu,
.searchoptions,
.formcontainer,
.propform {
  background: rgba(12, 22, 35, .98) !important;
  color: #eaf1ff !important;
}

.popupmenu .listing li,
.popupmenu .listing a,
.menu.listing li,
.menu.listing a {
  color: rgba(218, 228, 244, .82) !important;
}

.popupmenu .listing li:hover,
.popupmenu .listing a:hover,
.menu.listing li:hover,
.menu.listing a:hover {
  background: rgba(111, 168, 255, .13) !important;
  color: #fff !important;
}

@media (max-height: 820px) {
  body.task-login .wishnode-login-card {
    min-height: auto !important;
    padding-top: 2.2rem !important;
    padding-bottom: 1.3rem !important;
  }

  body.task-login #login-footer {
    margin-top: 2rem !important;
  }
}

/* Settings and other framed empty screens. */
#taskmenu a.about,
#taskmenu .about,
#taskmenu [onclick*="about_dialog"] {
  display: none !important;
}

body.task-settings #layout-content,
body.task-addressbook #layout-content,
body.task-settings #layout-content .iframe-wrapper,
body.task-addressbook #layout-content .iframe-wrapper,
body.task-settings #preferences-frame,
body.task-settings iframe,
body.task-addressbook iframe {
  background:
    radial-gradient(circle at 50% 42%, rgba(97, 133, 189, .16), transparent 20rem),
    radial-gradient(circle at 78% 28%, rgba(54, 88, 146, .10), transparent 25rem),
    linear-gradient(135deg, rgba(13, 25, 39, .94), rgba(9, 18, 29, .97)) !important;
}

body.task-settings #layout-content .iframe-wrapper,
body.task-addressbook #layout-content .iframe-wrapper {
  position: relative;
}

body.task-settings #layout-content .iframe-wrapper::before,
body.task-addressbook #layout-content .iframe-wrapper::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 9rem;
  height: 9rem;
  transform: translate(-50%, -50%);
  border-radius: 1.6rem;
  background: url(../images/wishnode_icon_512x512.png) center / contain no-repeat;
  opacity: .55;
  filter: drop-shadow(0 22px 42px rgba(0, 0, 0, .32));
  pointer-events: none;
  z-index: 0;
}

body.task-settings #layout-content .iframe-wrapper::after,
body.task-addressbook #layout-content .iframe-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% calc(45% + 7.6rem), rgba(9, 18, 29, .36), transparent 11rem),
    linear-gradient(135deg, transparent 0 48%, rgba(160, 183, 222, .055) 48% 49%, transparent 49%),
    linear-gradient(45deg, transparent 0 50%, rgba(160, 183, 222, .035) 50% 51%, transparent 51%);
  z-index: 0;
}

body.task-settings #preferences-frame,
body.task-addressbook iframe,
body.task-settings iframe {
  position: relative;
  z-index: 1;
  opacity: .82;
}

body.task-settings.action-none #preferences-frame,
body.task-addressbook.action-none iframe {
  opacity: .01;
}

body.task-settings .listing li.selected,
body.task-settings .listing tr.selected,
body.task-settings #sections-table .selected,
body.task-settings #settings-sections .selected {
  background: linear-gradient(90deg, rgba(78, 130, 219, .30), rgba(63, 95, 149, .14)) !important;
  color: #8fc5ff !important;
}

body.task-settings #sections-table li,
body.task-settings #sections-table tr,
body.task-settings #settings-sections li,
body.task-settings #settings-sections tr {
  border-color: rgba(151, 174, 210, .12) !important;
}

body.task-settings #sections-table a,
body.task-settings #settings-sections a {
  color: rgba(218, 228, 244, .78) !important;
}

body.task-settings #sections-table .selected a,
body.task-settings #settings-sections .selected a {
  color: #8fc5ff !important;
}

/* More complete message stack override. */
#messagestack .alert,
#messagestack .loading,
#messagestack .alert-info,
#messagestack .alert-warning,
#messagestack .alert-danger,
#messagestack .alert-success {
  min-height: 2.9rem !important;
  display: flex !important;
  align-items: center !important;
  gap: .75rem !important;
  padding: .7rem 1rem !important;
}

#messagestack .alert .icon,
#messagestack .loading .icon {
  width: 1.55rem !important;
  height: 1.55rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}

#messagestack .loading .icon::before {
  color: #8fb7ff !important;
}

/* Replace any remaining old logo surfaces with Wishnode tone. */
#logo[src$="logo.svg"],
.popover-header #logo,
#layout-menu .popover-header #logo {
  background: transparent !important;
  border-radius: 12px !important;
}

/* Hide Roundcube's internal empty iframe and render our own empty state. */
#layout-content .iframe-wrapper.wishnode-empty-frame {
  background:
    radial-gradient(circle at 50% 43%, rgba(97, 133, 189, .18), transparent 21rem),
    radial-gradient(circle at 78% 28%, rgba(54, 88, 146, .10), transparent 25rem),
    linear-gradient(135deg, rgba(13, 25, 39, .96), rgba(9, 18, 29, .98)) !important;
}

#layout-content .iframe-wrapper.wishnode-empty-frame > iframe,
#layout-content .iframe-wrapper.wishnode-empty-frame > .wishnode-empty-frame-target {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#layout-content .iframe-wrapper.wishnode-empty-frame::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 44% !important;
  width: 9.6rem !important;
  height: 9.6rem !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 1.65rem !important;
  background:
    linear-gradient(180deg, rgba(45, 63, 91, .68), rgba(29, 43, 63, .82)),
    url(../images/wishnode_icon_512x512.png) center / 78% 78% no-repeat !important;
  background-blend-mode: normal !important;
  opacity: .74 !important;
  filter: drop-shadow(0 22px 42px rgba(0, 0, 0, .34)) !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

#layout-content .iframe-wrapper.wishnode-empty-frame::after {
  content: "No message selected\AChoose a message from the list to view it here." !important;
  white-space: pre !important;
  position: absolute !important;
  left: 50% !important;
  top: calc(44% + 7.6rem) !important;
  width: min(30rem, 80%) !important;
  transform: translateX(-50%) !important;
  color: rgba(214, 224, 242, .72) !important;
  font-size: 1.72rem !important;
  line-height: 1.65 !important;
  font-weight: 520 !important;
  text-align: center !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

#layout-content .iframe-wrapper.wishnode-empty-frame::first-line {
  color: rgba(226, 235, 250, .78);
}

body.task-settings #layout-content .iframe-wrapper.wishnode-empty-frame::after,
body.task-addressbook #layout-content .iframe-wrapper.wishnode-empty-frame::after {
  content: "" !important;
}

body.task-settings #layout-content .iframe-wrapper.wishnode-empty-frame::before,
body.task-addressbook #layout-content .iframe-wrapper.wishnode-empty-frame::before {
  top: 45% !important;
}

/* Login footer cleanup: remove the heavy strip under the button. */
body.task-login #login-form {
  display: flex !important;
  flex-direction: column !important;
}

body.task-login #login-footer,
body.task-login #login-form #login-footer {
  position: static !important;
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: clamp(3.4rem, 7vh, 6rem) 0 0 !important;
  padding: 1rem 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(164, 185, 219, .16) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  text-align: center !important;
  color: rgba(190, 201, 219, .68) !important;
}

body.task-login #login-footer::before,
body.task-login #login-footer::after {
  display: none !important;
}

body.task-login .wishnode-login-footer-brand {
  min-height: 1.4rem !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(190, 201, 219, .72) !important;
}

body.task-login .wishnode-login-footer-brand img {
  width: 1rem !important;
  height: 1rem !important;
  opacity: .68 !important;
  filter: none !important;
}

body.task-login .wishnode-login-form input[type="submit"],
body.task-login #login-form input[type="submit"],
body.task-login .wishnode-login-form button[type="submit"],
body.task-login #login-form button[type="submit"] {
  margin-bottom: 0 !important;
  border-radius: 8px !important;
}

body.task-login .wishnode-login-card {
  padding-bottom: clamp(1.55rem, 2.4vw, 2.15rem) !important;
}

@media (max-height: 820px) {
  body.task-login #login-footer,
  body.task-login #login-form #login-footer {
    margin-top: 2.4rem !important;
  }
}

/* Final navigation and empty-state cleanup. */
#layout-menu .popover-header {
  min-height: 6.45rem !important;
  padding: .75rem 0 .55rem !important;
}

#layout-menu .popover-header #logo,
#layout-menu #logo,
.popover-header #logo {
  width: 4rem !important;
  height: 4rem !important;
  min-width: 4rem !important;
  min-height: 4rem !important;
  max-width: 4rem !important;
  max-height: 4rem !important;
  object-fit: contain !important;
  opacity: .96 !important;
  filter: drop-shadow(0 14px 30px rgba(71, 125, 218, .26)) !important;
}

#taskmenu a.theme,
#taskmenu .theme,
#taskmenu a.light,
#taskmenu .light,
#taskmenu [name="theme"],
#taskmenu [class*="theme"] {
  display: none !important;
}

#taskmenu .special-buttons {
  padding-top: 0 !important;
}

#layout-content .iframe-wrapper.wishnode-empty-frame::before,
#layout-content .iframe-wrapper.wishnode-empty-frame::after,
body.task-mail.action-none #layout-content .iframe-wrapper::before,
body.task-mail.action-none #layout-content .iframe-wrapper::after,
body.task-mail.action-refresh #layout-content .iframe-wrapper::before,
body.task-mail.action-refresh #layout-content .iframe-wrapper::after {
  content: none !important;
  display: none !important;
}

.wishnode-empty-state {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  pointer-events: none;
  text-align: center;
}

.wishnode-empty-frame .wishnode-empty-state {
  display: flex;
}

.wishnode-empty-state-icon {
  width: 8.6rem;
  height: 8.6rem;
  object-fit: contain;
  opacity: .58;
  filter: drop-shadow(0 24px 44px rgba(0, 0, 0, .30));
  margin-bottom: .8rem;
}

.wishnode-empty-state-title {
  color: rgba(226, 235, 250, .78);
  font-size: clamp(1.55rem, 2.1vw, 2.15rem);
  line-height: 1.15;
  font-weight: 560;
}

.wishnode-empty-state-text {
  color: rgba(170, 184, 207, .74);
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 500;
}

body.task-settings .wishnode-empty-state-title,
body.task-settings .wishnode-empty-state-text,
body.task-addressbook .wishnode-empty-state-title,
body.task-addressbook .wishnode-empty-state-text {
  display: none;
}

/* Remove the remaining login grey trail under the button. */
body.task-login #login-form,
body.task-login .wishnode-login-form,
body.task-login #login-form .formbuttons,
body.task-login #login-form p,
body.task-login #login-form .submit,
body.task-login #login-form .formcontent,
body.task-login #login-form .input,
body.task-login #login-form .input-group,
body.task-login #login-form td,
body.task-login #login-form tr {
  background: transparent !important;
  box-shadow: none !important;
}

body.task-login #login-form::before,
body.task-login #login-form::after,
body.task-login .wishnode-login-form::before,
body.task-login .wishnode-login-form::after,
body.task-login #login-form .formbuttons::before,
body.task-login #login-form .formbuttons::after {
  content: none !important;
  display: none !important;
}

body.task-login #login-form .formbuttons,
body.task-login #login-form p.formbuttons {
  margin-top: 1.9rem !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  height: auto !important;
}

body.task-login #login-footer,
body.task-login #login-form #login-footer {
  margin-top: 3.25rem !important;
  padding-top: .95rem !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.task-login .wishnode-login-card {
  background:
    linear-gradient(180deg, rgba(20, 31, 49, .72), rgba(8, 14, 24, .78)),
    radial-gradient(circle at 50% 0%, rgba(126, 151, 198, .13), transparent 24rem) !important;
  overflow: hidden;
}

/* Final alignment pass. */
body.task-login #login-form .formbuttons,
body.task-login #login-form p.formbuttons {
  margin-top: 1.9rem !important;
}

body.task-login #login-form input[type="submit"],
body.task-login #login-form button[type="submit"],
body.task-login .wishnode-login-form input[type="submit"],
body.task-login .wishnode-login-form button[type="submit"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 3.85rem !important;
  min-height: 3.85rem !important;
  padding: 0 1rem !important;
  border: 1px solid rgba(143, 183, 255, .34) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(119, 151, 219, .88), rgba(69, 103, 166, .92)) !important;
  color: #f8fbff !important;
  font-size: 1.04rem !important;
  font-weight: 760 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  box-shadow:
    0 16px 38px rgba(68, 105, 180, .28),
    0 0 0 1px rgba(255, 255, 255, .045) inset,
    0 1px 0 rgba(255, 255, 255, .16) inset !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

body.task-login #login-form input[type="submit"]:hover,
body.task-login #login-form button[type="submit"]:hover,
body.task-login .wishnode-login-form input[type="submit"]:hover,
body.task-login .wishnode-login-form button[type="submit"]:hover {
  background:
    linear-gradient(180deg, rgba(133, 166, 236, .96), rgba(77, 116, 185, .96)) !important;
  box-shadow:
    0 20px 46px rgba(75, 120, 210, .34),
    0 0 0 1px rgba(255, 255, 255, .055) inset,
    0 1px 0 rgba(255, 255, 255, .20) inset !important;
}

#layout-menu {
  width: 6.2rem !important;
}

#taskmenu,
#taskmenu .action-buttons,
#taskmenu .special-buttons {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

#taskmenu a,
#taskmenu .button {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
  width: 4.55rem !important;
  min-width: 4.55rem !important;
  max-width: 4.55rem !important;
  min-height: 4.75rem !important;
  margin: .18rem auto .58rem !important;
  padding: .62rem .25rem .5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

#taskmenu a .inner,
#taskmenu .button .inner {
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 3.6rem !important;
  display: grid !important;
  grid-template-rows: 2rem auto !important;
  place-items: center !important;
  justify-items: center !important;
  align-items: center !important;
  text-align: center !important;
}

#taskmenu a .inner::before,
#taskmenu .button .inner::before {
  position: static !important;
  transform: none !important;
  float: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2rem !important;
  height: 2rem !important;
  margin: 0 auto .25rem !important;
  padding: 0 !important;
  text-align: center !important;
}

#taskmenu a.logout,
#taskmenu a.logout .inner {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Correct Roundcube task menu geometry: icons are on a::before, not .inner::before. */
#taskmenu a,
#taskmenu .button {
  position: relative !important;
  display: grid !important;
  grid-template-rows: 2.15rem 1.2rem !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 4.65rem !important;
  min-width: 4.65rem !important;
  max-width: 4.65rem !important;
  height: 4.75rem !important;
  min-height: 4.75rem !important;
  margin: .2rem auto .58rem !important;
  padding: .55rem .25rem .48rem !important;
  line-height: 1 !important;
  overflow: hidden !important;
  text-align: center !important;
}

#taskmenu a::before,
#taskmenu .button::before {
  position: static !important;
  display: flex !important;
  float: none !important;
  grid-row: 1 !important;
  grid-column: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.15rem !important;
  min-width: 2.15rem !important;
  height: 2.15rem !important;
  min-height: 2.15rem !important;
  margin: 0 auto !important;
  padding: 0 !important;
  font-size: 1.55rem !important;
  line-height: 1 !important;
  text-align: center !important;
  color: rgba(190, 204, 228, .86) !important;
}

#taskmenu a .inner,
#taskmenu .button .inner {
  position: static !important;
  display: block !important;
  grid-row: 2 !important;
  grid-column: 1 !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: .18rem 0 0 !important;
  padding: 0 !important;
  font-size: .76rem !important;
  line-height: 1.08 !important;
  text-align: center !important;
  color: rgba(215, 225, 242, .82) !important;
}

#taskmenu a .inner::before,
#taskmenu .button .inner::before {
  content: none !important;
  display: none !important;
}

#taskmenu a.selected,
#taskmenu a:focus,
#taskmenu a:hover {
  border: 1px solid rgba(130, 173, 247, .25) !important;
  background: linear-gradient(145deg, rgba(77, 127, 220, .34), rgba(74, 116, 183, .16)) !important;
  box-shadow: inset 0 0 0 1px rgba(130, 173, 247, .10), 0 12px 26px rgba(38, 80, 150, .16) !important;
}

#taskmenu a.selected::before,
#taskmenu a:hover::before,
#taskmenu a:focus::before,
#taskmenu a.mail::before,
#taskmenu a.compose::before {
  color: #66a8ff !important;
}

#taskmenu a.logout::before {
  color: #ff647b !important;
}

#taskmenu a.logout .inner {
  color: #ff647b !important;
}