:root {
    --ps-ink: #122033;
    --ps-muted: #66758a;
    --ps-surface: #ffffff;
    --ps-canvas: #f3f6f8;
    --ps-border: #dfe7ec;
    --ps-primary: #0f766e;
    --ps-primary-strong: #0b5f59;
    --ps-accent: #d7f3ee;
    --ps-shadow: 0 20px 55px rgba(18, 32, 51, 0.14);
}

body {
    color: var(--ps-ink);
    background: var(--ps-canvas);
}

body.task-login {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 18%, rgba(15, 118, 110, 0.14), transparent 34rem),
        radial-gradient(circle at 88% 78%, rgba(42, 92, 135, 0.10), transparent 30rem),
        linear-gradient(145deg, #f8fafb 0%, #eef4f4 100%);
}

.task-login #layout-content {
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
}

.task-login #login-form {
    width: min(100%, 27rem);
    padding: 2.4rem 2.25rem 2.2rem;
    border: 1px solid rgba(223, 231, 236, 0.86);
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--ps-shadow);
    backdrop-filter: blur(12px);
}

.task-login #logo {
    margin-bottom: 1.8rem;
}

.task-login #logo img {
    width: min(100%, 17rem);
    max-height: 4.5rem;
}

.task-login .form-control {
    min-height: 3rem;
    border-color: var(--ps-border);
    border-radius: 0.75rem;
    background-color: #fbfcfd;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.task-login .form-control:focus {
    border-color: var(--ps-primary);
    background: #fff;
    box-shadow: 0 0 0 0.22rem rgba(15, 118, 110, 0.14);
}

.btn-primary,
.button.mainaction,
button.mainaction {
    border-color: var(--ps-primary);
    border-radius: 0.7rem;
    background: var(--ps-primary);
    box-shadow: 0 8px 20px rgba(15, 118, 110, 0.18);
}

.btn-primary:hover,
.btn-primary:focus,
.button.mainaction:hover,
.button.mainaction:focus,
button.mainaction:hover,
button.mainaction:focus {
    border-color: var(--ps-primary-strong);
    background: var(--ps-primary-strong);
}

#taskmenu a.selected,
#taskmenu a:hover,
#taskmenu a:focus {
    color: #fff;
    background: var(--ps-primary);
}

#layout-sidebar,
#layout-list,
#layout-content {
    border-color: var(--ps-border);
}

.folderlist li.mailbox a {
    border-radius: 0.45rem;
}

.folderlist li.mailbox.selected > a,
.folderlist li.mailbox > a:hover {
    color: var(--ps-primary-strong);
    background: var(--ps-accent);
}

.messagelist tr.selected td,
.messagelist tr.selected:hover td {
    background-color: var(--ps-accent);
}

.listing li.selected,
.listing tr.selected td {
    background-color: var(--ps-accent);
}

a,
.button.icon:not(.disabled):hover {
    color: var(--ps-primary);
}

:focus-visible {
    outline: 3px solid rgba(15, 118, 110, 0.38);
    outline-offset: 2px;
}

html.dark-mode {
    --ps-ink: #e8f0f3;
    --ps-muted: #a9b7c3;
    --ps-surface: #172431;
    --ps-canvas: #0f1924;
    --ps-border: #314252;
    --ps-primary: #4fc6b8;
    --ps-primary-strong: #73d6ca;
    --ps-accent: rgba(79, 198, 184, 0.16);
    --ps-shadow: 0 20px 55px rgba(0, 0, 0, 0.36);
}

html.dark-mode body.task-login {
    background:
        radial-gradient(circle at 12% 18%, rgba(79, 198, 184, 0.14), transparent 34rem),
        linear-gradient(145deg, #101b26 0%, #0d1720 100%);
}

html.dark-mode .task-login #login-form {
    border-color: var(--ps-border);
    background: rgba(23, 36, 49, 0.95);
}

html.dark-mode .task-login .form-control {
    color: var(--ps-ink);
    border-color: var(--ps-border);
    background: #111d28;
}

@media (max-width: 575.98px) {
    .task-login #login-form {
        padding: 2rem 1.35rem 1.75rem;
        border-radius: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}