/* blmailo skin based on the Vexpax interface. Keep layout and behavior in styles.css. */
:root {
  color-scheme: dark;
  --bg: #090909;
  --surface: #111111;
  --surface-2: #171717;
  --surface-3: #242424;
  --line: #2e2e2e;
  --line-soft: #242424;
  --text: #f5f5f5;
  --muted: #a3a3a3;
  --button-frame: #2e2e2e;
  --accent: #d4d4d4;
  --accent-hover: #f5f5f5;
  --accent-soft: rgba(255, 255, 255, .10);
  --vxp-highlight: #d4d4d4;
  --vxp-glow: rgba(255, 255, 255, .10);
  --vxp-selected: rgba(255, 255, 255, .08);
  --radius: 8px;
  font-family: Verdana, "Segoe UI", Roboto, Arial, sans-serif;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f4f4;
  --surface: #ffffff;
  --surface-2: #f0f0f0;
  --surface-3: #e7e7e7;
  --line: #d5d5d5;
  --line-soft: #e1e1e1;
  --text: #171717;
  --muted: #666666;
  --button-frame: #d5d5d5;
  --accent: #595959;
  --accent-hover: #333333;
  --accent-soft: rgba(0, 0, 0, .08);
  --vxp-highlight: #595959;
  --vxp-glow: rgba(0, 0, 0, .09);
  --vxp-selected: rgba(0, 0, 0, .07);
}

*, *::before, *::after { scrollbar-width: thin; scrollbar-color: var(--line) var(--bg); }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-color: var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--vxp-highlight); }

body, .auth-view, .mail-app, .mail-content { background: var(--bg); color: var(--text); }
button, input, textarea, select { font-family: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 1px solid var(--vxp-highlight);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--vxp-glow);
}
input:focus, textarea:focus, select:focus, .address-input:focus-within { transform: none; box-shadow: 0 0 0 1px var(--vxp-highlight), 0 5px 15px var(--vxp-glow); }

/* Sign in and registration */
.auth-view { background-image: radial-gradient(ellipse at 50% 0%, var(--surface-2), transparent 65%); }
.auth-shell, .modal, .settings-modal, .compose-window, .account-dialog, .language-dialog {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 22px 68px rgba(0, 0, 0, .48);
}
.auth-shell { max-width: 480px; }
.auth-brand strong, .mail-brand strong, .auth-heading p, .modal-header p, .settings-header p, .panel-heading p { color: var(--vxp-highlight); }
.auth-tab { background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); border-radius: 8px; }
.auth-tab:hover, .auth-tab.active { background: var(--surface-3); border-color: var(--vxp-highlight); color: var(--text); box-shadow: 0 4px 16px var(--vxp-glow); }
.auth-tab.active::after { background: var(--vxp-highlight); }

/* Flat Vexpax controls */
.primary-button, .compose-button, .form-submit, .outline-button, .icon-button,
.bulk-action-button, .refresh-action-button, .settings-button, .account-switch,
.dialog-close, .language-select-button, .text-button, .attachment-button,
.copy-button, .share-image-options button {
  border: 1px solid var(--button-frame);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  box-shadow: none;
}
.primary-button:hover, .compose-button:hover, .form-submit:hover, .outline-button:hover,
.icon-button:hover, .bulk-action-button:hover, .refresh-action-button:hover,
.settings-button:hover, .account-switch:hover, .dialog-close:hover,
.language-select-button:hover, .text-button:hover, .attachment-button:hover,
.share-image-options button:hover {
  border-color: var(--vxp-highlight);
  background: var(--surface-3);
  color: var(--text);
  box-shadow: 0 5px 15px var(--vxp-glow);
  transform: translateY(-2px);
}
.primary-button:active, .compose-button:active, .outline-button:active, .icon-button:active { transform: translateY(1px) scale(.98); }

/* Mail shell and navigation */
.mail-header { background: #0d0d0d; border-bottom: 1px solid var(--line); box-shadow: none; }
html[data-theme="light"] .mail-header { background: #fff; }
.sidebar { background: var(--surface); border-right: 1px solid var(--line); }
.mail-search, .language-search { background: var(--surface-2); border-color: var(--line); }
.mail-search:focus-within, .language-search:focus-within, .address-input:focus-within {
  background: var(--surface-2);
  border-color: var(--vxp-highlight);
  box-shadow: 0 0 0 1px var(--vxp-highlight), 0 5px 15px var(--vxp-glow);
}
.mail-search button:hover { background: var(--surface-3); color: var(--text); }
.compose-button { justify-content: center; font-weight: 700; }
.folder-button, .settings-nav-button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  box-shadow: none;
}
.folder-button:hover, .settings-nav-button:hover { border-color: var(--vxp-highlight); background: var(--surface-3); color: var(--text); box-shadow: 0 5px 15px var(--vxp-glow); }
.folder-button.active, .settings-nav-button.active { border-color: var(--vxp-highlight); background: var(--vxp-selected); color: var(--text); box-shadow: inset 2px 0 0 var(--vxp-highlight); }
.folder-button.active span, .settings-nav-button.active span { color: var(--text); }
.folder-button > .nav-sticker, .folder-button:nth-child(n) > .nav-sticker,
.settings-nav-button > .settings-sticker, .settings-nav-button:nth-child(n) > .settings-sticker {
  background: var(--vxp-selected);
  color: var(--vxp-highlight);
  border: 1px solid var(--line);
}
.folder-button em, .sidebar-account { color: var(--muted); }
.sidebar-account { border-color: var(--line); }

/* Inbox, conversations and composer */
.message-panel, .reader { background: var(--bg); border-color: var(--line); }
.list-toolbar, .reader-toolbar, .compose-header, .compose-footer { background: var(--surface); border-color: var(--line); }
.message-row, .message-row.unread { background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.message-row.unread { background: var(--surface-2); }
.message-row:hover { background: var(--surface-3); box-shadow: inset 3px 0 0 var(--vxp-highlight); }
.star-button { color: var(--muted); }
.star-button:hover, .star-button.active { color: var(--vxp-highlight); }
.icon-button.active { border-color: var(--vxp-highlight); background: var(--vxp-selected); color: var(--text); }
.empty-state > span, .draft-sticker, .copy-success-sticker { background: var(--vxp-selected); border: 1px solid var(--line); color: var(--vxp-highlight); }
.reader-content, .thread-message, .thread-message.incoming, .thread-message.outgoing,
.conversation-thread, .reader-reply-bar, .attachment-preview, .image-preview-stage { background: var(--surface); border-color: var(--line); }
.thread-message.selected, .thread-message:hover { border-color: var(--vxp-highlight); box-shadow: 0 5px 15px var(--vxp-glow); transform: none; }
.compose-window:focus-within { border-color: var(--vxp-highlight); box-shadow: 0 22px 68px rgba(0, 0, 0, .48); }
.compose-window input, .compose-window textarea, .compose-recipient-field, .address-input { background: var(--surface); color: var(--text); border-color: var(--line); }
.compose-window input:focus, .compose-window textarea:focus { box-shadow: none; transform: none; }

/* Settings and secondary dialogs */
.settings-header, .modal-header { background: var(--surface); border-color: var(--line); }
.settings-nav { background: var(--surface); border-right: 1px solid var(--line); }
.settings-content, .settings-panel { background: var(--bg); }
.settings-panel .settings-form input, .settings-panel .settings-form select,
.settings-panel .settings-form textarea, .language-option, .device-item,
.security-block, .theme-preview, .sound-toggle, .function-index,
.settings-function, .embedded-settings-section, .profile-summary,
.account-switch, .account-dialog, .modal input, .modal select, .modal textarea {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text);
  box-shadow: none;
}
.language-option:hover, .language-option.active, .device-item:hover, .security-block:hover,
.theme-preview:hover, .sound-toggle:hover, .settings-function:hover {
  border-color: var(--vxp-highlight);
  background: var(--surface-3);
  box-shadow: 0 5px 15px var(--vxp-glow);
}
.language-search:focus-within { border-color: var(--vxp-highlight); box-shadow: 0 0 0 1px var(--vxp-highlight), 0 5px 15px var(--vxp-glow); }
.settings-savebar { background: var(--surface); border-color: var(--line); }
.segmented-control { background: var(--surface-2); border-color: var(--line); }
.segmented-control button.active, .segmented-control input:checked + span { background: var(--surface-3); border-color: var(--vxp-highlight); color: var(--text); }
.toast { background: var(--surface-3); color: var(--text); border: 1px solid var(--vxp-highlight); box-shadow: 0 12px 28px rgba(0,0,0,.3); }

/* Subtle motion consistent with the reference. */
.auth-shell, .mail-header, .mail-content, .reader:not([hidden]), .empty-state:not([hidden]),
.settings-panel.active, .language-list, .device-list, .thread-message,
.account-switch, .device-item, .language-option, .security-block, .theme-preview,
.sound-toggle { animation: none; }
.avatar-button:hover img, .large-avatar:hover img, .small-avatar:hover img,
.sender-avatar:hover img, .mail-brand:hover img, .auth-brand:hover img { transform: none; }

@media (max-width: 760px) {
  .mail-header { background: var(--surface); }
  .sidebar { box-shadow: 14px 0 35px rgba(0,0,0,.35); }
  .settings-layout { background: var(--bg); }
}