:root {
    --ray-bg: #070b22;
    --ray-bg-2: #111341;
    --ray-panel: rgba(19, 26, 64, .72);
    --ray-panel-2: rgba(26, 34, 79, .86);
    --ray-line: rgba(126, 156, 255, .22);
    --ray-text: #f7f9ff;
    --ray-muted: #9ca8cf;
    --ray-cyan: #22d3ee;
    --ray-blue: #3b82f6;
    --ray-violet: #8b5cf6;
    --ray-green: #22c55e;
    --ray-red: #ef4444;
}

html,
body {
    background:
        radial-gradient(circle at 72% 12%, rgba(139, 92, 246, .42), transparent 32rem),
        radial-gradient(circle at 58% 96%, rgba(37, 99, 235, .42), transparent 34rem),
        radial-gradient(circle at 12% 88%, rgba(111, 35, 190, .35), transparent 28rem),
        linear-gradient(135deg, #05071a 0%, #07102f 42%, #0a1234 100%);
    color: var(--ray-text);
}

body {
    color: var(--ray-text) !important;
}

#raymail-globe-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    opacity: .95;
}

body.task-login #raymail-globe-canvas,
body.raymail-watermark #raymail-globe-canvas {
    pointer-events: none !important;
    cursor: default;
}

#layout {
    position: relative;
    z-index: 1;
}

body,
button,
input,
select,
textarea {
    letter-spacing: 0;
}

#layout {
    background: transparent;
}

#logo,
body.task-login #logo,
#layout-menu .popover-header img {
    display: none !important;
}

#layout-menu .popover-header {
    min-height: 58px;
}

#layout-menu .popover-header::before {
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    margin: 16px auto;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--ray-cyan), var(--ray-blue) 48%, var(--ray-violet));
    box-shadow: 0 0 28px rgba(34, 211, 238, .26);
}

#layout-menu {
    background: linear-gradient(180deg, rgba(9, 17, 43, .96), rgba(7, 13, 33, .98));
    border-right: 1px solid var(--ray-line);
    box-shadow: 18px 0 55px rgba(2, 6, 23, .28);
    backdrop-filter: blur(18px);
}

#layout-sidebar,
#layout-list,
#layout-content,
.listbox,
.scroller,
#folderlist-content,
#messagelist-content,
.iframe-wrapper {
    background: rgba(8, 13, 36, .68) !important;
    border-color: var(--ray-line);
    backdrop-filter: blur(18px);
}

#layout-content {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 24%, rgba(139, 92, 246, .16), transparent 28rem),
        rgba(7, 11, 34, .46);
}

#layout-list {
    background: rgba(8, 13, 36, .76) !important;
}

#layout-sidebar {
    background: linear-gradient(180deg, rgba(9, 17, 45, .94), rgba(7, 12, 34, .96)) !important;
}

#messagelist-content,
#folderlist-content {
    background: rgba(7, 11, 34, .66) !important;
}

#messagecontframe,
#preferences-frame,
#contact-frame,
#messagepartframe,
iframe {
    background: transparent !important;
}

#layout-content::before {
    content: "";
    position: absolute;
    width: min(42vw, 560px);
    height: min(42vw, 560px);
    right: 11vw;
    top: 9vh;
    border-radius: 50%;
    pointer-events: none;
    opacity: .22;
    z-index: 0;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .38), transparent 4%),
        radial-gradient(circle at 42% 34%, rgba(255, 255, 255, .2), transparent 9%),
        radial-gradient(circle at 54% 45%, rgba(255, 255, 255, .16), transparent 12%),
        radial-gradient(circle at 48% 62%, rgba(255, 255, 255, .12), transparent 11%),
        repeating-linear-gradient(88deg, rgba(255, 255, 255, .18) 0 1px, transparent 1px 9px),
        repeating-linear-gradient(178deg, rgba(34, 211, 238, .12) 0 1px, transparent 1px 13px),
        radial-gradient(circle at 38% 32%, rgba(34, 211, 238, .45), transparent 30%),
        radial-gradient(circle at 65% 70%, rgba(139, 92, 246, .42), transparent 36%),
        #111936;
    box-shadow:
        inset -36px -34px 70px rgba(0, 0, 0, .48),
        inset 18px 14px 44px rgba(255, 255, 255, .06),
        0 0 80px rgba(59, 130, 246, .24),
        0 0 140px rgba(139, 92, 246, .18);
    animation: raymail-globe-spin 28s linear infinite;
}

#layout-content::after {
    content: "";
    position: absolute;
    width: min(50vw, 680px);
    height: min(50vw, 680px);
    right: 7vw;
    top: 4vh;
    pointer-events: none;
    opacity: .16;
    z-index: 0;
    background:
        conic-gradient(from 0deg, transparent, rgba(34, 211, 238, .28), transparent 18%, rgba(139, 92, 246, .24), transparent 42%, rgba(59, 130, 246, .2), transparent 70%, rgba(34, 211, 238, .24), transparent);
    filter: blur(1px);
    animation: raymail-orbit-spin 18s linear infinite;
}

#layout-content > * {
    position: relative;
    z-index: 1;
}

@keyframes raymail-globe-spin {
    from {
        transform: rotate(0deg) translate3d(0, 0, 0);
    }
    to {
        transform: rotate(360deg) translate3d(0, 0, 0);
    }
}

@keyframes raymail-orbit-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

#layout > div > .header,
#layout > div > .footer,
.popover-header {
    background: rgba(13, 18, 46, .78) !important;
    color: var(--ray-text);
    border-color: var(--ray-line);
    backdrop-filter: blur(18px);
}

#layout > div > .header .header-title,
#layout > div > .header a.button,
.listing li a,
.listing tbody td,
.listing tbody td a,
.menu a,
.folderlist li.mailbox a {
    color: var(--ray-text);
}

#taskmenu a {
    color: #f5f7ff;
    border-left: 3px solid transparent;
    opacity: .92;
}

#taskmenu a.selected,
#taskmenu a:hover,
.menu a:not(.disabled):hover,
.menu a:not(.disabled):focus,
.header a.button.icon:not(.disabled):hover,
.header a.button.icon:not(.disabled):focus {
    background: linear-gradient(135deg, rgba(34, 211, 238, .18), rgba(139, 92, 246, .22));
    color: #ffffff;
}

#taskmenu a.selected {
    border-left-color: var(--ray-cyan);
    box-shadow: inset 0 0 28px rgba(34, 211, 238, .10);
}

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

.listing li,
.listing li ul,
.listing tbody td,
.table td,
.table th,
.table thead th,
.messagelist tbody td,
.folderlist li.mailbox,
.messagelist tr td {
    border-color: rgba(126, 156, 255, .18);
    background-color: transparent !important;
}

.listing li.selected,
.listing li.selected > a,
.listing li.selected > div > a,
.listing tr.selected td,
.messagelist tr.selected td {
    color: #ffffff;
    background: linear-gradient(90deg, rgba(34, 211, 238, .22), rgba(139, 92, 246, .20)) !important;
}

.folderlist li.mailbox {
    min-height: 36px;
}

.folderlist li.mailbox a {
    font-weight: 700;
}

.folderlist li.mailbox.selected > a,
.folderlist li.mailbox.selected > div > a {
    background: linear-gradient(90deg, rgba(34, 211, 238, .28), rgba(139, 92, 246, .24)) !important;
}

.folderlist li.mailbox.disabled,
.folderlist li.mailbox.disabled a {
    color: #7f8dbb !important;
    opacity: .72 !important;
}

.folderlist li.mailbox a:before,
.listing.iconized li a:before {
    color: #d7e2ff !important;
}

.folderlist li.mailbox.selected a:before,
.listing.iconized li.selected a:before {
    color: #ffffff !important;
}

.listing li:hover,
.listing tr:hover td,
.messagelist tr:hover td {
    background: rgba(67, 97, 238, .15) !important;
}

.messagelist tr.unread td,
.messagelist tr.unread td a,
.messagelist tr.unread span.subject {
    color: #ffffff !important;
    font-weight: 700;
}

.messagelist td,
.messagelist td a,
.messagelist span.subject,
.folderlist li.mailbox a,
.folderlist li.mailbox span {
    color: var(--ray-text) !important;
}

.messagelist tr:not(.unread) td,
.messagelist tr:not(.unread) td a,
.messagelist tr:not(.unread) span.subject {
    color: #d8def7 !important;
}

.messagelist span.fromto,
.messagelist span.date,
.messagelist span.size,
.messagelist td.fromto,
.messagelist td.date,
.messagelist td.size {
    color: #aeb9e7 !important;
}

.messagelist tr.selected span.fromto,
.messagelist tr.selected span.date,
.messagelist tr.selected td.date,
.messagelist tr.selected td.fromto {
    color: #f8fbff !important;
}

.messagelist td.subject span.msgicon.status,
.messagelist td.flags span,
.messagelist span.attachment span {
    color: #b8c3ef !important;
}

.toolbar a,
.toolbar .button,
.pagenav a,
.pagenav .button,
a.button.icon,
button.btn,
.menu.toolbar a {
    color: #f2f6ff !important;
    opacity: .92;
}

.toolbar a.disabled,
.toolbar .button.disabled,
.pagenav a.disabled,
.pagenav .button.disabled,
a.disabled:not(.btn),
.button.disabled,
.menu a.disabled {
    color: #9fb0e6 !important;
    opacity: .70 !important;
}

#messagelist-header .toolbar a,
#messagelist-header a.button,
#layout-content > .header .toolbar a,
#layout-content > .header a.button {
    text-shadow: 0 0 12px rgba(255, 255, 255, .14);
}

.toolbar a:not(.disabled):hover,
.pagenav a:not(.disabled):hover,
a.button.icon:not(.disabled):hover {
    color: #ffffff !important;
}

.pagenav,
#layout-list > .footer,
#layout-sidebar > .footer {
    background: rgba(10, 16, 43, .92) !important;
    border-color: rgba(166, 188, 255, .32) !important;
}

.pagenav .pagenav-text,
.pagenav input,
.quota-widget .count {
    color: #dbe4ff !important;
}

.quota-widget:before {
    color: #9fb4ff !important;
}

.box,
.boxcontent,
.formcontainer,
.formcontent,
.iframe-wrapper,
.contact-header,
.table-widget,
.message-partheaders,
#message-header,
.message-part {
    background: transparent;
}

.formcontent,
.boxcontent,
.message-part,
.message-partheaders,
.table-widget,
.skinselection,
.propform,
.contact-header,
.table,
.records-table,
.listing {
    color: var(--ray-text);
}

.formcontent .hint,
.listing span.secondary,
.listing-info,
.messagelist tr:not(.flagged):not(.deleted) td.subject span.date,
.messagelist tr:not(.flagged):not(.deleted) td.subject span.fromto,
.messagelist tr:not(.flagged):not(.deleted) td.subject span.size,
::placeholder {
    color: var(--ray-muted) !important;
}

input,
textarea,
select,
.form-control,
.custom-select,
.multi-input > .content,
.recipient-input {
    background-color: rgba(8, 13, 36, .72) !important;
    color: var(--ray-text) !important;
    border-color: rgba(126, 156, 255, .32) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.custom-select:focus,
.multi-input.focused > .content,
.recipient-input.focus {
    border-color: rgba(34, 211, 238, .78) !important;
    box-shadow: 0 0 0 .2rem rgba(34, 211, 238, .14), 0 0 28px rgba(59, 130, 246, .14) !important;
}

.btn-primary,
.button.mainaction,
button.mainaction,
a.button.mainaction {
    background: linear-gradient(135deg, var(--ray-cyan), var(--ray-blue) 45%, var(--ray-violet)) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(59, 130, 246, .28);
}

.btn-secondary,
.button,
button.btn {
    background: rgba(22, 30, 71, .82);
    border-color: rgba(126, 156, 255, .28);
    color: var(--ray-text);
}

.button.delete,
.btn-danger {
    background: linear-gradient(135deg, #fb7185, var(--ray-red)) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

.btn:hover,
.button:hover {
    filter: brightness(1.08);
}

.searchbar,
.searchbar form,
#mailsearchform {
    background: rgba(16, 23, 56, .88) !important;
    border-color: rgba(126, 156, 255, .30) !important;
    color: #f8fbff !important;
}

.searchbar input {
    color: #f8fbff !important;
}

.searchbar:before,
.searchbar form:before {
    color: #aebcff !important;
}

.quota-widget {
    color: var(--ray-muted);
}

.quota-widget .bar {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(126, 156, 255, .26);
}

.quota-widget .value {
    background: linear-gradient(90deg, var(--ray-cyan), var(--ray-violet));
}

.folderlist li.mailbox .unreadcount {
    background: linear-gradient(135deg, var(--ray-cyan), var(--ray-violet));
    color: #ffffff;
}

.ui.alert,
#messagestack .ui.alert {
    border: 1px solid rgba(126, 156, 255, .26);
    background: rgba(18, 25, 60, .92);
    color: var(--ray-text);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .26);
}

#messagestack .error,
.boxerror {
    background: rgba(127, 29, 29, .88) !important;
}

#messagestack .confirmation,
.boxconfirmation {
    background: rgba(20, 83, 45, .88) !important;
}

.ui-dialog,
.popover,
.popupmenu,
.ui-widget-content,
.ui-widget-header {
    background: rgba(13, 18, 46, .94) !important;
    border-color: rgba(126, 156, 255, .26) !important;
    color: var(--ray-text) !important;
    backdrop-filter: blur(18px);
}

.message-htmlpart,
html.iframe body {
    background: #ffffff;
    color: #1f2937;
}

html.iframe body.task-mail,
html.iframe body.task-settings,
html.iframe body.task-addressbook {
    background:
        radial-gradient(circle at 72% 12%, rgba(139, 92, 246, .30), transparent 30rem),
        linear-gradient(135deg, #05071a, #08102f 55%, #0a1234);
    color: var(--ray-text);
}

#login-form,
#login-footer {
    color: var(--ray-text);
}

.login-page #layout-content,
body.task-login #layout-content {
    background: transparent;
}

body.task-login #layout {
    align-items: center;
    justify-content: center;
}

body.task-login #layout-content {
    max-width: 460px;
    flex: none;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

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

body.task-login::before {
    display: none !important;
}

body.task-login::after {
    display: none !important;
}

body.task-login .input-group-text,
body.task-login form td.input::before {
    display: none !important;
}

body.task-login form td.input .form-control {
    padding-left: 1rem !important;
}

body.task-login::before {
    content: "";
    position: fixed;
    width: min(42vw, 520px);
    height: min(42vw, 520px);
    left: 18vw;
    top: 23vh;
    border-radius: 50%;
    pointer-events: none;
    opacity: .24;
    background:
        repeating-linear-gradient(88deg, rgba(255, 255, 255, .18) 0 1px, transparent 1px 10px),
        repeating-linear-gradient(178deg, rgba(34, 211, 238, .12) 0 1px, transparent 1px 14px),
        radial-gradient(circle at 38% 32%, rgba(34, 211, 238, .42), transparent 32%),
        radial-gradient(circle at 65% 70%, rgba(139, 92, 246, .38), transparent 38%),
        #101936;
    box-shadow: inset -34px -32px 70px rgba(0, 0, 0, .58), 0 0 110px rgba(59, 130, 246, .24);
    animation: raymail-globe-spin 32s linear infinite;
}

body.task-login::after {
    content: "";
    position: fixed;
    width: 44vw;
    height: 44vw;
    left: 14vw;
    top: 17vh;
    pointer-events: none;
    opacity: .15;
    background: conic-gradient(from 0deg, transparent, rgba(34, 211, 238, .34), transparent 18%, rgba(139, 92, 246, .28), transparent 52%, rgba(59, 130, 246, .28), transparent);
    animation: raymail-orbit-spin 22s linear infinite;
}

body.task-login form {
    background: rgba(13, 18, 46, .74);
    border: 1px solid rgba(126, 156, 255, .28);
    border-radius: 12px;
    padding: 1.4rem;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .32);
    backdrop-filter: blur(20px);
    position: relative;
    z-index: 1;
}

body.task-login form table {
    width: 100%;
}

body.task-login form td {
    display: block;
    width: 100%;
    padding: .35rem 0;
}

body.task-login form td.title {
    color: var(--ray-muted);
    font-size: .9rem;
}

body.task-login form td.title label {
    margin: 0;
}

body.task-login form td.input .form-control {
    width: 100%;
}

body.task-login .formbuttons {
    margin-top: 1rem;
    text-align: center;
}

body.task-login .formbuttons .button {
    width: 100%;
    min-height: 42px;
}

html:not(.touch) ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

html:not(.touch) ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .04);
}

html:not(.touch) ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--ray-blue), var(--ray-violet));
    border-radius: 999px;
}

@media screen and (max-width: 768px) {
    #layout-sidebar,
    #layout-list,
    #layout-content {
        background: rgba(7, 11, 34, .92);
    }

    #layout-content::before,
    #layout-content::after {
        width: 80vw;
        height: 80vw;
        right: -28vw;
        top: 14vh;
        opacity: .12;
    }
}

@media (prefers-reduced-motion: reduce) {
    #layout-content::before,
    #layout-content::after {
        animation: none;
    }
}

/* RayMail v2 polish: a full app shell instead of partial recoloring. */
body:not(.task-login) #layout {
    gap: 12px;
    padding: 12px 12px 12px 0;
    background:
        radial-gradient(circle at 78% 15%, rgba(139, 92, 246, .34), transparent 34rem),
        radial-gradient(circle at 34% 92%, rgba(37, 99, 235, .26), transparent 30rem),
        linear-gradient(135deg, #05071a, #08102f 55%, #0a1234);
}

body:not(.task-login) #layout-menu {
    width: 78px;
    flex: 0 0 78px;
    border-radius: 0 16px 16px 0;
    border: 1px solid rgba(126, 156, 255, .20);
    border-left: 0;
    background: linear-gradient(180deg, rgba(12, 21, 52, .96), rgba(6, 12, 32, .98)) !important;
    overflow: hidden;
}

body:not(.task-login) #layout-menu .popover-header,
body:not(.task-login) #taskmenu,
body:not(.task-login) #taskmenu .special-buttons,
body:not(.task-login) #taskmenu .action-buttons {
    background: transparent !important;
}

body:not(.task-login) #taskmenu a {
    box-sizing: border-box;
    width: calc(100% - 16px) !important;
    margin: 4px 8px;
    border-radius: 12px;
    border-left: 0;
    background: transparent !important;
    overflow: hidden;
}

body:not(.task-login) #taskmenu a.selected,
body:not(.task-login) #taskmenu a:hover {
    background: linear-gradient(135deg, rgba(34, 211, 238, .24), rgba(139, 92, 246, .28)) !important;
}

body:not(.task-login) #taskmenu a.mail.selected {
    background: linear-gradient(135deg, rgba(34, 211, 238, .34), rgba(139, 92, 246, .30)) !important;
    box-shadow: 0 0 24px rgba(34, 211, 238, .10);
}

body:not(.task-login) #layout-sidebar,
body:not(.task-login) #layout-list,
body:not(.task-login) #layout-content {
    overflow: hidden;
    border: 1px solid rgba(126, 156, 255, .28);
    border-radius: 16px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .28);
}

body.task-mail #layout-sidebar {
    flex: 0 0 300px;
    min-width: 260px;
    max-width: 320px;
}

body.task-mail #layout-list {
    flex: 0 0 470px;
    min-width: 380px;
    max-width: 520px;
}

body.task-mail #layout-content {
    flex: 1 1 auto;
    min-width: 420px;
}

body:not(.task-login) #layout > div > .header {
    height: 56px;
    min-height: 56px;
    line-height: 56px;
    background: rgba(16, 24, 58, .88) !important;
    border-bottom: 1px solid rgba(126, 156, 255, .26);
}

body:not(.task-login) #layout-sidebar > .header .username {
    color: #ffffff;
    font-weight: 800;
}

body:not(.task-login) #folderlist-content,
body:not(.task-login) #messagelist-content,
body:not(.task-login) .iframe-wrapper {
    background: rgba(5, 9, 28, .62) !important;
}

body:not(.task-login) .folderlist li.mailbox {
    margin: 6px 10px;
    border: 0;
    border-radius: 12px;
}

body:not(.task-login) .folderlist li.mailbox a {
    border-radius: 12px;
    padding-left: 12px;
}

body:not(.task-login) .folderlist li.mailbox.selected > a,
body:not(.task-login) .folderlist li.mailbox:hover > a {
    background: linear-gradient(90deg, rgba(34, 211, 238, .28), rgba(139, 92, 246, .20)) !important;
}

body:not(.task-login) .searchbar {
    height: 48px;
    min-height: 48px;
    background: rgba(14, 21, 52, .92) !important;
    border-bottom: 1px solid rgba(126, 156, 255, .24);
}

body:not(.task-login) .messagelist tr td {
    padding-top: 10px;
    padding-bottom: 10px;
}

body:not(.task-login) .messagelist tr.selected td {
    background: linear-gradient(90deg, rgba(34, 211, 238, .20), rgba(139, 92, 246, .18)) !important;
}

body:not(.task-login) .messagelist tr:hover td {
    background: rgba(58, 82, 170, .18) !important;
}

body:not(.task-login) .pagenav,
body:not(.task-login) #layout-list > .footer,
body:not(.task-login) #layout-sidebar > .footer {
    height: 44px;
    min-height: 44px;
    background: rgba(7, 13, 34, .94) !important;
}

body:not(.task-login) #layout-content::before {
    width: min(34vw, 480px);
    height: min(34vw, 480px);
    right: 7vw;
    top: 18vh;
    opacity: .30;
    background:
        radial-gradient(circle at 50% 50%, transparent 0 58%, rgba(126, 156, 255, .10) 59%, transparent 60%),
        repeating-radial-gradient(circle at 50% 50%, rgba(126, 156, 255, .18) 0 1px, transparent 1px 13px),
        repeating-linear-gradient(90deg, rgba(34, 211, 238, .10) 0 1px, transparent 1px 12px),
        repeating-linear-gradient(0deg, rgba(139, 92, 246, .08) 0 1px, transparent 1px 14px),
        radial-gradient(circle at 36% 30%, rgba(34, 211, 238, .24), transparent 28%),
        radial-gradient(circle at 64% 72%, rgba(139, 92, 246, .22), transparent 36%);
    background-color: transparent;
    -webkit-mask-image: radial-gradient(circle, #000 0 64%, transparent 66%);
    mask-image: radial-gradient(circle, #000 0 64%, transparent 66%);
    filter: drop-shadow(0 0 45px rgba(59, 130, 246, .26));
    box-shadow:
        inset -28px -28px 64px rgba(0, 0, 0, .42),
        inset 14px 12px 34px rgba(255, 255, 255, .05),
        0 0 90px rgba(59, 130, 246, .16);
}

body:not(.task-login) #layout-content::after {
    width: min(42vw, 600px);
    height: min(42vw, 600px);
    right: 3vw;
    top: 11vh;
    opacity: .18;
    border-radius: 50%;
    border: 1px solid rgba(34, 211, 238, .18);
    background:
        conic-gradient(from 0deg, transparent 0 10%, rgba(34, 211, 238, .42) 12%, transparent 18% 38%, rgba(139, 92, 246, .32) 42%, transparent 48% 72%, rgba(59, 130, 246, .32) 76%, transparent 82%);
    filter: blur(.2px);
}

body:not(.task-login) #layout-content > .iframe-wrapper {
    background:
        radial-gradient(circle at 68% 35%, rgba(34, 211, 238, .08), transparent 20rem),
        rgba(5, 9, 28, .38) !important;
}

body.task-login #layout {
    padding: 0;
}

body.task-login::before {
    width: min(34vw, 460px);
    height: min(34vw, 460px);
    left: 23vw;
    top: 25vh;
    opacity: .22;
    background:
        repeating-radial-gradient(circle at 50% 50%, rgba(126, 156, 255, .18) 0 1px, transparent 1px 13px),
        repeating-linear-gradient(88deg, rgba(255, 255, 255, .10) 0 1px, transparent 1px 10px),
        repeating-linear-gradient(178deg, rgba(34, 211, 238, .09) 0 1px, transparent 1px 14px),
        radial-gradient(circle at 38% 32%, rgba(34, 211, 238, .32), transparent 32%),
        radial-gradient(circle at 65% 70%, rgba(139, 92, 246, .30), transparent 38%);
    background-color: transparent;
    -webkit-mask-image: radial-gradient(circle, #000 0 64%, transparent 66%);
    mask-image: radial-gradient(circle, #000 0 64%, transparent 66%);
}

body.task-login::after {
    width: min(42vw, 560px);
    height: min(42vw, 560px);
    left: 19vw;
    top: 17vh;
    opacity: .13;
    border-radius: 50%;
}

body.task-login form {
    background: rgba(10, 16, 43, .78);
    border-radius: 14px;
    border-color: rgba(126, 156, 255, .34);
}

body:not(.task-login) #layout-content::before,
body:not(.task-login) #layout-content::after {
    display: none !important;
}

body.task-login form td.input {
    position: relative;
}

body.task-login form td.input .form-control {
    padding-left: 3.1rem !important;
}

body.task-login form td.input::before {
    position: absolute;
    left: .75rem;
    top: .35rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    color: #263244;
    z-index: 2;
}

/* RayMail layout recovery: keep the skin visual-only and let Elastic own the app structure. */
body.task-login {
    min-height: 100vh;
    overflow: hidden;
}

body.task-login #layout {
    display: flex !important;
    width: 100%;
    min-height: 100vh;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 24px !important;
}

body.task-login #layout-content {
    width: min(360px, calc(100vw - 48px)) !important;
    max-width: 360px !important;
    margin: 0 24vw 0 0 !important;
}

body.task-login .voice,
body.task-login #login-form h1,
body.task-login .box-title,
body.task-login .box-inner > h1 {
    display: none !important;
}

body.task-login form {
    width: 100%;
    margin: 0 !important;
}

body.task-login #login-footer,
body.task-login .formbuttons + div,
body.task-login form .formbuttons ~ * {
    display: block;
    width: 100%;
    margin-top: .9rem;
    text-align: center !important;
    color: rgba(223, 230, 255, .78) !important;
}

body.task-login .input-group-text,
body.task-login form td.input::before {
    display: none !important;
    content: none !important;
}

body.task-login form td.input .form-control,
body.task-login .form-control {
    height: 42px;
    padding: .72rem 1rem !important;
    text-align: center !important;
    color: #f8fbff !important;
    background: rgba(7, 13, 36, .82) !important;
    border: 1px solid rgba(126, 156, 255, .42) !important;
    border-radius: 6px;
    box-shadow: none !important;
}

body.task-login .form-control::placeholder {
    color: rgba(219, 226, 255, .68);
}

body:not(.task-login) #taskmenu a,
body:not(.task-login) .menu.toolbar a,
body:not(.task-login) .pagenav a,
body:not(.task-login) .pagenav .pagenav-text,
body:not(.task-login) #layout > div > .header a.button,
body:not(.task-login) #layout > div > .header .header-title {
    color: rgba(237, 242, 255, .92) !important;
}

body:not(.task-login) #taskmenu a.disabled,
body:not(.task-login) .menu.toolbar a.disabled,
body:not(.task-login) #layout > div > .header a.button.disabled,
body:not(.task-login) .pagenav a.disabled {
    color: rgba(190, 202, 242, .50) !important;
    opacity: .72 !important;
}

body:not(.task-login) #taskmenu span.inner,
body:not(.task-login) .menu.toolbar span.inner,
body:not(.task-login) .folderlist li a,
body:not(.task-login) .messagelist td,
body:not(.task-login) .messagelist td a {
    color: rgba(247, 249, 255, .94) !important;
}

body:not(.task-login) .messagelist span.fromto,
body:not(.task-login) .messagelist span.date,
body:not(.task-login) .messagelist span.subject,
body:not(.task-login) .listing-info,
body:not(.task-login) .quota-widget {
    color: rgba(206, 216, 255, .76) !important;
}

body:not(.task-login) #layout-content > .iframe-wrapper,
body:not(.task-login) #layout-content .iframe-wrapper {
    background: rgba(5, 9, 28, .32) !important;
}

body:not(.task-login) #layout-menu .popover-header {
    height: 0 !important;
    min-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none;
}

body:not(.task-login) #layout-menu .popover-header::before {
    display: none !important;
    content: none !important;
}

body:not(.task-login) #taskmenu {
    padding-top: 8px;
}

body:not(.task-login) #taskmenu .action-buttons {
    padding-top: 8px !important;
}

body:not(.task-login) #taskmenu a {
    box-sizing: border-box;
    width: calc(100% - 16px) !important;
    min-height: 46px;
    margin: 2px 8px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

body:not(.task-login) #taskmenu a:before {
    margin-bottom: 2px !important;
}

body:not(.task-login) #taskmenu span.inner {
    display: block;
    line-height: 1.15;
    font-size: 12px;
}

body:not(.task-login) #taskmenu .special-buttons {
    padding-bottom: 8px;
}

body:not(.task-login) #taskmenu .special-buttons a {
    min-height: 46px;
}

body.task-login input[type="password"]::-ms-reveal,
body.task-login input[type="password"]::-ms-clear {
    filter: invert(1) brightness(2.4) drop-shadow(0 0 5px rgba(34, 211, 238, .55));
    opacity: .95;
}

body.task-login .password-toggle,
body.task-login .show-password,
body.task-login .toggle-password,
body.task-login .input-group a,
body.task-login .input-group button,
body.task-login a[aria-label*="password" i],
body.task-login button[aria-label*="password" i],
body.task-login a[title*="password" i],
body.task-login button[title*="password" i] {
    color: #d9f7ff !important;
    opacity: .95 !important;
    filter: drop-shadow(0 0 5px rgba(34, 211, 238, .45));
}

/* Compose page: align editor and attachment controls with the RayMail skin. */
body.action-compose #layout-content,
body.action-compose #layout-sidebar {
    background: rgba(5, 9, 28, .72) !important;
}

body.action-compose #compose-content,
body.action-compose #composebodycontainer,
body.action-compose .compose-content,
body.action-compose .formcontent,
body.action-compose .compose-headers {
    background: transparent !important;
    color: rgba(247, 249, 255, .94) !important;
}

body.action-compose .form-control,
body.action-compose input,
body.action-compose textarea,
body.action-compose select,
body.action-compose .recipient-input,
body.action-compose .recipient-input input,
body.action-compose .multi-input > .content,
body.action-compose .compose-headers .form-control {
    color: #f8fbff !important;
    background: rgba(7, 13, 36, .78) !important;
    border: 1px solid rgba(126, 156, 255, .38) !important;
    border-radius: 5px !important;
    box-shadow: none !important;
}

body.action-compose .form-control:focus,
body.action-compose input:focus,
body.action-compose textarea:focus,
body.action-compose .recipient-input.focus,
body.action-compose .multi-input > .content.focused {
    color: #ffffff !important;
    background: rgba(9, 18, 50, .92) !important;
    border-color: rgba(34, 211, 238, .78) !important;
    box-shadow: 0 0 0 1px rgba(34, 211, 238, .22), 0 0 24px rgba(34, 211, 238, .10) !important;
}

body.action-compose .input-group-append .btn,
body.action-compose .input-group-append a,
body.action-compose .input-group-prepend .btn,
body.action-compose .input-group-prepend a,
body.action-compose .recipient-input a.button,
body.action-compose a.button,
body.action-compose button.btn {
    color: #eaf4ff !important;
    background: rgba(16, 27, 66, .92) !important;
    border-color: rgba(126, 156, 255, .36) !important;
    box-shadow: none !important;
}

body.action-compose .input-group-append .btn:hover,
body.action-compose .input-group-append a:hover,
body.action-compose .recipient-input a.button:hover,
body.action-compose a.button:hover,
body.action-compose button.btn:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(34, 211, 238, .24), rgba(139, 92, 246, .26)) !important;
    border-color: rgba(34, 211, 238, .55) !important;
}

body.action-compose .tox.tox-tinymce,
body.action-compose .mce-container,
body.action-compose .html-editor,
body.action-compose #composebody,
body.action-compose iframe {
    border-color: rgba(126, 156, 255, .34) !important;
    background: rgba(5, 9, 28, .70) !important;
}

body.action-compose .tox .tox-toolbar,
body.action-compose .tox .tox-toolbar__primary,
body.action-compose .tox .tox-toolbar-overlord,
body.action-compose .tox .tox-menubar,
body.action-compose .mce-toolbar,
body.action-compose .mce-panel {
    background: rgba(14, 22, 54, .94) !important;
    border-color: rgba(126, 156, 255, .30) !important;
}

body.action-compose .tox .tox-tbtn,
body.action-compose .tox .tox-mbtn,
body.action-compose .tox .tox-split-button,
body.action-compose .mce-btn button {
    color: #dce8ff !important;
}

body.action-compose .tox .tox-tbtn svg,
body.action-compose .tox .tox-mbtn svg {
    fill: #dce8ff !important;
}

body.action-compose .tox .tox-tbtn:hover,
body.action-compose .tox .tox-mbtn:hover,
body.action-compose .tox .tox-split-button:hover {
    background: rgba(34, 211, 238, .16) !important;
}

body.action-compose #layout-sidebar .header,
body.action-compose #compose-attachments,
body.action-compose .attachmentslist,
body.action-compose .file-upload,
body.action-compose .compose-options,
body.action-compose fieldset {
    color: rgba(247, 249, 255, .92) !important;
    background: rgba(7, 13, 36, .74) !important;
    border-color: rgba(126, 156, 255, .34) !important;
}

body.action-compose .file-upload {
    border-style: dashed !important;
    border-radius: 8px !important;
}

body.action-compose .file-upload .icon,
body.action-compose .file-upload:before,
body.action-compose .attachmentslist li:before {
    color: rgba(220, 235, 255, .90) !important;
}

body.action-compose label,
body.action-compose legend,
body.action-compose .hint,
body.action-compose .attachmentslist,
body.action-compose .compose-options {
    color: rgba(224, 232, 255, .86) !important;
}

body.action-compose .custom-switch .custom-control-label::before {
    background-color: rgba(217, 226, 245, .78) !important;
    border-color: rgba(126, 156, 255, .48) !important;
}

body.action-compose .custom-switch .custom-control-label::after {
    background-color: #f8fbff !important;
}

body.action-compose .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background: linear-gradient(135deg, var(--ray-cyan), var(--ray-violet)) !important;
    border-color: rgba(34, 211, 238, .72) !important;
}

body:not(.task-login) #layout-sidebar .header .username,
body:not(.task-login) #layout-sidebar .header .username *,
body:not(.task-login) #layout-sidebar .header [data-raymail-copy-username="1"],
body:not(.task-login) #layout-sidebar .header [data-raymail-copy-username="1"] *,
body:not(.task-login) #layout-sidebar [data-raymail-copy-username="1"],
body:not(.task-login) #layout-sidebar [data-raymail-copy-username="1"] * {
    color: #ff3158 !important;
    font-weight: 900 !important;
    text-shadow: 0 0 14px rgba(255, 49, 88, .42) !important;
    cursor: pointer;
    user-select: text;
}

body:not(.task-login) #layout-sidebar .header .username:hover,
body:not(.task-login) #layout-sidebar .header .username:hover *,
body:not(.task-login) #layout-sidebar .header [data-raymail-copy-username="1"]:hover,
body:not(.task-login) #layout-sidebar .header [data-raymail-copy-username="1"]:hover *,
body:not(.task-login) #layout-sidebar [data-raymail-copy-username="1"]:hover,
body:not(.task-login) #layout-sidebar [data-raymail-copy-username="1"]:hover * {
    color: #22c55e !important;
    text-shadow: 0 0 18px rgba(34, 197, 94, .62) !important;
}

#raymail-copy-toast {
    position: fixed;
    right: 12px;
    bottom: 18px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 220px;
    max-width: min(86vw, 420px);
    padding: 14px 18px;
    color: #ffffff;
    background: rgba(34, 197, 94, .92);
    border: 1px solid rgba(134, 239, 172, .55);
    border-radius: 8px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .32);
    opacity: 0;
    transform: translateX(12px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.25;
    text-align: center;
    text-shadow: none;
}

#raymail-copy-toast.is-visible {
    opacity: 1;
    transform: translateX(0);
}

#raymail-copy-toast.is-error {
    background: rgba(220, 38, 38, .92);
    border-color: rgba(254, 202, 202, .55);
}

body.action-compose .recipient-input input,
body.action-compose .recipient-input .form-control,
body.action-compose .multi-input input,
body.action-compose .multi-input .form-control,
body.action-compose .multi-input textarea {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

body.action-compose .recipient-input,
body.action-compose .multi-input > .content {
    overflow: hidden;
}

body.action-compose .tox-edit-area,
body.action-compose .tox-edit-area__iframe,
body.action-compose .tox .tox-edit-area__iframe,
body.action-compose .tox-editor-container,
body.action-compose .tox-editor-header,
body.action-compose .tox-sidebar-wrap,
body.action-compose .mce-edit-area,
body.action-compose .mce-edit-area iframe,
body.action-compose .mce-top-part,
body.action-compose .mce-toolbar-grp,
body.action-compose .html-editor .toolbar,
body.action-compose .editor-toolbar,
body.action-compose #composebodycontainer .toolbar,
body.action-compose #composebodycontainer iframe,
body.action-compose #composebody_ifr {
    background: #05091c !important;
    color-scheme: dark;
}

body.action-compose .tox-editor-header,
body.action-compose .tox-toolbar-overlord,
body.action-compose .tox-toolbar__primary,
body.action-compose .tox-toolbar,
body.action-compose .tox-toolbar__group,
body.action-compose .mce-top-part,
body.action-compose .mce-toolbar-grp,
body.action-compose .html-editor .toolbar,
body.action-compose .editor-toolbar,
body.action-compose #composebodycontainer .toolbar {
    color: #dce8ff !important;
    background: rgba(14, 22, 54, .96) !important;
    border-color: rgba(126, 156, 255, .30) !important;
}

body.action-compose .tox .tox-statusbar,
body.action-compose .mce-statusbar {
    color: rgba(224, 232, 255, .78) !important;
    background: rgba(7, 13, 36, .94) !important;
    border-color: rgba(126, 156, 255, .30) !important;
}

@media screen and (max-width: 1200px) {
    body.task-login #layout-content {
        margin-right: 12vw !important;
    }
}

@media screen and (max-width: 760px) {
    html,
    body.task-login {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        overflow: hidden !important;
    }

    body.task-login #layout {
        position: fixed !important;
        inset: 0 !important;
        display: grid !important;
        place-items: center !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body.task-login #layout-content {
        position: fixed !important;
        inset: 0 !important;
        display: grid !important;
        place-items: center !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100dvh !important;
        margin: 0 !important;
        transform: none !important;
        flex: 0 0 auto !important;
        pointer-events: none !important;
    }

    body.task-login #login-form,
    body.task-login form {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        box-sizing: border-box !important;
        width: min(330px, calc(100vw - 34px)) !important;
        max-width: 330px !important;
        margin: 0 !important;
        transform: none !important;
        pointer-events: auto !important;
        overflow: hidden !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,
    body.task-login form table,
    body.task-login form tbody,
    body.task-login form tr,
    body.task-login form td {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.task-login #login-form .form-control,
    body.task-login #login-form input,
    body.task-login #login-form button,
    body.task-login form .form-control,
    body.task-login form input,
    body.task-login form button {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}