/* Presentation only: existing templates and application behavior stay intact. */
:root {
    color-scheme: dark;
    --background: #0d141e;
    --text-color: #dce5ef;
    --link-color: #73d4c9;
    --account-list-background: #151f2d;
    --nav-background: #192332;
    --nav2-background: #193338;
    --mailbox-message-background: #192332;
    --mailbox-message-seen-background: #151e2a;
    --mailbox-message-checked-background: #204747;
    --mailbox-message-checked-seen-background: #1a393d;
    --message-header-background: #151e2a;
    --status-background: #111c2a;
    --status-ok-color: #51cfaa;
    --status-load-color: #ffd166;
    --status-err-color: #ff7f87;
    --border: #2b384a;
    --muted: #9bacc0;
    --accent: #16838a;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    padding: 20px 20px 64px;
    gap: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
::selection { background: #286264; color: #e5fffa; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { background: #41536a; border-radius: 8px; }
h1, h2, h3 { color: #edf3fa; line-height: 1.25; letter-spacing: -.025em; }
a { text-decoration: none; transition: background-color .15s, color .15s; }
a:hover { color: #a1eee0; text-decoration: underline; }
:focus-visible { outline: 3px solid #4aaca7; outline-offset: 3px; }
hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
input, select, textarea, button { font: inherit; }
input:not([type=checkbox]):not([type=radio]):not([type=submit]), select, textarea {
    background: #101a27;
    color: var(--text-color);
    border: 1px solid #35465c;
    border-radius: 9px;
    padding: 10px 12px;
    max-width: 100%;
    min-width: 0;
}
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
input::placeholder, textarea::placeholder { color: #8fa0b5; }
option { background: #192332; color: #dce5ef; }
button, input[type=submit], .account_panel a.compose, .compose_panel a.send {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    border-radius: 9px;
    padding: 10px 18px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
button:hover, input[type=submit]:hover, .account_panel a.compose:hover, .compose_panel a.send:hover { background: #1b969c; color: #fff; }
.disabled, input:disabled, button:disabled { opacity: .55; cursor: default; }
input:disabled { background: #1c2735; }
body:has(> .login_panel:not(.hidden)) {
    background: radial-gradient(ellipse at 15% 5%, #102c31, transparent 50%), radial-gradient(ellipse at 95% 90%, #19243a, transparent 50%), #0d141e;
}
.login_panel {
    position: relative;
    left: auto;
    transform: none;
    width: 440px;
    max-width: 100%;
    margin: auto;
    padding: 36px;
    background: #192332;
    border: 1px solid #2b394b;
    border-radius: 20px;
    box-shadow: 0 20px 70px #00000040, 0 2px 8px #00000020;
}
.login_panel .brand-mark {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 20px;
    border-radius: 14px;
    color: #fff;
    background: var(--accent);
}
.login_panel h1 { font-size: 28px; margin: 0 0 8px; }
.login_panel .login-subtitle { text-align: center; color: var(--muted); margin: 0 0 28px; }
.login_panel table, .login_panel tbody, .login_panel tr, .login_panel th, .login_panel td { display: block; width: 100%; padding: 0; }
.login_panel th { font-weight: 600; font-size: 13px; margin-bottom: 7px; }
.login_panel td { margin-bottom: 17px; }
.login_panel input, .login_panel select { width: 100%; }
.login_panel input[type=submit] { margin-top: 5px; padding: 12px; }
.login_panel .saved-label { margin: 24px 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.account_list { padding: 0; margin: 0 0 18px; list-style: none; }
.account_list li { border: 1px solid #2b384a; border-radius: 10px; padding: 12px; overflow-wrap: anywhere; }
.account_list li:not(.no_accounts):hover { background: #193338; }
.account_list li.no_accounts { color: var(--muted); text-align: center; font-size: 13px; }
.account_list li a { margin-left: 12px; }
.login_panel nav { text-align: center; font-size: 13px; }
.account_panel, .mailbox_panel, .message_panel, .compose_panel {
    margin: 0;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    max-height: calc(100dvh - 84px);
    min-width: 0;
}
.account_panel {
    flex: 0 0 220px;
    width: 220px;
    max-width: 220px;
    background: #111c2a;
    color: #d2ddea;
    border-color: #111c2a;
}
.account_panel .account_status { font-size: 11px; color: #a8bacd; text-transform: uppercase; letter-spacing: .08em; }
.account_panel .username { display: block; font-style: normal; overflow-wrap: anywhere; margin-top: 5px; }
.account_panel hr { border-color: #304255; }
.account_panel a { color: #d7e3ef; padding: 7px 9px; border-radius: 7px; }
.account_panel a:hover { color: #fff; background: #2a4056; text-decoration: none; }
.account_panel a.compose { text-align: center; }
.account_panel .mailbox_list { list-style: none; padding-left: 12px; }
.account_panel .mailbox_list a { display: inline-block; overflow-wrap: anywhere; }
.account_panel .unread:not(:empty) { background: #316365; color: #d9fff5; padding: 2px 7px; }
.mailbox_panel { flex: 0 1 350px; width: 350px; max-width: 350px; padding: 12px; background: #192332; }
.mailbox_panel header { background: #192332; z-index: 1; padding-bottom: 8px; }
.mailbox_panel .mailbox_name { font-size: 19px; }
.mailbox_panel nav, .message_panel nav, .compose_panel nav { border-bottom: 1px solid var(--border); padding: 10px 8px; line-height: 2; }
nav > select { max-width: 12ch; padding: 4px 6px; font-size: 12px; text-decoration: none; }
.mailbox_panel .message_controls { border-radius: 8px; font-size: 12px; }
.mailbox_panel .message { color: #dce5ef; border: 1px solid #2b384a; border-radius: 10px; padding: 14px; margin-top: 8px; font-size: 13px; }
.mailbox_panel .message:hover { border-color: #4b9293; }
.mailbox_panel .message .subject, .mailbox_panel .message[data-flags*=_Seen] .subject { font-size: 14px; }
.mailbox_panel .message[data-flags*=_Seen] .subject { font-weight: 500; }
.mailbox_panel .message .date_header { color: var(--muted); font-size: 11px; }
.mailbox_panel .message[data-open=true] { border: 1px solid var(--accent); box-shadow: inset 3px 0 var(--accent); margin-left: 0; }
.mailbox_panel .message[data-flags*=_Flagged] { border-color: #bc8d25; }
.message_panel, .compose_panel { flex: 1 1 400px; max-width: none; background: #192332; }
.message_panel header, .compose_panel header { border: 0; border-radius: 10px; padding: 18px; margin-top: 12px; overflow-wrap: anywhere; }
.message_panel .subject { font-size: 22px; margin-bottom: 14px; }
.message_panel .body, .message_panel .text { font-family: inherit; font-size: 15px; line-height: 1.8; }
.message_panel .attachment { background: #151f2d; border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.compose_panel textarea { width: 100%; height: 45vh; resize: vertical; }
.compose_panel th { padding-right: 12px; font-size: 12px; color: var(--muted); }
.compose_panel a.send { display: inline-block; line-height: 1.5; }
.compose_panel .response { border-radius: 8px; color: #fff; }
.prompt { top: 5vh; width: max-content; max-width: min(92vw, 900px); max-height: 85dvh; padding: 28px; background: #192332; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 0 0 9000px #050a12b3, 0 20px 80px #00000066; }
.prompt h1 { margin-top: 0; }
.prompt table { border-spacing: 0 8px; }
.prompt.settings input[type=text], .prompt.settings textarea { width: min(30rem, 100%); }
.mailbox-manage { min-width: 0; }
.mailbox-manage .mailbox.first, .logs-prompt tr { background: #0d141e; }
.mailbox-manage .mailbox.second { background: #1a2d34; }
.logs-prompt .logs-container { overflow: auto; }
#status { border-top: 1px solid #30465c; box-shadow: 0 -4px 20px #182b4010; font-size: 11px; }
#status_color { width: 9px; height: 9px; border-radius: 50%; margin: 13px; }
#init { text-align: center; margin: auto; color: var(--muted); }
@media (max-width: 1100px) {
    body { display: flex !important; flex-wrap: wrap; }
    .account_panel { flex: 0 0 190px; width: 190px !important; max-width: 190px !important; }
    .mailbox_panel { flex: 1; width: auto !important; max-width: none !important; max-height: 65dvh !important; }
    .message_panel, .compose_panel { flex-basis: 100%; width: 100% !important; max-width: 100% !important; padding: 20px !important; max-height: none; }
    .login_panel { position: relative; left: auto; transform: none; width: 440px !important; }
}
@media (max-width: 600px) {
    body { padding: 12px 12px 64px; gap: 12px; }
    .login_panel { padding: 28px 22px; border-radius: 16px; margin: auto; }
    .account_panel { flex-basis: 100%; width: 100% !important; max-width: 100% !important; padding: 16px !important; max-height: 34dvh; }
    .mailbox_panel { flex-basis: 100%; padding: 10px !important; }
    .message_panel, .compose_panel { padding: 12px !important; }
    .prompt { padding: 18px; overflow-x: auto; }
    .prompt table th, .prompt table td { overflow-wrap: anywhere; }
    .compose_panel header { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }