/* bl system control and typography layer. */
:root {
  --style-button-border: rgba(212, 212, 212, .58);
  --style-glow: 0 0 16px rgba(255, 255, 255, .14),
    0 5px 15px rgba(255, 255, 255, .10);
  --style-focus-glow: 0 0 20px rgba(255, 255, 255, .24);
  --style-ease: cubic-bezier(.2, .8, .2, 1);
  --vxp-neon: var(--style-glow);
  --vxp-neon-focus: var(--style-focus-glow);
  --page: #090909;
  --panel: #111111;
  --control: #171717;
  --selected: #242424;
  --border: #2e2e2e;
  --highlight: #d4d4d4;
  --text: #f5f5f5;
  --muted: #a3a3a3;
}
html[data-theme="light"] {
  --style-button-border: rgba(89, 89, 89, .6);
  --style-glow: 0 0 20px rgba(0, 0, 0, .20),
    0 7px 18px rgba(0, 0, 0, .11);
  --style-focus-glow: 0 0 24px rgba(0, 0, 0, .27),
    0 0 38px rgba(0, 0, 0, .09);
  --page: #f4f4f4;
  --panel: #ffffff;
  --control: #f0f0f0;
  --selected: #e7e7e7;
  --border: #d5d5d5;
  --highlight: #595959;
  --text: #171717;
  --muted: #666666;
}
body { background: var(--page); color: var(--text); }
.billing-panel {
  background: var(--panel);
  border-color: var(--border);
  box-shadow: 0 22px 68px rgba(0, 0, 0, .32);
}
.billing-heading, .billing-balance { border-color: var(--border); }
.billing-input-row input { background: var(--control); border-color: var(--border); color: var(--text); }
.billing-payment { background: var(--control); border-color: var(--border); }
:is(.site-header, .site-footer, .billing-header, .mail-header, .topbar),
:is(.auth-shell, .modal, .settings-modal, .account-dialog, .language-dialog,
  .compose-window, .billing-panel, .card, .step, .article-link, .article-nav,
  .product-preview, .cta, #reader) {
  border-color: var(--border);
}
:is(.auth-shell, .modal, .settings-modal, .account-dialog, .language-dialog,
  .compose-window, .billing-panel, .article-nav, #reader) {
  border-radius: 12px;
}
:is(.card, .product-preview) { border-radius: 14px; }
:is(button, a.button, a.back-link, a.billing-pay-link, #billing-pay-link) {
  -webkit-tap-highlight-color: transparent;
}
:is(button, label, nav, .site-header, .site-footer) {
  -webkit-user-select: none;
  user-select: none;
}
:is(input, textarea, [contenteditable="true"], [data-copyable]) {
  -webkit-user-select: text;
  user-select: text;
}

/* Icons are individual, locally served SVG files. Their box never changes size. */
img.lucide {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  object-fit: contain;
  filter: brightness(0) invert(1);
  pointer-events: none;
}
html[data-theme="light"] img.lucide { filter: brightness(0); }
button img.lucide-chevron-down {
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform .28s var(--style-ease);
}
button[aria-expanded="true"] img.lucide-chevron-down { transform: rotate(180deg) !important; }
:is(button, a.button, a.back-link, a.billing-pay-link, #billing-pay-link) > img.lucide:first-child {
  margin: 0;
}
:is(.button-sticker, .compose-action-sticker, .nav-sticker,
  .settings-sticker, .action-sticker) > img.lucide { width: 20px; height: 20px; }
:is(.button-sticker, .compose-action-sticker, .action-sticker) {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Controls keep a single thin border and stay still on hover or press. */
:is(.button, .back-link, .billing-form button, .billing-pay-link,
  #billing-pay-link, .primary-button, .outline-button, .compose-button,
  .form-submit, .icon-button, .bulk-action-button, .refresh-action-button,
  .settings-button, .account-switch, .dialog-close, .language-select-button,
  .text-button, .attachment-button, .copy-button, .header-action,
  .folder-button, .settings-nav-button, .auth-tab, .popover-action,
  .header-dropdown button, .sound-picker-options button, .function-index button,
  .top-actions button, .account-menu button, .account-menu a,
  .compose-actions button, .confirm-actions button, .sidebar nav button, .toolbar button,
  .reader-actions button, .pagination button) {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding-inline: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--control);
  color: var(--text);
  box-shadow: none;
  transform: none;
  transition: color .28s ease, background-color .28s ease,
    border-color .28s ease, box-shadow .34s var(--style-ease);
}
:is(.button, .back-link, .billing-form button, .billing-pay-link,
  #billing-pay-link, .primary-button, .outline-button, .compose-button,
  .form-submit, .icon-button, .bulk-action-button, .refresh-action-button,
  .settings-button, .account-switch, .dialog-close, .language-select-button,
  .text-button, .attachment-button, .copy-button, .header-action,
  .folder-button, .settings-nav-button, .auth-tab, .popover-action,
  .header-dropdown button, .sound-picker-options button, .function-index button,
  .top-actions button, .account-menu button, .account-menu a,
  .compose-actions button, .confirm-actions button, .sidebar nav button, .toolbar button,
  .reader-actions button, .pagination button):is(:hover, :active, .active,
    [aria-pressed="true"], [aria-current="page"], [aria-expanded="true"]):not(:disabled) {
  border-color: var(--style-button-border) !important;
  background: var(--selected) !important;
  color: var(--text) !important;
  box-shadow: var(--style-glow) !important;
  transform: none !important;
}
:is(.button, .back-link, .billing-form button, .billing-pay-link,
  #billing-pay-link, .primary-button, .outline-button, .compose-button,
  .form-submit, .icon-button, .bulk-action-button, .refresh-action-button,
  .settings-button, .account-switch, .dialog-close, .language-select-button,
  .text-button, .attachment-button, .copy-button, .header-action,
  .folder-button, .settings-nav-button, .auth-tab, .popover-action,
  .header-dropdown button, .sound-picker-options button, .function-index button,
  .top-actions button, .account-menu button, .account-menu a,
  .compose-actions button, .confirm-actions button, .sidebar nav button, .toolbar button,
  .reader-actions button, .pagination button):focus-visible {
  outline: none !important;
  border-color: var(--style-button-border) !important;
  box-shadow: var(--style-focus-glow) !important;
}
:is(.button, .back-link, .billing-form button, .billing-pay-link,
  #billing-pay-link, .primary-button, .outline-button, .compose-button,
  .form-submit, .settings-button, .account-switch, .text-button,
  .attachment-button, .header-dropdown button, .sound-picker-options button)
  :is(span, .button-label) { min-width: 0; }
:is(.button, .back-link, .billing-form button, .billing-pay-link,
  #billing-pay-link, .primary-button, .outline-button, .compose-button,
  .form-submit, .header-dropdown button, .sound-picker-options button)
  { gap: 10px; }
:is(.button, .back-link, .billing-form button, .billing-pay-link,
  #billing-pay-link, .primary-button, .outline-button, .compose-button,
  .form-submit) { min-height: 46px; }
:is(.button, .back-link, .billing-form button, .billing-pay-link,
  #billing-pay-link) {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding-inline: 10px;
  font-weight: 700;
  text-decoration: none;
}
:is(.button, .back-link, .billing-form button, .billing-pay-link,
  #billing-pay-link) > img.lucide:first-child { margin-right: 0; }
:is(.button, .back-link, .billing-form button, .billing-pay-link,
  #billing-pay-link) { white-space: nowrap; }
:is(.button, .back-link, .billing-form button, .billing-pay-link,
  #billing-pay-link) > :not(img.lucide) { overflow: hidden; text-overflow: ellipsis; }
:is(.icon-button, .dialog-close, .refresh-action-button) {
  min-width: 42px;
  min-height: 42px;
  justify-content: center;
  padding: 10px;
}
:is(.dialog-close, .compose-header #close-compose, .compose-head #compose-close) {
  width: 42px;
  height: 42px;
  padding: 10px;
  flex: 0 0 42px;
  justify-content: center;
}
:is(.dialog-close, .compose-header #close-compose, .compose-head #compose-close) img.lucide {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}
:is(.site-nav a, .card, .article-link, .step, .cta,
  .product-preview, .contact-line):hover { transform: none !important; }
:is(.card, .article-link, .step):hover {
  border-color: var(--style-button-border);
  background: var(--panel);
  box-shadow: var(--style-glow);
}

/* Hover belongs to the visible field, never to its label or the gap above it. */
:is(input:not(:where([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="color"], [type="range"])),
  textarea, select, .mail-search, .language-search, .address-input,
  .compose-recipient-field, .compose-field, .billing-input-row input) {
  border-radius: 10px;
  transition: border-color .28s ease, background-color .28s ease,
    box-shadow .34s var(--style-ease) !important;
  transform: none !important;
}
:is(input:not(:where([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="color"], [type="range"])),
  textarea, select, .mail-search, .language-search, .address-input,
  .compose-recipient-field, .compose-field, .billing-input-row input):hover:not(:focus):not(:focus-within) {
  border-color: var(--highlight) !important;
  box-shadow: none !important;
  transform: none !important;
}
:is(input:not(:where([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="color"], [type="range"])),
  textarea, select):focus,
:is(.mail-search, .language-search, .address-input,
  .compose-recipient-field, .compose-field):focus-within {
  outline: none !important;
  border-color: var(--highlight) !important;
  box-shadow: var(--style-focus-glow) !important;
  transform: none !important;
  transition-property: border-color, background-color, box-shadow !important;
}
:is(.mail-search, .language-search, .address-input,
  .compose-recipient-field, .compose-field) :is(input, textarea):is(:hover, :focus, :active) {
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
:is(.auth-form label, .settings-form label, .compose-field label, .billing-form label)
  :is(input, textarea, select):not(:hover):not(:focus) {
  box-shadow: none !important;
}
:is(.auth-form label, .settings-form label, .billing-form label)
  :is(.address-input, input, textarea, select):not(:hover):not(:focus-within) {
  box-shadow: none !important;
}
/* .field-group + .field-caption: non-label replacement for caption-over-field (no label hover propagation). */
.field-group { display: grid; gap: 7px; min-width: 0; }
.field-caption {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  width: max-content;
  max-width: 100%;
  cursor: default;
}
.field-group :is(input, textarea, select):not(:hover):not(:focus),
.field-group :is(.address-input, input, textarea, select):not(:hover):not(:focus-within) {
  box-shadow: none !important;
}
:is(.mail-search, .language-search, .address-input, .compose-recipient-field)
  { cursor: text; }

/* Menus and dialogs animate content without moving the triggering control. */
:is(.header-dropdown, .sound-picker-options, .account-menu) {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}
:is(.header-dropdown, .sound-picker-options, .account-menu) > :is(button, a) + :is(button, a) {
  margin-top: 8px;
}
.header-dropdown:not([hidden]):not(.is-closing),
.sound-picker-options:not([hidden]):not(.is-closing) {
  animation-duration: .28s;
  animation-timing-function: var(--style-ease);
}
.header-dropdown.is-closing,
.sound-picker-options.is-closing {
  animation-duration: .28s;
  animation-timing-function: var(--style-ease);
}
@keyframes header-dropdown-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes header-dropdown-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(14px); }
}
@keyframes picker-menu-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes picker-menu-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(14px); }
}
dialog[open]:not(.dialog-exiting) { animation-duration: .28s; animation-timing-function: var(--style-ease); }
dialog[open].dialog-exiting { animation-duration: .28s; animation-timing-function: var(--style-ease); }
dialog[open].dialog-exiting::backdrop { animation-duration: .28s; }
@keyframes blmailo-dialog-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes blmailo-dialog-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(14px); }
}

/* Thin transparent-track scrollbars match the reference. */
button.account-email-copy > .lucide:first-child {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
button.account-email-copy:is(:hover, :active, :focus-visible) {
  outline: none;
  border-color: var(--style-button-border);
  background: var(--selected);
  box-shadow: var(--style-glow);
}
button.account-list-copy > .lucide:first-child {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
}
a.popover-action,
a.registration-billing-link {
  text-decoration: none;
}

/* Standard scrollbar props only for Firefox: in Chromium they switch off the
   ::-webkit-scrollbar styling below and bring back the arrow buttons. */
@supports (-moz-appearance: none) {
  * { scrollbar-width: thin; scrollbar-color: var(--muted) transparent; }
}
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent !important; border: 0; }
::-webkit-scrollbar-thumb { border: 0; border-radius: 99px; background: var(--muted); }
::-webkit-scrollbar-button { display: none !important; width: 0 !important; height: 0 !important; }

@media (hover: none), (pointer: coarse) {
  :is(.button, .back-link, .billing-form button, .billing-pay-link,
    #billing-pay-link, .primary-button, .outline-button, .compose-button,
    .form-submit, .icon-button, .bulk-action-button, .refresh-action-button,
    .settings-button, .account-switch, .dialog-close, .language-select-button,
    .text-button, .attachment-button, .copy-button, .header-action,
    .folder-button, .settings-nav-button, .auth-tab, .popover-action,
    .header-dropdown button, .sound-picker-options button, .function-index button,
    .top-actions button, .account-menu button, .account-menu a,
  .compose-actions button, .confirm-actions button, .sidebar nav button, .toolbar button,
    .reader-actions button, .pagination button):hover:not(:active):not(.active):not([aria-pressed="true"]):not([aria-current="page"]):not([aria-expanded="true"]) {
    border-color: var(--border) !important;
    background: var(--control) !important;
    box-shadow: none !important;
  }
  :is(input, textarea, select, .mail-search, .language-search,
    .address-input, .compose-recipient-field, .compose-field):hover:not(:focus):not(:focus-within) {
    border-color: var(--border) !important;
    box-shadow: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(button, .button, .back-link, input, textarea, select,
    .header-dropdown, .sound-picker-options, dialog) {
    transition: none !important;
    animation: none !important;
  }
}

/* An address is one physical field: the inner input never paints a second card. */
.address-input {
  min-width: 0;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--control) !important;
  overflow: hidden;
  box-shadow: none !important;
  transition: border-color .28s ease, background-color .28s ease,
    box-shadow .34s var(--style-ease) !important;
}
.address-input:hover:not(:focus-within) {
  border-color: var(--highlight) !important;
  box-shadow: none !important;
}
.address-input:focus-within {
  border-color: var(--highlight) !important;
  box-shadow: var(--style-focus-glow) !important;
}
:is(.address-input, .mail-search, .language-search,
  .compose-recipient-field, .compose-field) > :is(input, textarea),
:is(.address-input, .mail-search, .language-search,
  .compose-recipient-field, .compose-field) > :is(input, textarea):is(:hover, :focus, :focus-visible, :active) {
  min-width: 0;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.address-input > b { background: transparent; }

/* A caption is outside the interactive field; hovering it cannot select a field. */
:is(.auth-form, .settings-form, .billing-form) label > span:first-child:not(.address-input) {
  pointer-events: none;
}
/* Browsers propagate :hover from a <label> to its control, so the label itself must not be a hit target;
   only the control (and its wrappers) re-enable pointer events. Checkbox/radio/file labels are excluded. */
:is(.auth-form, .settings-form, .billing-form, .onboarding-form)
  label:not(:has(input:is([type="checkbox"], [type="radio"], [type="file"]))) {
  pointer-events: none;
}
:is(.auth-form, .settings-form, .billing-form, .onboarding-form)
  label:not(:has(input:is([type="checkbox"], [type="radio"], [type="file"])))
  :is(input, textarea, select, button, a, .address-input, .password-field, .phone-field) {
  pointer-events: auto;
}
.compose-window .compose-field:hover:has(> span:hover):not(:focus-within) {
  border-color: var(--border) !important;
  background: var(--control) !important;
  box-shadow: none !important;
}

#action-confirm-dialog .action-confirm-buttons { grid-template-columns: minmax(0, 1fr); }
#action-confirm-dialog #action-confirm-submit { width: 100%; }
#action-confirm-dialog #action-confirm-submit > img.lucide {
  flex: 0 0 20px;
  width: 20px !important;
  min-width: 20px;
  height: 20px !important;
  min-height: 20px;
  padding: 0 !important;
}

.form-validation-notice {
  position: fixed;
  z-index: 110;
  left: 50%;
  bottom: max(28px, env(safe-area-inset-bottom));
  width: max-content;
  max-width: calc(100vw - 28px);
  padding: 12px 16px;
  border: 1px solid var(--highlight);
  border-radius: 9px;
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--style-focus-glow);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity .28s ease, transform .28s var(--style-ease);
}
.form-validation-notice.visible { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .form-validation-notice { transition: none; }
}

/* Field captions are separate from the control's hover and focus surface. */
.compose-fields { grid-template-rows: auto auto minmax(0, 1fr); }
.compose-window .compose-field-group { display: grid; gap: 7px; min-width: 0; align-content: start; }
.compose-window .compose-body-group { min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
.compose-window .compose-field-group > label,
:is(.auth-form, .settings-form, .billing-form) label > span:first-child:not(.address-input),
.billing-form > label {
  width: max-content;
  max-width: 100%;
  color: var(--muted, #a3a3a3);
  font-family: Manrope, sans-serif;
  font-weight: 700;
  cursor: default;
  pointer-events: none;
}
.compose-window .compose-field {
  display: flex;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid var(--border) !important;
  border-radius: 10px;
  background: var(--control) !important;
  box-shadow: none;
  cursor: text;
  transition: border-color .28s ease, box-shadow .34s var(--style-ease) !important;
}
.compose-window .compose-field:hover:not(:focus-within) { border-color: var(--highlight) !important; box-shadow: none !important; }
.compose-window .compose-field:focus-within { border-color: var(--highlight) !important; box-shadow: var(--style-focus-glow) !important; }
.compose-window .compose-field > :is(input, textarea) {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 10px 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
  resize: none;
}
.compose-window .compose-body-field { min-height: 0; }

/* The copy control belongs to the account card, next to its address. */
.account-list-row { grid-template-columns: minmax(0, 1fr) 38px !important; }
.account-list-row.account-pinned { grid-template-columns: minmax(0, 1fr) !important; }
.account-list-row .account-entry {
  position: relative;
  display: flex;
  min-width: 0;
  height: 58px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--control);
  transition: border-color .28s ease, box-shadow .34s var(--style-ease);
}
.account-list-row .account-entry:is(:hover, :focus-within) { border-color: var(--highlight); box-shadow: var(--style-glow); }
.account-list-row .account-entry > .account-switch {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  /* !important: the shared button rule uses :is(... #billing-pay-link ...), which carries ID specificity. */
  padding-right: 12px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
}
.account-list-row .account-entry > .account-switch.is-current { cursor: default; user-select: none; -webkit-tap-highlight-color: transparent; }
/* A click on the active account must not leave its glow stuck: only hover lights it up. */
.account-list-row .account-entry:has(> .account-switch.is-current):focus-within:not(:hover) { border-color: var(--border); box-shadow: none; }
.account-list-row .account-entry > .account-switch:is(:hover, :focus-visible, :active) { outline: none; border: 0 !important; background: transparent !important; box-shadow: none !important; }
/* Address and its copy button on one line, like the profile card above. */
.account-list-row .account-email-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.account-list-row .account-email-line > small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-list-row .account-email-line > .account-list-copy {
  position: static;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  transform: none;
}
.account-list-section > .account-section-title::before { content: none; }
.account-list-section > .account-section-title { display: flex; align-items: center; gap: 8px; }
.account-list-section > .account-section-title::after {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  order: -1;
  background: currentColor;
  mask: url('/img/icons/used/users.svg') center / contain no-repeat;
}
.logout-all-accounts > .lucide:first-child { flex: 0 0 20px; width: 20px !important; height: 20px !important; padding: 0 !important; }

/* Long localized action labels stay inside their controls. */
.bulk-actions > .bulk-action-button { min-width: 0; padding-inline: 10px; }
.bulk-actions > .bulk-action-button > span,
:is(.permanent-delete-content, .action-confirm-buttons) button > span {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Three self-hosted type roles: captions, reading text, and controls/headings. */
@font-face { font-family: Manrope; src: url('/fonts/Manrope/Manrope-Variable.ttf') format('truetype'); font-weight: 200 800; font-style: normal; font-display: block; }
@font-face { font-family: Inter; src: url('/fonts/Inter/Inter-Variable.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: block; }
@font-face { font-family: Onest; src: url('/fonts/Onest/Onest-Variable.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: block; }
html, body, :is(input, textarea, select, p, li, dd, blockquote) { font-family: Inter; }
:is(button, .button, .brand, h1, h2, h3, h4, h5, h6, nav, .modal-header, .compose-header, .billing-heading) { font-family: Onest; }
:is(.auth-form, .settings-form) label > span:first-child:not(.address-input),
.compose-field-group > label, .billing-form > label, .field-label { font-family: Manrope; font-weight: 400; }

/* Address purchase and payment choice share a quiet, two-step layout. */
.billing-layout { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 12px; }
.billing-back { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; padding: 10px; }
.billing-back img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.billing-panel { max-width: 620px; }
.billing-heading { text-align: center; }
.billing-heading h1 { font-size: clamp(25px, 4vw, 34px); }
.billing-hint { font-size: 12px; color: #a3a3a3; }
.billing-input-row input { width: 100%; }
.billing-input-row input:hover:not(:focus) { border-color: #d4d4d4; box-shadow: none; }
.billing-input-row input:focus { border-color: #d4d4d4; box-shadow: 0 0 20px rgba(255,255,255,.24); }
.billing-total { padding: 18px 0; border-bottom: 1px solid #454850; }
.payment-method { display: flex; width: 100%; align-items: center; gap: 12px; margin-top: 24px; }
.payment-method img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
@media(max-width:620px) { .billing-layout { padding-inline: 12px; } .billing-back { flex-basis: 40px; width: 40px; height: 40px; } }

/* Pointer-first controls retain editable and explicitly copyable user data. */
body { -webkit-user-select: none; user-select: none; }
:is(input, textarea, [contenteditable="true"], [data-copyable]) {
  -webkit-user-select: text;
  user-select: text;
}

/* Remote images in letters are blocked until the reader opts in. */
.email-content { display: grid; gap: 10px; min-width: 0; }
.remote-content-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--control);
  color: var(--muted, #9a9aa0);
  font-size: 13px;
}
.remote-content-notice > span { min-width: 0; flex: 1 1 220px; }
.remote-content-notice .remote-content-show { min-height: 38px; flex: 0 0 auto; }
.reauth-copy { margin: 0; color: var(--muted, #9a9aa0); font-size: 14px; line-height: 1.5; }

/* The mail app scrolls inside its own panels, so the page must not reserve a
   scrollbar strip on the right (it showed as an empty band next to the list). */
html:has(#mail-app:not([hidden])) { scrollbar-gutter: auto; overflow-y: hidden; }
#mail-app .message-list { scrollbar-gutter: auto; }

/* Public top bar: respect [hidden] (it was overridden and pushed the bar to 460px on phones). */
.public-auth[hidden], .public-mail-link[hidden] { display: none !important; }
.public-controls { min-width: 0; }
@media (max-width: 420px) {
  /* Phones: keep every control, drop only the wordmark next to the logo.
     `html body` outranks public-shell.css, which loads after this file. */
  html body .public-topbar { gap: 4px; padding-inline: 8px; }
  html body .public-topbar :is(.public-brand, .public-mobile-brand) { gap: 0; font-size: 0; }
  html body .public-topbar :is(.public-brand, .public-mobile-brand) > strong { display: none; }
  html body .public-topbar .public-hamburger { min-width: 38px; padding: 8px; }
  html body .public-topbar .public-controls { gap: 4px; }
  html body .public-topbar .public-icon-button { padding: 8px; }
  html body .public-topbar #public-donations > span { display: none; }
  html body .public-topbar .public-auth { gap: 4px; }
  html body .public-topbar :is(.public-auth a, .public-mail-link) { padding: 6px 8px; font-size: 12px; }
}

/* An icon always fills its sticker. img.lucide has min-width/height 20px, so in
   16px stickers (settings tabs) it overflowed and sat 2px low and right. */
.button-sticker > img.lucide {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  flex-basis: auto !important;
}

/* Compose attachment preview: thumbnail | name | remove, aligned with the footer
   edges (14px), symmetric padding, square remove button with a centred X. */
html body .attachment-preview {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  margin: 10px 14px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--control);
}
html body .attachment-preview[hidden] { display: none !important; }
html body #attachment-preview-image {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg, #090909);
}
html body #attachment-preview-name {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body #remove-attachment {
  display: grid !important;
  place-items: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--control) !important;
  color: var(--text);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .12s ease;
}
html body #remove-attachment > :is(img, svg) {
  width: 18px !important;
  height: 18px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  transform: none !important;
}
html body #remove-attachment:is(:hover, :focus-visible) {
  outline: none;
  border-color: var(--style-button-border) !important;
  background: var(--selected) !important;
  box-shadow: var(--style-glow);
}
html body #remove-attachment:active { transform: scale(.96); }

/* Dialog footer action group (outside Settings the X replaces Cancel):
   buttons share the row in equal columns; a single action spans the full width. */
html body .modal-actions {
  display: grid !important;
  grid-template-columns: none !important;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  margin: 0;
}
html body .modal-actions > button {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  height: auto !important;
  min-height: 46px !important;
  margin: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
@media (max-width: 420px) {
  html body .modal-actions { grid-auto-flow: row; }
}

/* Header «Справка» menu: grouped like the main-menu sidebar. */
.faq-menu { max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px); overflow-y: auto; overscroll-behavior: contain; }
.faq-menu-title {
  margin: 10px 10px 4px;
  color: var(--muted, #9a9aa0);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.faq-menu-title:first-child { margin-top: 4px; }

/* Settings → Ключ: activation keys and personal API tokens. */
.key-summary { display: grid; gap: 12px; min-width: 0; }
.key-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.key-stat { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--control); }
.key-stat span { color: var(--muted, #9a9aa0); font-size: 12px; }
.key-stat strong { font-size: 22px; line-height: 1.2; }
.key-heading { margin: 8px 0 0; font-size: 13px; font-weight: 800; }
.key-note { margin: 0; color: var(--muted, #9a9aa0); font-size: 13px; line-height: 1.5; }
.key-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.key-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--control); }
.key-row small { color: var(--muted, #9a9aa0); font-size: 12px; }
.key-row-info { display: grid; gap: 2px; min-width: 0; flex: 1 1 200px; }
.key-row-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.key-row-buttons > button, .key-revoke { min-height: 38px; }
.key-code { overflow-wrap: anywhere; font: 700 13px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .03em; }
.key-example { display: block; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 10px; color: var(--muted, #9a9aa0); font-weight: 600; }
.key-buy { justify-self: start; text-decoration: none; }
.api-token-body { display: grid; gap: 14px; }
.api-token-value { display: block; padding: 14px; border: 1px dashed var(--border); border-radius: 10px; text-align: center; user-select: all; }

/* Hide the browser's own password reveal/clear controls so only our button shows. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button,
input::-webkit-strong-password-auto-fill-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

/* Password visibility is the sole keyboard-accessible button exception. */
.password-field {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--control);
  transition: border-color .28s ease, box-shadow .34s var(--style-ease);
}
.password-field:hover:not(:focus-within) { border-color: var(--highlight); }
.password-field:focus-within {
  border-color: var(--highlight);
  box-shadow: var(--style-focus-glow);
}
.password-field > input,
.password-field > input:is(:hover, :focus, :focus-visible, :active) {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding-right: 54px;
  border: 0 !important;
  border-radius: 9px !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.password-field > .password-toggle {
  position: absolute;
  top: 50%;
  right: 3px;
  display: grid;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transform: translateY(-50%) !important;
  transition: background-color .2s ease, border-color .2s ease;
}
.password-field > .password-toggle:is(:hover, :focus-visible, [aria-pressed="true"]) {
  border-color: var(--border);
  background: var(--selected);
  outline: none;
  transform: translateY(-50%) !important;
}
.password-toggle img { width: 20px; height: 20px; filter: brightness(0) invert(1); transition: opacity .28s ease; transform: none !important; }
html[data-theme="light"] .password-toggle img { filter: brightness(0); }

/* ---------- Registration wizard (3 steps) ---------- */
.onboarding-steps { display: flex; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.onboarding-steps li { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; min-height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--control); color: var(--muted); font: 600 12px/1 Onest, sans-serif; }
.onboarding-steps li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onboarding-steps li b { display: grid; flex: none; width: 20px; height: 20px; place-items: center; border: 1px solid var(--border); border-radius: 50%; font-size: 11px; }
.onboarding-steps li.active { border-color: var(--style-button-border); background: var(--selected); color: var(--text); }
.onboarding-steps li.done b { border-color: var(--highlight); background: var(--highlight); color: var(--page); }
.onboarding-steps[hidden], .onboarding-form[hidden], .onboarding-setup[hidden], .onboarding-codes[hidden] { display: none !important; }
.onboarding-form { display: grid; gap: 14px; }
.onboarding-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.onboarding-setup, .onboarding-codes { display: grid; gap: 12px; }
.onboarding-setup img { justify-self: center; padding: 8px; border-radius: 12px; background: #fff; }
.onboarding-code-list { margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--control); color: var(--text); font: 600 14px/1.9 ui-monospace, Menlo, Consolas, monospace; columns: 2; white-space: pre; }
@media (max-width: 420px) { .onboarding-steps li span { display: none; } .onboarding-steps li { justify-content: center; } }

/* Radios: the generic 42px control height/background made a dark bar behind the circle. */
:is(.gender-options, .onboarding-form) input[type="radio"] { width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0; border: 0; background: transparent !important; box-shadow: none !important; outline-offset: 2px; accent-color: var(--accent); flex: none; }
.onboarding-form .profile-detail-group { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.onboarding-form .profile-detail-group legend { padding: 0; margin-bottom: 8px; color: var(--muted); font: 700 12px/1 Manrope, sans-serif; }
.onboarding-form .gender-options { display: flex; flex-wrap: wrap; gap: 8px; }
.onboarding-form .gender-options label { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; min-height: 42px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); cursor: pointer; }
.onboarding-form .gender-options label:has(input:checked) { border-color: var(--highlight); background: var(--selected); }
.onboarding-form .gender-options label > span { color: var(--text); font-size: 13px; }
.onboarding-form .birth-date-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.onboarding-form .birth-date-fields label { display: grid; gap: 6px; }

:is(.onboarding-form, .settings-form) select { width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--control); color: var(--text); font: 500 14px/1 Inter, sans-serif; color-scheme: dark; }
html[data-theme="light"] :is(.onboarding-form, .settings-form) select { color-scheme: light; }

/* Copy rules: only data (names, addresses) is selectable; avatars never are. */
.donation-address, .faq-value, .public-donation-dialog code { -webkit-user-select: none; user-select: none; }
:is(.sender-avatar, .small-avatar, .large-avatar, .avatar-button, .avatar-preview, #avatar-initial, #popover-avatar, #settings-avatar, .thread-avatar) {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
:is(.sender-avatar, .small-avatar, .large-avatar, .avatar-button, .avatar-preview, #avatar-initial, #popover-avatar, #settings-avatar, .thread-avatar) :is(img, svg) {
  -webkit-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none;
}
html .message-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
.message-row > .row-copy {
  display: inline-grid; place-items: center; align-self: center; width: 26px; min-width: 26px; height: 26px; min-height: 26px;
  margin-right: 10px; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: var(--control); color: var(--muted); cursor: pointer;
}
.message-row > .row-copy:is(:hover, :focus-visible) { outline: none; border-color: var(--style-button-border); background: var(--selected); color: var(--text); }
.message-row > .row-copy :is(svg, img, i) { width: 13px; height: 13px; }
.thread-address-row { min-width: 0; }
.thread-address-row .thread-address { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Modal dialogs default to selectable text in Chromium; keep them non-selectable. */
dialog, dialog::backdrop { -webkit-user-select: none; user-select: none; }
:is(dialog input, dialog textarea, dialog [contenteditable="true"], dialog [data-copyable]) { -webkit-user-select: text; user-select: text; }