:root {
    --bg: #f4f6fb;
    --bg2: #ffffff;
    --card: #ffffff;
    --text: #111827;
    --muted: #6b7280;
    --line: #d8dee8;
    --primary: #2563eb;
    --primary-soft: #eff4ff;
    --danger: #dc2626;
    --ok: #047857;
    --shadow: 0 14px 36px rgba(15,23,42,.08);
    --radius: 14px;
}
html[data-theme="dark"] {
    --bg: #0b1018;
    --bg2: #101722;
    --card: #121a26;
    --text: #eef2f7;
    --muted: #9aa4b2;
    --line: #263244;
    --primary: #60a5fa;
    --primary-soft: rgba(96,165,250,.12);
    --danger: #f87171;
    --ok: #34d399;
    --shadow: 0 18px 42px rgba(0,0,0,.24);
}
* { box-sizing: border-box; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    color: var(--text);
    background: linear-gradient(135deg, var(--bg), var(--bg2));
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
.login-body { display: grid; place-items: center; padding: 24px; }
.login-shell { width: min(390px, 100%); }
.glass, .card, .sidebar, .topbar {
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.login-card {
    border-radius: 20px;
    padding: 30px;
    text-align: center;
}
.logo-mark {
    width: 54px;
    height: 54px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #1f2937;
    color: #fff;
    font-weight: 800;
    letter-spacing: -.03em;
    font-size: 14px;
}
html[data-theme="dark"] .logo-mark { background: #e5e7eb; color: #111827; }
.logo-mark.small {
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: 10px;
    font-size: 11px;
    flex: 0 0 auto;
}
.eyebrow {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 10px;
    font-weight: 800;
    margin: 0 0 8px;
}
h1, h2 { margin: 0; letter-spacing: -.035em; }
.login-card h1 {
    font-size: clamp(28px, 6vw, 36px);
    line-height: 1.04;
    margin-bottom: 22px;
}
.login-subtitle { display: none; }
.login-form, .compose-form { display: grid; gap: 12px; text-align: left; }
label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
input, textarea, select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    padding: 11px 12px;
    outline: none;
}
input:focus, textarea:focus, select:focus, .rich-editor:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.10);
}
.btn, button.btn, .compose-btn {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    border-radius: 12px;
    padding: 10px 13px;
    cursor: pointer;
    font-weight: 750;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn:hover, .compose-btn:hover, .folder:hover { background: var(--primary-soft); }
.btn-primary, .compose-btn {
    background: #111827;
    color: #fff;
    border-color: #111827;
}
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .compose-btn {
    background: #e5e7eb;
    color: #111827;
    border-color: #e5e7eb;
}
.btn-full { width: 100%; padding: 12px 14px; }
.btn.ghost { justify-content: flex-start; width: 100%; }
.btn.danger { color: var(--danger); }
.theme-float {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 5;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 10px;
    background: var(--card);
    color: var(--text);
}
.login-foot {
    color: var(--muted);
    font-size: 12px;
    margin-top: 16px;
}
.alert { border-radius: 12px; padding: 11px 13px; margin-bottom: 14px; border: 1px solid var(--line); }
.alert-error { color: var(--danger); background: rgba(220,38,38,.08); }
.alert-ok { color: var(--ok); background: rgba(4,120,87,.09); }
.app-shell { display: grid; grid-template-columns: 270px 1fr; min-height: 100vh; gap: 16px; padding: 16px; }
.sidebar {
    border-radius: var(--radius);
    padding: 14px;
    position: sticky;
    top: 16px;
    height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.brand-row { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.brand-row strong { display: block; line-height: 1.1; font-size: 14px; }
.brand-row span { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; word-break: break-all; }
.compose-btn { width: 100%; margin-bottom: 12px; padding: 11px 12px; }
.folders { display: grid; gap: 4px; overflow: auto; padding-right: 3px; }
.folder { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 11px; color: var(--muted); }
.folder.active { background: var(--primary-soft); color: var(--text); }
.folder b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-foot { margin-top: auto; display: grid; gap: 7px; padding-top: 10px; }
.main-panel { min-width: 0; }
.topbar {
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}
.topbar h2 { font-size: clamp(22px, 3vw, 30px); }
.menu-btn { display: none; }
.search { display: flex; gap: 8px; width: min(440px, 46vw); }
.search input { border-radius: 999px; }
.card { border-radius: var(--radius); padding: 14px; }
.list-head { display: flex; justify-content: space-between; color: var(--muted); padding: 3px 6px 12px; font-size: 13px; }
.mail-row {
    display: grid;
    grid-template-columns: minmax(140px, 210px) 1fr auto;
    gap: 13px;
    align-items: center;
    padding: 12px 10px;
    border-top: 1px solid var(--line);
    border-radius: 10px;
}
.mail-row:hover { background: var(--primary-soft); }
.mail-row.unread { background: var(--primary-soft); }
.mail-from { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-main { min-width: 0; }
.mail-main strong, .mail-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-main span, .mail-meta { color: var(--muted); font-size: 12px; }
.mail-meta { display: grid; text-align: right; gap: 4px; }
.mail-badges { display: flex; justify-content: flex-end; align-items: center; gap: 6px; min-height: 18px; }
.attachment-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid #f59e0b;
    border-radius: 999px;
    background: rgba(245, 158, 11, .16);
    color: #fbbf24;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    line-height: 1;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, .08) inset;
    white-space: nowrap;
}
.attachment-icon { font-size: 16px; line-height: 1; }
.attachment-label { display: inline-block; }
.mail-row.unread .attachment-indicator { border-width: 2px; background: rgba(245, 158, 11, .24); }
.empty-state { text-align: center; color: var(--muted); padding: 58px 20px; }
.message-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.inline-form { display: inline-flex; gap: 7px; }
.move-form select { width: 165px; padding: 9px 11px; border-radius: 11px; }
.message-header { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 14px; }
.message-header h1 { font-size: clamp(24px, 3.5vw, 34px); margin-bottom: 14px; }
.message-grid { display: grid; grid-template-columns: 64px 1fr; gap: 7px 11px; color: var(--muted); font-size: 13px; }
.message-grid b { color: var(--text); word-break: break-word; }
.attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 13px;
    margin-bottom: 14px;
}
.attachment { border: 1px solid var(--line); border-radius: 999px; padding: 8px 10px; background: transparent; }
.attachment span { color: var(--muted); margin-left: 6px; }
.message-body { line-height: 1.58; border: 1px solid var(--line); border-radius: 13px; padding: 16px; overflow: auto; background: transparent; }
.message-body img { max-width: 100%; height: auto; }
.compose-form { gap: 14px; }
.editor-field { display: block; min-width: 0; }
.field-label { color: var(--muted); font-size: 12px; font-weight: 700; margin-bottom: 7px; }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.editor-toolbar {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    padding: 7px;
    background: transparent;
}
.editor-toolbar button { border: 1px solid var(--line); background: transparent; color: var(--text); border-radius: 9px; padding: 6px 8px; cursor: pointer; }
.rich-editor {
    min-height: 230px;
    border: 1px solid var(--line);
    border-radius: 0 0 12px 12px;
    background: transparent;
    color: var(--text);
    padding: 12px;
    outline: none;
    line-height: 1.52;
    overflow: auto;
    font-size: 14px;
    font-weight: 400;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
    caret-color: var(--text);
}
.hint { color: var(--muted); font-weight: 500; }
.compose-actions { display: flex; gap: 9px; }
@media (max-width: 900px) {
    .app-shell { grid-template-columns: 1fr; padding: 10px; }
    .sidebar { position: fixed; z-index: 10; left: 10px; top: 10px; bottom: 10px; width: min(300px, calc(100% - 20px)); height: auto; transform: translateX(calc(-100% - 18px)); transition: .2s ease; }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .menu-btn { display: inline-flex; border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 11px; padding: 9px 11px; }
    .topbar { align-items: flex-start; flex-wrap: wrap; }
    .search { width: 100%; }
    .mail-row { grid-template-columns: 1fr; gap: 5px; }
    .mail-meta { text-align: left; display: flex; gap: 10px; }
    .two-cols { grid-template-columns: 1fr; }
    .message-grid { grid-template-columns: 1fr; }
}

.settings-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding-bottom:14px; border-bottom:1px solid var(--line); }
.settings-heading h3 { margin:0 0 7px; font-size:24px; }
.settings-heading p { margin:0; color:var(--muted); line-height:1.5; }
.switch-row { display:flex; grid-template-columns:auto 1fr; align-items:center; gap:9px; color:var(--text); min-width:240px; }
.switch-row input { width:18px; height:18px; }
.signature-editor { min-height:190px; }
@media (max-width: 700px) { .settings-heading { flex-direction:column; } .switch-row { min-width:0; } }

/* По-ясно разграничение между прочетени и непрочетени писма */
.mail-row {
    grid-template-columns: 12px minmax(140px, 210px) 1fr auto;
    position: relative;
    transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.mail-status { display: grid; place-items: center; }
.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--line);
    box-shadow: 0 0 0 3px transparent;
}
.mail-row.unread {
    background: var(--primary-soft);
    border-left: 4px solid var(--primary);
    padding-left: 6px;
}
.mail-row.unread .status-dot {
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.mail-row.unread .mail-from,
.mail-row.unread .mail-main strong {
    font-weight: 900;
    color: var(--text);
}
.mail-row.read {
    background: transparent;
    opacity: .78;
    border-left: 4px solid transparent;
    padding-left: 6px;
}
.mail-row.read .mail-from,
.mail-row.read .mail-main strong { font-weight: 600; }
.mail-row.read:hover { opacity: 1; }
.unread-badge {
    justify-self: end;
    font-size: 9px;
    letter-spacing: .08em;
    color: #fff;
    background: var(--primary);
    border-radius: 999px;
    padding: 3px 7px;
}
@media (max-width: 900px) {
    .mail-row { grid-template-columns: 12px 1fr; }
    .mail-status { grid-row: 1 / span 3; align-self: start; padding-top: 5px; }
    .mail-from, .mail-main, .mail-meta { grid-column: 2; }
    .unread-badge { justify-self: start; }
}

/* Pagination */
.pagination { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px; padding:18px 8px 4px; border-top:1px solid var(--line); margin-top:8px; }
.page-btn { min-width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:10px; padding:0 11px; color:var(--text); }
.page-btn:hover { background:var(--primary-soft); }
.page-btn.active { background:var(--primary); border-color:var(--primary); color:#fff; font-weight:800; }
.page-btn.disabled { opacity:.4; pointer-events:none; }
.page-dots { color:var(--muted); padding:0 3px; }

/* Drag and drop attachments */
.drop-zone { border:2px dashed var(--line); border-radius:15px; padding:24px; text-align:center; cursor:pointer; transition:.18s ease; background:rgba(127,127,127,.03); }
.drop-zone:hover, .drop-zone.dragging { border-color:var(--primary); background:var(--primary-soft); transform:translateY(-1px); }
.drop-zone-icon { font-size:30px; margin-bottom:7px; }
.drop-zone strong, .drop-zone span { display:block; }
.drop-zone span { color:var(--muted); font-size:13px; margin-top:5px; }
.file-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; justify-content:center; }
.file-chip { display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--card); border-radius:999px; padding:7px 8px 7px 11px; max-width:100%; }
.file-chip span { color:var(--text); margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:280px; }
.file-chip small { color:var(--muted); white-space:nowrap; }
.file-chip button { width:24px; height:24px; border:0; border-radius:50%; cursor:pointer; color:var(--danger); background:rgba(220,38,38,.1); }

/* Multiple personal signatures */
.signature-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:18px; position:relative; }
.signature-profiles { border-right:1px solid var(--line); padding-right:14px; }
.signature-list-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.signature-list-head .btn { padding:7px 9px; }
.signature-profile { display:block; padding:11px; border:1px solid transparent; border-radius:11px; margin-bottom:6px; }
.signature-profile:hover { background:var(--primary-soft); }
.signature-profile.active { border-color:var(--primary); background:var(--primary-soft); }
.signature-profile b, .signature-profile span { display:block; }
.signature-profile span { color:var(--muted); font-size:11px; margin-top:3px; }
.options-row { padding:10px 0; }
.delete-signature-form { grid-column:2; }
@media (max-width:800px) {
  .signature-layout { grid-template-columns:1fr; }
  .signature-profiles { border-right:0; border-bottom:1px solid var(--line); padding:0 0 12px; }
  .delete-signature-form { grid-column:1; }
}

/* Received messages stay readable regardless of the application theme. */
.message-body {
    background: #ffffff;
    color: #111827;
    color-scheme: light;
    min-height: 180px;
}
.message-body :where(p, div, span, td, th, li, blockquote, pre, code, strong, b, em, i) {
    color: inherit !important;
}
.message-body a { color: #075fd8 !important; text-decoration: underline; }
.message-body table { max-width: 100%; }
.message-body blockquote { border-left: 3px solid #cbd5e1; padding-left: 12px; margin-left: 0; }
.attachment-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 9px 10px;
    min-width: min(100%, 360px);
}
.attachment-name { min-width: 0; overflow-wrap: anywhere; }
.attachment-name span { color: var(--muted); margin-left: 6px; font-size: 12px; }
.attachment-actions { display: flex; gap: 6px; }
.btn-small { padding: 6px 9px; font-size: 12px; }
.forward-attachments { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.forward-attachments strong { width: 100%; }
.forward-attachments span { padding: 6px 9px; border-radius: 999px; background: var(--primary-soft); font-size: 12px; }


/* LOD SASS antivirus status */
.attachment-info { min-width: 0; display: grid; gap: 5px; }
.sass-status { width: fit-content; max-width: 100%; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 750; letter-spacing: .01em; }
.sass-pending { color: #075985; background: #e0f2fe; border: 1px solid #7dd3fc; }
.sass-clean { color: #166534; background: #dcfce7; border: 1px solid #86efac; }
.sass-blocked { color: #991b1b; background: #fee2e2; border: 1px solid #fca5a5; }
[data-theme="dark"] .sass-pending { color: #bae6fd; background: rgba(3,105,161,.22); border-color: #0369a1; }
[data-theme="dark"] .sass-clean { color: #bbf7d0; background: rgba(22,101,52,.25); border-color: #15803d; }
[data-theme="dark"] .sass-blocked { color: #fecaca; background: rgba(153,27,27,.25); border-color: #b91c1c; }

@media (max-width: 760px) {
    .attachment-indicator { padding: 4px 7px; }
    .attachment-label { display: none; }
    .attachment-icon { font-size: 18px; }
}