/**
 * UmbrellaX Roundcube skin — main LESS entry.
 *
 * Extends `elastic` skin. Roundcube's skin loader compiles this file at
 * request time (or pre-compiles in production), so all @imports must be
 * LESS-resolvable paths relative to this file.
 */
/**
 * Design tokens — synced from ../landing by sync-tokens-from-landing.py.
 * Do not edit directly: re-run the sync script so values stay aligned
 * with the landing page's Tailwind palette.
 */
:root {
  --brand: #FF6663;
  --gold-300: #F1CF96;
  --gold-400: #FFBF66;
  --gold-500: #F1CF96;
  --gold-600: #C99400;
  --gold-700: #C99400;
  --ux-dark: #181A20;
  --ux-surface: #20222B;
  --ux-card: #2A2D3A;
  --ux-bubble: #333543;
  --ux-muted: #8E96BC;
  --ux-online: #2EBD85;
  --ux-blue: #0098EA;
  --ux-check: #4D9FD4;
  --ux-lightbg: #F4F6FA;
  --ux-lightchat: #F4FAF6;
  --ux-lightbubble: #DCFCE7;
  --text-dark: #E0E0D1;
  --text-light: #2D2D2D;
  --text-muted-dark: #8E96BC;
  --text-muted-light: #6B7280;
  --text-disabled-dark: #5F6784;
  --text-disabled-light: #9CA3AF;
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-full: 9999px;
  --shadow-card-light: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-card-light-hover: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-card-dark-hover: 0 24px 48px rgba(0, 0, 0, 0.2);
  --shadow-header-light: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-footer-light: 0 -2px 4px rgba(0, 0, 0, 0.06);
  --font-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --bg: var(--ux-dark);
  --surface: var(--ux-surface);
  --surface-alt: var(--ux-card);
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.12);
  --text: var(--text-dark);
  --text-muted: var(--text-muted-dark);
  --accent: var(--gold-600);
  --accent-weak: rgba(201, 148, 0, 0.12);
}
[data-theme="light"] {
  --bg: var(--ux-lightbg);
  --surface: #FFFFFF;
  --surface-alt: var(--ux-lightchat);
  --border: rgba(0, 0, 0, 0.06);
  --border-strong: rgba(0, 0, 0, 0.12);
  --text: var(--text-light);
  --text-muted: var(--text-muted-light);
  --accent: var(--gold-600);
  --accent-weak: rgba(201, 148, 0, 0.1);
}
/**
 * Typography — Inter, same subsets as the landing.
 *
 * Eight woff2 files (4 weights × 2 scripts) live in ../fonts/, copied
 * byte-for-byte from ../landing/assets/fonts/. unicode-range values are
 * the landing's (index.html lines 40–47) so coverage is identical.
 *
 * font-display: optional — if the webfont doesn't arrive quickly,
 * the browser falls back to system UI with no FOUT. Matches the
 * landing's behaviour.
 *
 * No local() hint: we want the same rendering across machines with
 * and without a locally installed Inter. The web copy is authoritative.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('../fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('../fonts/inter-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url('../fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url('../fonts/inter-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('../fonts/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('../fonts/inter-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('../fonts/inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('../fonts/inter-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Root type scale — paired with --font-ui and --font-weight-* tokens. */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body,
input,
button,
select,
textarea {
  font-family: var(--font-ui);
  font-weight: var(--font-weight-normal);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
}
/* Size scale — utility-style classes and element defaults. Only the
   slots listed in DESIGN.md; added as needed, not upfront. */
.t-hero {
  font-weight: var(--font-weight-light);
  font-size: 2.25rem;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
@media (min-width: 640px) {
  .t-hero {
    font-size: 3rem;
  }
}
.t-section {
  font-weight: var(--font-weight-medium);
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.t-body {
  font-weight: var(--font-weight-normal);
  font-size: 1rem;
  line-height: 1.6;
}
.t-label {
  font-weight: var(--font-weight-medium);
  font-size: 0.875rem;
  line-height: 1.4;
}
.t-muted {
  font-weight: var(--font-weight-normal);
  font-size: 0.875rem;
  color: var(--text-muted);
}
.t-badge {
  font-weight: var(--font-weight-semibold);
  font-size: 0.75rem;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}
/**
 * Base — reset-ish overrides on top of elastic's defaults.
 *
 * Kept intentionally small. Elastic's base is decent; we only touch
 * what conflicts with our design tokens (colour, typography, focus).
 */
/* Surface + text at the root — drives every child that inherits. */
html,
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
}
/* Focus ring — gold, matches landing hover-tilt + APK link accent.
   Elastic uses Bootstrap's default blue, which clashes with gold. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* Link colour — default to accent, underline on hover.
   Header brand link is exempt: must NOT take on accent colour or
   underline on hover (the brand must look solid regardless of hover
   state, matching landing's a.group treatment). */
a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s var(--ease-smooth);
}
a:hover,
a:focus-visible {
  color: var(--gold-700);
  text-decoration: underline;
}
.umbrellax-header__logo,
.umbrellax-header__logo:hover,
.umbrellax-header__logo:focus-visible {
  color: var(--text);
  text-decoration: none;
}
/* Horizontal rule — matches landing's .platform-divider gradient line. */
hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong, rgba(255, 255, 255, 0.08)), transparent);
  margin: var(--space-6) 0;
}
/* Selection — browser default. Previous gold override was too
   aggressive; users find the system highlight more readable. */
/**
 * Components — primitives that appear on every screen.
 *
 * The skin styles two kinds of selectors:
 *   1. Bootstrap/elastic conventions that Roundcube templates already
 *      emit (.btn, .btn-primary, .dropdown-menu, .form-control, .badge,
 *      .modal-content, .alert). Overriding them is how we reskin
 *      untouched templates.
 *   2. umbrellax-prefixed classes that our override templates introduce
 *      for landing-style patterns (feature cards, gold pills, store-btn
 *      shape). Prefix avoids collision with Bootstrap.
 *
 * Landing references are cited inline where specific pixels or timings
 * come from landing/index.html.
 */
/* ────────────────────────────────────────────────────────────────
   Buttons
   ──────────────────────────────────────────────────────────────── */
/**
 * Base button reset — Roundcube emits plain <button> and <a class="btn">.
 * We normalise sizing, cursor, focus so primary/ghost variants stack on a
 * clean base.
 */
.btn,
.umbrellax-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  letter-spacing: 0;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: transform 0.2s var(--ease-smooth), background-color 0.15s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), color 0.15s var(--ease-smooth);
}
.btn:disabled,
.umbrellax-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
/**
 * Primary — landing's .store-btn (index.html lines 352–360).
 * Dark surface, subtle scale on hover, deeper scale on press.
 */
.btn-primary,
.umbrellax-btn--primary {
  background-color: #2D2D2D;
  color: #FFFFFF;
  border-color: #2D2D2D;
}
.btn-primary:hover,
.umbrellax-btn--primary:hover {
  background-color: #1D1D1F;
  color: #FFFFFF;
  transform: scale(1.02);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}
.btn-primary:active,
.umbrellax-btn--primary:active {
  transform: scale(0.98);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/**
 * Secondary — gold-accented, for positive actions.
 */
.btn-secondary,
.umbrellax-btn--secondary {
  background-color: var(--accent-weak);
  color: var(--accent);
  border-color: transparent;
}
.btn-secondary:hover,
.umbrellax-btn--secondary:hover {
  background-color: var(--accent);
  color: var(--ux-dark);
}
/**
 * Ghost — transparent, for tertiary actions (cancel, skip).
 */
.btn-outline,
.btn-ghost,
.umbrellax-btn--ghost {
  background-color: transparent;
  color: var(--text-muted);
  border-color: transparent;
}
.btn-outline:hover,
.btn-ghost:hover,
.umbrellax-btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--text);
}
[data-theme="light"] .btn-ghost:hover,
[data-theme="light"] .umbrellax-btn--ghost:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
/**
 * Danger — destructive actions (delete, sign out).
 */
.btn-danger,
.umbrellax-btn--danger {
  background-color: transparent;
  color: var(--brand);
  border-color: rgba(255, 102, 99, 0.3);
}
.btn-danger:hover,
.umbrellax-btn--danger:hover {
  background-color: var(--brand);
  color: #FFFFFF;
  border-color: var(--brand);
}
/* Link — inline text button (APK link from the landing). */
.btn-link,
.umbrellax-btn--link {
  padding: 0;
  background: transparent;
  color: var(--accent);
  font-weight: var(--font-weight-medium);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.25s ease;
}
.btn-link:hover,
.umbrellax-btn--link:hover {
  color: var(--gold-700);
  text-decoration: underline;
}
/* Icon-only button — transparent, no circle, just the glyph.
   Hover tone on color only (matches landing theme button
   index.html line 304: no visible circle until hover). */
.umbrellax-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 0.375rem;
  border: 0;
  border-radius: 0;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: color 0.15s var(--ease-smooth);
}
.umbrellax-icon-btn:hover {
  color: var(--text);
  background: transparent;
}
/* Button size helpers. */
.umbrellax-btn--sm {
  padding: var(--space-2) var(--space-3);
  font-size: 0.8125rem;
}
.umbrellax-btn--lg {
  padding: var(--space-4) var(--space-6);
  font-size: 1rem;
  border-radius: var(--r-lg);
}
/* ────────────────────────────────────────────────────────────────
   Cards
   ──────────────────────────────────────────────────────────────── */
/**
 * Feature card — landing's .feat-card (index.html lines 480–508).
 *
 * Dark theme relies on surface contrast (no border, no shadow).
 * Light theme leans on a hairline border and subtle shadow.
 */
.umbrellax-card {
  display: block;
  padding: var(--space-6);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--text);
  transition: transform 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft), border-color 0.2s var(--ease-smooth);
}
[data-theme="light"] .umbrellax-card {
  box-shadow: var(--shadow-card-light);
}
/* Hoverable variant — lifts on hover like .feat-card. */
.umbrellax-card--hoverable:hover {
  transform: translateY(-4px);
}
[data-theme="light"] .umbrellax-card--hoverable:hover {
  border-color: rgba(201, 148, 0, 0.2);
  box-shadow: var(--shadow-card-light-hover);
}
.umbrellax-card--hoverable:hover {
  box-shadow: var(--shadow-card-dark-hover);
}
/* Card with a flat inner background — for nested content. */
.umbrellax-card__body {
  padding: var(--space-4) 0 0;
}
.umbrellax-card__title {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  color: var(--text);
}
.umbrellax-card__desc {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
}
/* ────────────────────────────────────────────────────────────────
   Inputs
   ──────────────────────────────────────────────────────────────── */
/**
 * Base input — styles Roundcube's .form-control + elastic <input> fields,
 * plus an umbrellax-input helper for new templates.
 *
 * Matches landing's language-search input (index.html line 299):
 * light grey fill, no border, dark text.
 */
.form-control,
.umbrellax-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: var(--font-weight-normal);
  line-height: 1.4;
  transition: border-color 0.15s var(--ease-smooth), background-color 0.15s var(--ease-smooth);
}
[data-theme="light"] .form-control,
[data-theme="light"] .umbrellax-input,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="search"],
[data-theme="light"] textarea,
[data-theme="light"] select {
  background-color: #F0F0F0;
  color: #333333;
}
.form-control::placeholder,
.umbrellax-input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}
/* Focus: brighten background and border subtly. No gold ring in dark —
   user explicitly removed it (was too loud against the login card). */
.form-control:focus,
.umbrellax-input:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: transparent;
  background-color: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .form-control:focus,
[data-theme="light"] .umbrellax-input:focus {
  background-color: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}
.form-control.is-invalid,
.umbrellax-input--invalid {
  border-color: var(--brand);
}
/* Inline label + input pair. */
.umbrellax-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.umbrellax-field__label {
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.umbrellax-field__hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: var(--space-1);
}
.umbrellax-field__error {
  font-size: 0.75rem;
  color: var(--brand);
  margin-top: var(--space-1);
}
/* ────────────────────────────────────────────────────────────────
   Badges
   ──────────────────────────────────────────────────────────────── */
/**
 * Gold badge — landing's .badge-gold (lock pill with "No censorship").
 * Repurposed here for "2FA enabled", "identity active", "secure TLS".
 */
.badge,
.umbrellax-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.025em;
  text-transform: uppercase;
  line-height: 1.2;
  background-color: var(--accent-weak);
  color: var(--accent);
}
.umbrellax-badge--brand {
  background-color: rgba(255, 102, 99, 0.1);
  color: var(--brand);
}
.umbrellax-badge--online {
  background-color: rgba(46, 189, 133, 0.1);
  color: var(--ux-online);
}
.umbrellax-badge--muted {
  background-color: rgba(142, 150, 188, 0.1);
  color: var(--text-muted);
}
/* "SOON" corner tag — lifted from landing .soon-badge. */
.umbrellax-soon {
  display: inline-block;
  padding: 1px 4px;
  background-color: var(--brand);
  color: #FFFFFF;
  border-radius: 3px;
  font-size: 0.4375rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}
/* ────────────────────────────────────────────────────────────────
   Dropdowns
   ──────────────────────────────────────────────────────────────── */
/**
 * Dropdown panel — matches landing's .lang-dropdown (index.html line 297).
 * Rounded surface, dropIn animation, max-height with overflow scroll.
 *
 * Roundcube uses .dropdown-menu (Bootstrap). We override it and also
 * expose .umbrellax-dropdown for new templates.
 */
.dropdown-menu,
.umbrellax-dropdown {
  position: absolute;
  z-index: 40;
  min-width: 10rem;
  max-height: 16.25rem;
  margin-top: var(--space-1);
  padding: var(--space-1);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35), 0 8px 16px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
  animation: dropIn 0.12s ease-out;
}
[data-theme="light"] .dropdown-menu,
[data-theme="light"] .umbrellax-dropdown {
  background-color: #FFFFFF;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
}
.dropdown-item,
.umbrellax-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.dropdown-item:hover,
.umbrellax-dropdown__item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text);
}
[data-theme="light"] .dropdown-item:hover,
[data-theme="light"] .umbrellax-dropdown__item:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
.dropdown-item.active,
.dropdown-item--active,
.umbrellax-dropdown__item--active {
  background-color: var(--accent);
  color: var(--ux-dark);
  font-weight: var(--font-weight-semibold);
}
.dropdown-item.active:hover,
.umbrellax-dropdown__item--active:hover {
  background-color: var(--accent);
  color: var(--ux-dark);
}
.dropdown-divider {
  height: 1px;
  margin: var(--space-1) 0;
  background-color: var(--border);
  border: 0;
}
[data-theme="light"] .dropdown-divider {
  background-color: rgba(0, 0, 0, 0.06);
}
/* ────────────────────────────────────────────────────────────────
   Modals / dialogs
   ──────────────────────────────────────────────────────────────── */
/**
 * Modal content surface — Roundcube/Bootstrap uses .modal-content.
 * We override to match landing's rounded surface conventions.
 */
.modal-content,
.umbrellax-modal {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.4);
  color: var(--text);
}
[data-theme="light"] .modal-content,
[data-theme="light"] .umbrellax-modal {
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.15);
}
.modal-header,
.umbrellax-modal__header {
  padding: var(--space-6) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--border);
  font-size: 1.125rem;
  font-weight: var(--font-weight-semibold);
}
[data-theme="light"] .modal-header,
[data-theme="light"] .umbrellax-modal__header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
.modal-body,
.umbrellax-modal__body {
  padding: var(--space-6);
}
.modal-footer,
.umbrellax-modal__footer {
  padding: var(--space-4) var(--space-6) var(--space-6);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}
.modal-backdrop,
.umbrellax-modal__backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 30;
}
[data-theme="light"] .modal-backdrop,
[data-theme="light"] .umbrellax-modal__backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}
/* ────────────────────────────────────────────────────────────────
   Alerts / toasts
   ──────────────────────────────────────────────────────────────── */
/**
 * Status messages — Roundcube emits .alert .alert-success / .alert-error.
 * Shape matches landing's .counter-pill (rounded full, inline icon + text).
 */
.alert,
.umbrellax-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--r-md);
  font-size: 0.875rem;
  line-height: 1.4;
  background-color: var(--surface);
  color: var(--text);
}
/**
 * Hide alert / message containers that have no content — Roundcube
 * renders <div id="message"> even when empty, which showed up as a
 * styled empty bar above the login form. `:empty` catches that.
 */
.alert:empty,
.umbrellax-alert:empty,
#message:empty {
  display: none;
}
.alert-success,
.umbrellax-alert--success {
  background-color: rgba(46, 189, 133, 0.1);
  color: var(--ux-online);
}
.alert-warning,
.umbrellax-alert--warning {
  background-color: rgba(201, 148, 0, 0.1);
  color: var(--accent);
}
.alert-danger,
.alert-error,
.umbrellax-alert--danger {
  background-color: rgba(255, 102, 99, 0.1);
  color: var(--brand);
}
.alert-info,
.umbrellax-alert--info {
  background-color: rgba(77, 159, 212, 0.1);
  color: var(--ux-check);
}
/* Toast "Loading" indicator — replace Roundcube's text with a gold
   spinner. Roundcube emits toast with varying class combinations
   across actions; cover all observed variants. */
#messagestack .loading,
#messagestack .notice.loading,
#messagestack div.loading,
.messagestack .loading,
.alert.loading,
div[id^="message-"].loading,
.notice.loading {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 2.75rem !important;
  min-height: 2.75rem !important;
  width: auto !important;
  padding: var(--space-3) !important;
  background-color: var(--surface) !important;
  border-radius: var(--r-full) !important;
  color: transparent !important;
  text-indent: -9999px;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
#messagestack .loading::before,
#messagestack .notice.loading::before,
#messagestack div.loading::before,
.messagestack .loading::before,
.alert.loading::before,
div[id^="message-"].loading::before,
.notice.loading::before {
  content: "";
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-top-color: var(--accent);
  border-radius: 50%;
  text-indent: 0;
  animation: umbrellax-spin 0.7s linear infinite;
}
[data-theme="light"] #messagestack .loading,
[data-theme="light"] .messagestack .loading,
[data-theme="light"] .alert.loading,
[data-theme="light"] .notice.loading {
  background-color: #FFFFFF !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}
[data-theme="light"] #messagestack .loading::before,
[data-theme="light"] .messagestack .loading::before,
[data-theme="light"] .alert.loading::before,
[data-theme="light"] .notice.loading::before {
  border-color: rgba(0, 0, 0, 0.08);
  border-top-color: var(--accent);
}
/* ────────────────────────────────────────────────────────────────
   Counter pill (landing .counter-pill)
   ──────────────────────────────────────────────────────────────── */
/**
 * Rounded pill with a pulsing dot — used for "N unread", presence,
 * live status counters. Lifted from landing lines 318–331.
 */
.umbrellax-counter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background-color: var(--surface);
  border-radius: var(--r-full);
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  color: var(--text);
}
[data-theme="light"] .umbrellax-counter {
  background-color: #FFFFFF;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card-light);
}
.umbrellax-counter__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--r-full);
  background-color: var(--ux-online);
  /* countPulse animation defined in _animations.less (stage 8). */
}
.umbrellax-counter__value {
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-semibold);
}
/**
 * Layout — app shell, sidebar, toolbar, split-pane, mobile stack.
 *
 * Roundcube elastic uses its own grid primitives. We override the
 * classes it already emits (`.layout`, `.layout-sidebar`, `.layout-content`)
 * and also expose `.umbrellax-*` helpers for our override templates
 * (login, hero states).
 *
 * Breakpoints match the landing's `md: 768px` — single source of truth.
 */
/* 768px — desktop */
/* 1024px — wide */
/* 56px, matches landing header */
/* 256px */
/* ────────────────────────────────────────────────────────────────
   App shell
   ──────────────────────────────────────────────────────────────── */
html,
body {
  height: 100%;
  margin: 0;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/**
 * Root layout grid — sidebar + main on desktop, stacked on mobile.
 * Roundcube elastic's wrapper div gets `.layout`; our login template
 * uses `.umbrellax-shell` instead (single column, centered).
 */
.layout,
.umbrellax-shell {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}
@media (min-width: 48rem) {
  .layout {
    flex-direction: row;
  }
}
/* ────────────────────────────────────────────────────────────────
   Header / top-bar
   ──────────────────────────────────────────────────────────────── */
/* Outer header spans the full viewport width; inner flex row is
   capped at max-w-6xl and centered so on wide screens the logo /
   lang / theme sit on the same axis as the hero content below
   instead of flying to the extreme edges. Mirrors landing header
   (index.html lines 285-286). */
/* Outer bar — no border (user removed it). Shadow + backdrop-blur
   only, matching landing md:shadow-[0_2px_4px_rgba(0,0,0,.06)]. */
.umbrellax-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background-color: rgba(24, 26, 32, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
[data-theme="light"] .umbrellax-header {
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
/* Inner flex container — landing convention exactly:
   max-w-6xl (1152px), mx-auto, px-3 default + sm:px-6 (≥640px),
   h-14 (56px). Items space-between via spacer. */
.umbrellax-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 3.5rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 0.75rem;
  /* px-3 = 12px on mobile */
}
@media (min-width: 40rem) {
  .umbrellax-header__inner {
    padding: 0 var(--space-6);
    /* sm:px-6 = 24px */
  }
}
.umbrellax-header__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text);
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.umbrellax-header__logo .umbrellax-logo-mark {
  width: 1.75rem;
  height: 1.75rem;
  transition: rotate 0.3s ease;
}
.umbrellax-header__logo:hover .umbrellax-logo-mark {
  rotate: 15deg;
}
.umbrellax-header__spacer {
  flex: 1 1 auto;
}
.umbrellax-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.umbrellax-header__brand {
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.025em;
}
/* The "X" after "Umbrella" is an inline SVG letter with elongated tail
   in brand coral — matches landing (index.html line 291). baseline
   alignment + negative bottom margin replicate how it sits in the word. */
.umbrellax-header__x {
  display: inline-block;
  vertical-align: baseline;
  margin-bottom: -8px;
}
/* Sun and Moon icons same size (20px) — user wanted matched
   dimensions (landing's 20/16 split looked uneven in our header
   density). Colour matches landing's text-gray-400. */
.umbrellax-theme-toggle .umbrellax-icon--sun,
.umbrellax-theme-toggle .umbrellax-icon--moon {
  width: 1.25rem;
  height: 1.25rem;
}
.umbrellax-theme-toggle {
  color: #9CA3AF;
}
.umbrellax-theme-toggle:hover {
  color: #9CA3AF;
}
/* Language switcher — 1-to-1 with landing #lang-btn + #lang-dropdown.
   Landing reference: index.html lines 293–350, assets/i18n.js lines
   126-165 (button rows with code circles + labels).
   MVP: EN/RU only — no search input, no flag images. */
.umbrellax-lang-wrap {
  position: relative;
}
.umbrellax-lang-btn {
  padding: 0.375rem 0.625rem;
  background: transparent;
  border: 0;
  border-radius: 0.5rem;
  color: #9CA3AF;
  /* landing text-gray-400 */
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.025em;
  cursor: pointer;
  transition: background-color 0.12s var(--ease-smooth), color 0.12s var(--ease-smooth);
}
.umbrellax-lang-btn:hover,
.umbrellax-lang-wrap.is-open .umbrellax-lang-btn {
  background-color: rgba(255, 255, 255, 0.1);
  color: #9CA3AF;
}
[data-theme="light"] .umbrellax-lang-btn:hover,
[data-theme="light"] .umbrellax-lang-wrap.is-open .umbrellax-lang-btn {
  background-color: rgba(0, 0, 0, 0.05);
}
/* Dropdown panel — matches landing lines 296-302:
   200px width, rounded-xl, shadow-2xl, 1px border, white/surface bg.
   No horizontal padding on the container: rows span full width so
   their hover background fills edge-to-edge. Tiny vertical padding
   (landing `py-1`) keeps rows from kissing the border. */
.umbrellax-lang-dropdown {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  width: 200px;
  padding: 0.25rem 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 10px 20px rgba(0, 0, 0, 0.15);
  z-index: 60;
  overflow: hidden;
  animation: dropIn 0.12s ease-out;
}
[data-theme="dark"] .umbrellax-lang-dropdown,
:root .umbrellax-lang-dropdown {
  background-color: var(--ux-surface);
  border-color: var(--ux-bubble);
}
[data-theme="light"] .umbrellax-lang-dropdown {
  background-color: #FFFFFF;
  border-color: #E5E7EB;
}
/* Language row — landing assets/i18n.js lines 143-156: full-width
   button with code circle on the left, language name on the right. */
.umbrellax-lang-row {
  display: flex !important;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: transparent;
  color: #6B7280;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.umbrellax-lang-row:hover {
  background-color: #F3F4F6;
  color: #6B7280 !important;
  text-decoration: none !important;
}
[data-theme="dark"] .umbrellax-lang-row:hover,
:root .umbrellax-lang-row:hover {
  background-color: var(--ux-bubble);
  color: var(--text-muted) !important;
}
[data-theme="light"] .umbrellax-lang-row:hover {
  background-color: #F3F4F6;
}
.umbrellax-lang-row.is-active {
  color: #1D1D1F;
}
[data-theme="dark"] .umbrellax-lang-row.is-active,
:root .umbrellax-lang-row.is-active {
  color: var(--text);
}
.umbrellax-lang-row.is-active .umbrellax-lang-label {
  font-weight: 700;
}
/* Code circle — 28px rounded-full with 9px uppercase text.
   Inactive = grey pill; active = gold (accent) with dark text. */
.umbrellax-lang-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background-color: rgba(156, 163, 175, 0.15);
  color: #9CA3AF;
  font-size: 0.5625rem;
  /* 9px */
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.umbrellax-lang-row.is-active .umbrellax-lang-circle {
  background-color: var(--accent);
  color: #FFFFFF;
}
.umbrellax-lang-label {
  font-size: 0.75rem;
}
/* ────────────────────────────────────────────────────────────────
   Sidebar
   ──────────────────────────────────────────────────────────────── */
/**
 * Folder list sidebar. Collapses to a drawer on mobile
 * (elastic handles the toggle JS — we only style).
 */
.layout-sidebar,
.umbrellax-sidebar {
  flex: 0 0 auto;
  width: 100%;
  padding: var(--space-4);
  background-color: var(--surface);
  overflow-y: auto;
}
@media (min-width: 48rem) {
  .layout-sidebar,
  .umbrellax-sidebar {
    width: 16rem;
    border-right: 1px solid var(--border);
  }
}
.umbrellax-sidebar__section {
  margin-bottom: var(--space-6);
}
.umbrellax-sidebar__heading {
  padding: 0 var(--space-3) var(--space-2);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
/* Folder / nav item. Roundcube elastic uses .listitem; we style both. */
.listitem,
.umbrellax-navitem {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  margin-bottom: 2px;
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color 0.12s var(--ease-smooth), color 0.12s var(--ease-smooth);
  cursor: pointer;
}
.listitem:hover,
.umbrellax-navitem:hover {
  background-color: rgba(255, 255, 255, 0.04);
}
[data-theme="light"] .listitem:hover,
[data-theme="light"] .umbrellax-navitem:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
.listitem.selected,
.umbrellax-navitem--active {
  background-color: var(--accent-weak);
  color: var(--accent);
  font-weight: var(--font-weight-medium);
}
.umbrellax-navitem__count {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.umbrellax-navitem--active .umbrellax-navitem__count {
  color: var(--accent);
}
/* ────────────────────────────────────────────────────────────────
   Main content area
   ──────────────────────────────────────────────────────────────── */
.layout-content,
.umbrellax-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* allow flex children to shrink below content width */
  min-height: 0;
}
/**
 * Split pane — message list + preview side-by-side on desktop,
 * stacked on mobile with route-based reveal.
 */
.umbrellax-split {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
@media (min-width: 64rem) {
  .umbrellax-split {
    flex-direction: row;
  }
}
.umbrellax-split__list {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 64rem) {
  .umbrellax-split__list {
    flex: 0 0 22rem;
    /* 352px list column on wide screens */
    border-bottom: 0;
    border-right: 1px solid var(--border);
  }
}
.umbrellax-split__preview {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  padding: var(--space-6);
}
@media (max-width: 63rem) {
  /* On mobile, preview takes over the viewport when opened. */
  .umbrellax-split__preview[aria-expanded="false"] {
    display: none;
  }
}
/* ────────────────────────────────────────────────────────────────
   Toolbar
   ──────────────────────────────────────────────────────────────── */
/**
 * Action toolbar above the message list / compose form.
 * Roundcube elastic emits .toolbar; we extend.
 */
.toolbar,
.umbrellax-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
}
.umbrellax-toolbar__group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.umbrellax-toolbar__spacer {
  flex: 1 1 auto;
}
/* ────────────────────────────────────────────────────────────────
   Hero shell (login, empty states)
   ──────────────────────────────────────────────────────────────── */
/**
 * Centered, single-column layout for login and empty states.
 * Matches landing's hero section: fade-up animation, centered text,
 * vertical rhythm via --space-* tokens.
 */
.umbrellax-hero {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-16) var(--space-6);
  text-align: center;
}
.umbrellax-hero__inner {
  width: 100%;
  max-width: 28rem;
  /* 448px — matches landing sub max-w-lg */
}
.umbrellax-hero__heading {
  font-weight: var(--font-weight-light);
  font-size: 2.25rem;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-4);
}
@media (min-width: 40rem) {
  .umbrellax-hero__heading {
    font-size: 3rem;
  }
}
.umbrellax-hero__heading--accent {
  background: linear-gradient(to right, var(--gold-600), var(--gold-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.umbrellax-hero__subtitle {
  margin: 0 0 var(--space-8);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text-muted);
}
/* Spinning umbrella above the hero heading. Matches UmbrellaX Watch
   404 page (w-20 h-20 + logo-pulse class). display:block + margin
   auto centres it at exactly the same axis as the (centered) heading
   / subtitle / form container below. */
.umbrellax-hero__umbrella {
  display: block;
  width: 5rem;
  height: 5rem;
  margin: 0 auto var(--space-6);
  animation: logoPulseDark 3s ease-in-out infinite, logoSpin 20s linear infinite;
}
[data-theme="light"] .umbrellax-hero__umbrella {
  animation: logoPulse 3s ease-in-out infinite, logoSpin 20s linear infinite;
}
/* ────────────────────────────────────────────────────────────────
   Theme toggle
   ──────────────────────────────────────────────────────────────── */
/**
 * Sun/Moon icon button in the top bar.
 * Matches landing header theme toggle (index.html line 304).
 * Icon swap handled via CSS: sun visible in dark, moon in light.
 */
.umbrellax-theme-toggle {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
}
.umbrellax-theme-toggle .umbrellax-icon--sun,
.umbrellax-theme-toggle .umbrellax-icon--moon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.125rem;
  height: 1.125rem;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s var(--ease-smooth);
}
/* Dark (default): show sun (click to go light). */
.umbrellax-theme-toggle .umbrellax-icon--sun {
  opacity: 1;
}
.umbrellax-theme-toggle .umbrellax-icon--moon {
  opacity: 0;
}
/* Light theme: show moon. */
[data-theme="light"] .umbrellax-theme-toggle .umbrellax-icon--sun {
  opacity: 0;
}
[data-theme="light"] .umbrellax-theme-toggle .umbrellax-icon--moon {
  opacity: 1;
}
/* ────────────────────────────────────────────────────────────────
   Responsive helpers
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 47rem) {
  .umbrellax-hide-mobile {
    display: none !important;
  }
}
@media (min-width: 48rem) {
  .umbrellax-hide-desktop {
    display: none !important;
  }
}
/* Sidebar drawer on mobile — open via aria-expanded. */
@media (max-width: 47rem) {
  .umbrellax-sidebar {
    position: fixed;
    top: 3.5rem;
    left: 0;
    bottom: 0;
    width: min(80vw, 20rem);
    transform: translateX(-100%);
    transition: transform 0.25s var(--ease-smooth);
    z-index: 45;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
  }
  .umbrellax-sidebar[aria-expanded="true"] {
    transform: translateX(0);
  }
}
/**
 * Mail — login form, message list, preview pane, compose, identity dropdown.
 *
 * Styles both umbrellax-prefixed helpers (login template owns them) and
 * the Roundcube/elastic classes the inherited templates emit
 * (.messagelist, .message, .headers-table, etc.).
 */
/* ────────────────────────────────────────────────────────────────
   Login form (our custom template)
   ──────────────────────────────────────────────────────────────── */
.umbrellax-login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  text-align: left;
}
/**
 * Roundcube's <roundcube:object name="loginform" /> emits a <table>
 * with labels in the first column and inputs in the second. We flatten
 * it into stacked fields without touching the template tag.
 */
.umbrellax-login-form table,
.umbrellax-login-form tbody {
  display: block;
  width: 100%;
}
.umbrellax-login-form tr {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.umbrellax-login-form td {
  display: block;
  padding: 0;
  width: 100%;
}
.umbrellax-login-form td.title,
.umbrellax-login-form label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
/* Inputs match the login button pixel-for-pixel: same padding,
   same min-height, same font-size, same border-radius. User
   explicitly wanted heights aligned to button. */
.umbrellax-login-form input[type="text"],
.umbrellax-login-form input[type="email"],
.umbrellax-login-form input[type="password"] {
  display: block;
  width: 100% !important;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-6) !important;
  /* 12px 24px */
  min-height: 2.75rem !important;
  /* 44px */
  font-size: 0.9375rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  border-radius: var(--r-lg) !important;
  text-align: left;
  color: #FFFFFF !important;
  /* pure white on dark, readable */
  caret-color: #FFFFFF !important;
}
[data-theme="light"] body.task-login .umbrellax-login-form input[type="text"],
[data-theme="light"] body.task-login .umbrellax-login-form input[type="email"],
[data-theme="light"] body.task-login .umbrellax-login-form input[type="password"] {
  color: #1D1D1F !important;
  caret-color: #1D1D1F !important;
}
/* Focus — elastic's base CSS (concatenated in) applies Bootstrap's
   blue ring via border-color + box-shadow on .form-control:focus.
   Kill both in dark, replace with a faint white-translucent border
   so the input still visibly responds to focus without the loud blue.
   Light theme keeps its subtle grey + soft shadow. */
body.task-login .umbrellax-login-form input[type="text"]:focus,
body.task-login .umbrellax-login-form input[type="email"]:focus,
body.task-login .umbrellax-login-form input[type="password"]:focus,
body.task-login .umbrellax-login-form .form-control:focus {
  outline: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
}
[data-theme="light"] body.task-login .umbrellax-login-form input:focus,
[data-theme="light"] body.task-login .umbrellax-login-form .form-control:focus {
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04) !important;
}
/**
 * Login submit — UmbrellaX Watch button style: pill, cream fill on dark
 * (inverted in light), hover opacity 80%. Refs: Watch
 * components/VideoInfo.tsx line 48, app/not-found.tsx line 25.
 *
 * Selectors duplicated with higher specificity (body.task-login prefix)
 * because elastic's base styles.min.css has aggressive .button.mainaction
 * rules that override ours. Scoping to body.task-login wins the cascade.
 */
body.task-login .umbrellax-login-form button[type="submit"],
body.task-login .umbrellax-login-form input[type="submit"],
body.task-login .umbrellax-login-form .button.mainaction,
.umbrellax-login-form button[type="submit"],
.umbrellax-login-form .button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-height: 2.75rem;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-6) !important;
  background-color: var(--text-dark) !important;
  /* #E0E0D1 */
  color: var(--ux-dark) !important;
  /* #181A20 */
  border: 0 !important;
  border-radius: var(--r-full) !important;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: none !important;
  transition: opacity 0.15s ease, transform 0.15s var(--ease-smooth);
}
[data-theme="light"] body.task-login .umbrellax-login-form button[type="submit"],
[data-theme="light"] body.task-login .umbrellax-login-form input[type="submit"],
[data-theme="light"] body.task-login .umbrellax-login-form .button.mainaction {
  background-color: #2D2D2D !important;
  color: #FFFFFF !important;
}
/* Hover: opacity only. Removing the bg-color override restores the
   light theme's "slightly grey" hover (opacity 0.8 on #2D2D2D reads
   as soft grey). Dark theme's cream button gets the same dimming. */
body.task-login .umbrellax-login-form button[type="submit"]:hover,
body.task-login .umbrellax-login-form .button.mainaction:hover {
  opacity: 0.8;
}
body.task-login .umbrellax-login-form button[type="submit"]:active,
body.task-login .umbrellax-login-form .button.mainaction:active {
  transform: scale(0.98);
}
/* Elastic's base CSS forces body { height:100%, overflow:hidden },
   body.task-login form layouts into flex columns that stretch children,
   Roundcube wraps <roundcube:form> in a <form> with form-specific
   margins. We flatten the whole login tree back to normal block flow
   so the content sits naturally under the header without gaps or
   mid-page jumps. */
html,
body.task-login {
  height: auto !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background-color: var(--bg) !important;
  color: var(--text) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Hide the scrollbar entirely on the login page — content fits in
   viewport, so no scrollbar is needed. scrollbar-gutter is too new
   for reliable cross-browser symmetry; hiding the gutter outright
   gives perfect left/right centring on every engine. */
body.task-login {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE / Edge legacy */
}
body.task-login::-webkit-scrollbar,
html:has(body.task-login)::-webkit-scrollbar {
  display: none;
  /* Webkit */
  width: 0;
  height: 0;
}
/* Sticky-footer layout: header fixed, main grows to fill, footer
   (login hint + divider) sits at viewport bottom regardless of
   content height. Overrides elastic's own body layout. */
body.task-login {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
/* Main fills body width (flex item stretches), grows to fill vertical
   space between header and footer, and nests a flex row that centres
   the hero card on both axes. Explicit margin:0 and left/right:0
   pinning kills any inherited offset from elastic's concat'd base. */
body.task-login main.umbrellax-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: var(--space-6) !important;
  background: transparent !important;
  flex: 1 0 auto !important;
  min-height: 0 !important;
  box-sizing: border-box;
}
/* Footer pinned to the bottom of the flex column. */
body.task-login .umbrellax-login-footer {
  flex: 0 0 auto;
  width: 100%;
  padding: var(--space-4) var(--space-6) var(--space-6);
  text-align: center;
}
/* Explicit pixel width instead of width:100% — the latter made the
   inner expand to viewport when hero is a flex parent with auto
   cross-size. Explicit 22rem + max-width:100% gives us 352px on
   desktop, clamped on mobile. */
body.task-login .umbrellax-hero__inner {
  display: block !important;
  position: static !important;
  width: 22rem !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
}
/* Form, its table wrappers, and the .formbuttons paragraph all
   strictly bounded to the 22rem inner card. Elastic's base rules
   for .formbuttons and .propform let them wander wider, so every
   level gets an explicit width: 100% / max-width: 100% / margin: 0. */
body.task-login .umbrellax-login-form {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: var(--space-6) 0 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
body.task-login .umbrellax-login-form table,
body.task-login .umbrellax-login-form tbody {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-collapse: collapse;
}
body.task-login .umbrellax-login-form .formbuttons {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: var(--space-5) 0 0 !important;
  text-align: center;
  position: relative;
  border: 0 !important;
}
/* Divider above the login button — same landing platform-divider
   gradient as the footer hint uses. Rendered as ::before so we don't
   need extra markup inside Roundcube's auto-generated .formbuttons. */
body.task-login .umbrellax-login-form .formbuttons::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 1px;
  width: min(80%, 370px);
  background: linear-gradient(90deg, transparent, #333543, transparent);
}
[data-theme="light"] body.task-login .umbrellax-login-form .formbuttons::before {
  background: linear-gradient(90deg, transparent, #D1D5DB, transparent);
}
/* Login button animated ellipsis during form submit. JS adds
   .is-loading on submit; CSS hides the "Войти" text and shows
   "." → ".." → "..." cycling in the button's contrast colour. */
body.task-login .umbrellax-login-form button[type="submit"].is-loading {
  color: transparent !important;
  pointer-events: none;
  position: relative;
}
body.task-login .umbrellax-login-form button[type="submit"].is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 2rem;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.15em;
  color: var(--ux-dark);
  animation: umbrellax-dots 1.2s infinite steps(1, end);
}
[data-theme="light"] body.task-login .umbrellax-login-form button[type="submit"].is-loading::after {
  color: #FFFFFF;
}
/* Heading stays on its two lines ("Добро пожаловать в" + brand).
   Each <span.umbrellax-hero__heading-line> is nowrap so neither
   line wraps mid-phrase on narrow viewports. */
body.task-login .umbrellax-hero__heading {
  font-size: 2rem;
  line-height: 1.05;
}
body.task-login .umbrellax-hero__heading-line {
  display: inline-block;
  white-space: nowrap;
}
@media (min-width: 40rem) {
  body.task-login .umbrellax-hero__heading {
    font-size: 2.5rem;
  }
}
/* Form wrapper — zero margins so inputs sit immediately after the
   subtitle, not hundreds of px below. */
body.task-login .umbrellax-login-form,
body.task-login form#login-form {
  display: block !important;
  position: static !important;
  width: 100% !important;
  margin: var(--space-6) 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  text-align: left !important;
}
/* Any tables Roundcube emits inside the form become normal blocks. */
body.task-login .umbrellax-login-form table,
body.task-login .umbrellax-login-form tbody,
body.task-login .umbrellax-login-form tr {
  display: block !important;
  width: 100% !important;
}
body.task-login .umbrellax-login-form td {
  display: block !important;
  padding: 0 !important;
}
body.task-login .umbrellax-login-form tr {
  margin-bottom: var(--space-4) !important;
}
body.task-login .umbrellax-hero__subtitle,
body.task-login .umbrellax-login-hint {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body.task-login .umbrellax-login-hint {
  margin: var(--space-4) auto 0;
  padding: 0;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 28rem;
}
/* Support link gold by default (user wants the hover-state
   colour as the resting state). */
body.task-login .umbrellax-login-hint a {
  color: var(--accent) !important;
  text-decoration: none;
  transition: color 0.15s ease;
}
body.task-login .umbrellax-login-hint a:hover {
  color: var(--gold-700) !important;
  text-decoration: underline;
}
/* Divider 1-to-1 from landing platform-divider (index.html line 368):
   1px gradient fade, 80% width capped at 370px, subtle grey in light
   / muted dark navy in dark. Used both inside the form (above the
   submit button if present) and in the footer (above login hint). */
.umbrellax-divider {
  height: 1px;
  width: min(80%, 370px);
  margin: var(--space-4) auto;
  background: linear-gradient(90deg, transparent, #D1D5DB, transparent);
}
[data-theme="dark"] .umbrellax-divider,
:root .umbrellax-divider {
  background: linear-gradient(90deg, transparent, #333543, transparent);
}
[data-theme="light"] .umbrellax-divider {
  background: linear-gradient(90deg, transparent, #D1D5DB, transparent);
}
.umbrellax-login-hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
  text-align: center;
}
.umbrellax-login-hint a {
  color: var(--accent);
  text-decoration: none;
}
.umbrellax-login-hint a:hover {
  text-decoration: underline;
}
.umbrellax-login-footer {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.umbrellax-login-footer a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.umbrellax-login-footer a:hover {
  color: var(--accent);
}
/* ────────────────────────────────────────────────────────────────
   Message list (inherited templates — elastic .messagelist)
   ──────────────────────────────────────────────────────────────── */
.messagelist,
.umbrellax-mail-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.messagelist tr,
.umbrellax-mail-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background-color 0.12s var(--ease-smooth);
}
[data-theme="light"] .messagelist tr,
[data-theme="light"] .umbrellax-mail-list__item {
  border-bottom-color: rgba(0, 0, 0, 0.04);
}
.messagelist tr:hover,
.umbrellax-mail-list__item:hover {
  background-color: rgba(255, 255, 255, 0.03);
}
[data-theme="light"] .messagelist tr:hover,
[data-theme="light"] .umbrellax-mail-list__item:hover {
  background-color: rgba(0, 0, 0, 0.02);
}
.messagelist tr.selected,
.messagelist tr.focused,
.umbrellax-mail-list__item--selected {
  background-color: var(--accent-weak);
}
.messagelist tr.unroot,
.messagelist tr.unread,
.umbrellax-mail-list__item--unread {
  font-weight: var(--font-weight-semibold);
}
.umbrellax-mail-list__avatar {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-full);
  background-color: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: var(--font-weight-semibold);
  color: var(--accent);
}
.umbrellax-mail-list__body {
  flex: 1 1 auto;
  min-width: 0;
}
.umbrellax-mail-list__from {
  font-size: 0.9375rem;
  font-weight: var(--font-weight-semibold);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.umbrellax-mail-list__subject {
  font-size: 0.875rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.umbrellax-mail-list__preview {
  font-size: 0.8125rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.umbrellax-mail-list__meta {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  font-size: 0.75rem;
  color: var(--text-muted);
}
/* Elastic inbox overrides — tint every Bootstrap "primary" blue with
   our gold accent so the mail list doesn't feel like stock elastic. */
:root,
[data-theme="dark"] {
  --primary: var(--accent) !important;
  --color-primary: var(--accent) !important;
  --color-btn-primary: var(--accent) !important;
  --color-btn-primary-bg: var(--accent) !important;
  --color-btn-primary-border: var(--accent) !important;
  --color-link: var(--accent) !important;
  --color-link-hover: var(--gold-700) !important;
  --color-checked: var(--accent) !important;
  --color-active: var(--accent) !important;
}
/* Sidebar folder / task selection. Elastic uses .listitem.selected
   + various task-menu a.selected patterns. */
.listing .listitem.selected,
.listing li.selected,
.listing li.active > a,
.listing tr.selected,
.listing tr.focused,
.messagelist tr.selected,
.messagelist tr.focused,
a.task-menu-button.selected,
.task-menu .button.selected,
#taskmenu a.button.selected,
.selectable.listing .listitem.selected,
ul.treelist li.selected > a,
.folderlist li.selected > a,
.folderlist li.droptarget > a {
  background-color: var(--accent-weak) !important;
  color: var(--text) !important;
}
.listing .listitem.selected:before,
.listing tr.selected:before,
.folderlist li.selected > a:before {
  color: var(--accent) !important;
}
/* Unread count badges — elastic uses .unreadcount / .badge-primary. */
.unreadcount,
.badge-primary,
.badge.primary,
.folderlist .unreadcount,
.listing .unreadcount,
.countvalue {
  background-color: var(--accent) !important;
  color: var(--ux-dark) !important;
  border: 0 !important;
}
/* Active task icon accent (left column Mail/Contacts/Settings). */
#taskmenu a.button.selected .inner,
.task-menu a.button.selected {
  color: var(--accent) !important;
}
/* Buttons that Roundcube marks "primary" / "mainaction" — pick up
   our cream-pill treatment instead of Bootstrap blue. */
.toolbar a.button.selected,
.toolbar a.button.selected .inner,
button.btn-primary,
.btn.btn-primary,
a.button.mainaction,
.toolbar a.button.pressed {
  color: var(--accent) !important;
}
/* Links in message body and anywhere inside inherited elastic shell. */
#layout a:not(.btn):not(.button):not(.listitem):not(.umbrellax-header__logo),
#messagestack a,
.message-content a {
  color: var(--accent);
}
#layout a:not(.btn):not(.button):not(.listitem):not(.umbrellax-header__logo):hover {
  color: var(--gold-700);
}
/* Focus ring — switch elastic's blue outline to gold. */
input:focus,
button:focus,
a:focus,
.form-control:focus {
  outline-color: var(--accent) !important;
  border-color: var(--accent) !important;
}
/* Elastic's .ui.alert.alert-info (loading / notice toasts) is blue;
   re-tint to our muted surface with gold accent. */
.ui.alert.alert-info:not(.loading) {
  background-color: var(--accent-weak) !important;
  color: var(--accent) !important;
  border-color: transparent !important;
}
/* ────────────────────────────────────────────────────────────────
   Preview pane (inherited — elastic .message-content)
   ──────────────────────────────────────────────────────────────── */
.messageheader,
.umbrellax-mail-preview__header {
  padding: var(--space-4) 0 var(--space-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-6);
}
[data-theme="light"] .messageheader,
[data-theme="light"] .umbrellax-mail-preview__header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
.umbrellax-mail-preview__subject {
  font-size: 1.5rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-3);
  color: var(--text);
}
.umbrellax-mail-preview__from {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.umbrellax-mail-preview__from .umbrellax-mail-list__avatar {
  width: 2.75rem;
  height: 2.75rem;
}
.umbrellax-mail-preview__from-name {
  font-weight: var(--font-weight-semibold);
  color: var(--text);
}
.umbrellax-mail-preview__from-email {
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.umbrellax-mail-preview__date {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.umbrellax-mail-preview__body,
.messageheader ~ .message-content {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text);
}
.umbrellax-mail-preview__body a {
  color: var(--accent);
}
.umbrellax-mail-preview__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.umbrellax-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background-color: var(--surface);
  color: var(--text);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: border-color 0.15s var(--ease-smooth), transform 0.2s var(--ease-smooth);
}
[data-theme="light"] .umbrellax-attachment-chip {
  box-shadow: var(--shadow-card-light);
}
.umbrellax-attachment-chip:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
/* ────────────────────────────────────────────────────────────────
   Compose (inherited — elastic form layout)
   ──────────────────────────────────────────────────────────────── */
.umbrellax-compose {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
}
.umbrellax-compose__field {
  display: grid;
  grid-template-columns: 6rem 1fr;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .umbrellax-compose__field {
  border-bottom-color: rgba(0, 0, 0, 0.04);
}
.umbrellax-compose__label {
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.umbrellax-compose__input {
  background: transparent;
  border: 0;
  padding: var(--space-2) 0;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--text);
}
.umbrellax-compose__input:focus {
  outline: none;
  background: transparent;
}
.umbrellax-compose__body {
  min-height: 20rem;
  padding: var(--space-4) 0;
  resize: vertical;
  line-height: 1.65;
}
/* Identity dropdown — matches .umbrellax-dropdown__item--active styling. */
.umbrellax-identity-select {
  position: relative;
}
.umbrellax-identity-select__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background-color: var(--accent-weak);
  color: var(--accent);
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-semibold);
  border: 0;
  cursor: pointer;
  transition: background-color 0.12s var(--ease-smooth);
}
.umbrellax-identity-select__trigger:hover {
  background-color: var(--accent);
  color: var(--ux-dark);
}
/* Toolbar "Send" style — primary button shape. */
.umbrellax-compose__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
}
/**
 * Settings — user preferences, identities, 2FA onboarding.
 *
 * Styles inherited elastic templates. Roundcube emits:
 *   * .formcontent — container for settings forms
 *   * .section — heading + fields block
 *   * .propform — label/input pair (label first col, input second)
 *   * .identitieslist — list of identities in preferences
 *   * plugin-specific classes for twofactor_gauthenticator (TOTP QR)
 *
 * We override those with theme-aware styling and add .umbrellax-settings-*
 * helpers for our own additions (like the 2FA callout card on the main
 * settings landing).
 */
/* ────────────────────────────────────────────────────────────────
   Settings shell
   ──────────────────────────────────────────────────────────────── */
.formcontent,
.umbrellax-settings {
  padding: var(--space-6);
  max-width: 60rem;
}
.umbrellax-settings__intro {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .umbrellax-settings__intro {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
.umbrellax-settings__title {
  margin: 0 0 var(--space-2);
  font-size: 1.75rem;
  font-weight: var(--font-weight-light);
  letter-spacing: -0.015em;
  color: var(--text);
}
.umbrellax-settings__subtitle {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.6;
}
/* Section heading (inherited from elastic + our helper). */
.formcontent h3,
.formcontent .section-title,
.umbrellax-settings__section-title {
  margin: var(--space-8) 0 var(--space-4);
  font-size: 1.125rem;
  font-weight: var(--font-weight-semibold);
  color: var(--text);
  letter-spacing: -0.01em;
}
.formcontent h3:first-child,
.umbrellax-settings__section-title:first-child {
  margin-top: 0;
}
/* Prop form rows (elastic .propform).
   Label on the left, input on the right, aligned at baseline. */
.propform,
.umbrellax-prop {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) 2fr;
  gap: var(--space-4) var(--space-6);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .propform,
[data-theme="light"] .umbrellax-prop {
  border-bottom-color: rgba(0, 0, 0, 0.04);
}
.propform label,
.umbrellax-prop__label {
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.propform .hint,
.umbrellax-prop__hint {
  grid-column: 2 / -1;
  margin-top: var(--space-1);
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
}
/* ────────────────────────────────────────────────────────────────
   Identity list (identity_select-aware)
   ──────────────────────────────────────────────────────────────── */
/**
 * Roundcube emits <table class="identitieslist"> in Settings → Identities.
 * We reshape it into a vertical list of cards with gold highlight for
 * the default identity. The identity_select plugin doesn't care about
 * the DOM shape — it reads Delivered-To / X-Original-To server-side.
 */
.identitieslist,
.umbrellax-identity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.identitieslist tr,
.umbrellax-identity-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background-color: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s var(--ease-smooth), background-color 0.15s var(--ease-smooth);
}
[data-theme="light"] .identitieslist tr,
[data-theme="light"] .umbrellax-identity-list__item {
  box-shadow: var(--shadow-card-light);
}
.identitieslist tr:hover,
.umbrellax-identity-list__item:hover {
  border-color: var(--accent);
}
/* Default identity (the one that ships first in the list). */
.identitieslist tr.default,
.umbrellax-identity-list__item--default {
  background-color: var(--accent-weak);
  border-color: var(--accent);
}
.umbrellax-identity-list__avatar {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-full);
  background-color: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  color: var(--accent);
}
.umbrellax-identity-list__item--default .umbrellax-identity-list__avatar {
  background-color: var(--accent);
  color: var(--ux-dark);
}
.umbrellax-identity-list__body {
  flex: 1 1 auto;
  min-width: 0;
}
.umbrellax-identity-list__name {
  font-size: 0.9375rem;
  font-weight: var(--font-weight-semibold);
  color: var(--text);
}
.umbrellax-identity-list__email {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-variant-ligatures: common-ligatures;
}
/* Default badge — "Default" pill for the primary identity. */
.umbrellax-identity-list__default-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  background-color: var(--accent);
  color: var(--ux-dark);
  border-radius: var(--r-full);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-left: auto;
}
/* ────────────────────────────────────────────────────────────────
   2FA onboarding (twofactor_gauthenticator plugin)
   ──────────────────────────────────────────────────────────────── */
/**
 * The plugin renders a QR code + a setup key + a verification input.
 * We wrap it visually without touching the PHP. Selector targets both
 * the plugin's generic classes and an umbrellax-* helper for the
 * settings landing callout card.
 */
.umbrellax-2fa-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  background-color: var(--accent-weak);
  border-radius: var(--r-lg);
  border: 1px solid transparent;
}
.umbrellax-2fa-callout__icon {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-full);
  background-color: var(--accent);
  color: var(--ux-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.umbrellax-2fa-callout__body h3 {
  margin: 0 0 var(--space-1);
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  color: var(--text);
}
.umbrellax-2fa-callout__body p {
  margin: 0 0 var(--space-3);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text);
}
/* QR code card rendered by the plugin — we center it and add a frame. */
.umbrellax-2fa-setup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-8);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  max-width: 28rem;
  margin: 0 auto;
}
[data-theme="light"] .umbrellax-2fa-setup {
  box-shadow: var(--shadow-card-light);
}
.umbrellax-2fa-setup__qr {
  padding: var(--space-4);
  background-color: #FFFFFF;
  /* QR needs light bg regardless of theme */
  border-radius: var(--r-md);
}
.umbrellax-2fa-setup__qr img,
.umbrellax-2fa-setup__qr canvas,
.umbrellax-2fa-setup__qr svg {
  display: block;
  width: 12rem;
  height: 12rem;
}
.umbrellax-2fa-setup__secret {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  color: var(--text);
  background-color: rgba(255, 255, 255, 0.04);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-sm);
  user-select: all;
  word-break: break-all;
  text-align: center;
}
[data-theme="light"] .umbrellax-2fa-setup__secret {
  background-color: #F0F0F0;
}
.umbrellax-2fa-setup__code-input {
  width: 100%;
  max-width: 16rem;
  text-align: center;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.5rem;
  letter-spacing: 0.5em;
  padding: var(--space-3) var(--space-4);
}
/* twofactor_gauthenticator plugin — TOTP prompt layout.
   Plugin emits <input type="checkbox"> followed by its <label> in a
   wrapper (no consistent class). Checkbox and its label were
   stacking on separate lines. Flatten with a flex rule on every
   form-check-style block, then inline the label via adjacent sibling. */
.twofactor_gauthenticator-form,
form[name="twofactor_gauthenticator_form"],
.twofactor_gauthenticator_form {
  /* When label wraps the input, it's naturally inline. When input is
     separate, CSS sibling still keeps them on one row via the above. */
}
.twofactor_gauthenticator-form input[type="checkbox"],
form[name="twofactor_gauthenticator_form"] input[type="checkbox"],
.twofactor_gauthenticator_form input[type="checkbox"] {
  display: inline-block !important;
  vertical-align: middle;
  margin-right: var(--space-2);
  width: auto !important;
  min-height: 0 !important;
}
.twofactor_gauthenticator-form input[type="checkbox"] + label,
form[name="twofactor_gauthenticator_form"] input[type="checkbox"] + label,
.twofactor_gauthenticator_form input[type="checkbox"] + label,
.twofactor_gauthenticator-form label:has(input[type="checkbox"]),
form[name="twofactor_gauthenticator_form"] label:has(input[type="checkbox"]),
.twofactor_gauthenticator_form label:has(input[type="checkbox"]) {
  display: inline-flex !important;
  align-items: center;
  gap: var(--space-2);
  margin: 0 !important;
  color: var(--text) !important;
  font-size: 0.9375rem;
  line-height: 1.4;
  cursor: pointer;
}
.twofactor_gauthenticator-form p:has(input[type="checkbox"]),
form[name="twofactor_gauthenticator_form"] p:has(input[type="checkbox"]),
.twofactor_gauthenticator_form p:has(input[type="checkbox"]) {
  display: flex !important;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 !important;
}
/* Generic fallback: any page with a checkbox + following label should
   inline them (not just the plugin form). Scoped to .formcontent
   and task=login so it doesn't touch mail filters / etc. */
.formcontent input[type="checkbox"] + label,
body.task-login input[type="checkbox"] + label,
.twofactor-gauthenticator input[type="checkbox"] + label {
  display: inline-flex !important;
  align-items: center;
  gap: var(--space-2);
  margin-left: 0 !important;
}
/* twofactor_gauthenticator "remember device" checkbox — plugin JS
   injects:
     <td class="title" colspan="2">
       <input type="checkbox" id="remember_2FA" ...>
       <label for="remember_2FA">...</label>
     </td>
   Elastic's base rules set label {width:100%} and/or display:block,
   which stacks the label under the checkbox. Override with ID-level
   specificity so nothing from elastic can outrank us. */
/* Custom checkbox skin — applied to all checkboxes on login task
   and to the 2FA remember-device checkbox specifically. Square with
   gold fill and dark checkmark when checked. */
body.task-login input[type="checkbox"],
input#remember_2FA,
input[name="_remember_2FA"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  display: inline-block !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  padding: 0 !important;
  margin: 0 0.5rem 0 0 !important;
  background-color: transparent !important;
  border: 2px solid var(--text-muted) !important;
  border-radius: 4px !important;
  cursor: pointer;
  position: relative !important;
  vertical-align: middle !important;
  transition: background-color 0.15s var(--ease-smooth), border-color 0.15s var(--ease-smooth);
}
body.task-login input[type="checkbox"]:hover,
input#remember_2FA:hover,
input[name="_remember_2FA"]:hover {
  border-color: var(--accent) !important;
}
body.task-login input[type="checkbox"]:checked,
input#remember_2FA:checked,
input[name="_remember_2FA"]:checked {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}
body.task-login input[type="checkbox"]:checked::after,
input#remember_2FA:checked::after,
input[name="_remember_2FA"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 4px;
  height: 9px;
  border: solid var(--ux-dark);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
body.task-login input[type="checkbox"]:focus-visible,
input#remember_2FA:focus-visible,
input[name="_remember_2FA"]:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}
/* Light theme checkbox — darker border on white for visibility,
   gold fill on check with white tick (dark tick vanishes on gold
   in light contexts). */
[data-theme="light"] body.task-login input[type="checkbox"],
[data-theme="light"] input#remember_2FA,
[data-theme="light"] input[name="_remember_2FA"] {
  border: 2px solid rgba(0, 0, 0, 0.22) !important;
  background-color: #FFFFFF !important;
}
[data-theme="light"] body.task-login input[type="checkbox"]:hover,
[data-theme="light"] input#remember_2FA:hover,
[data-theme="light"] input[name="_remember_2FA"]:hover {
  border-color: var(--accent) !important;
}
[data-theme="light"] body.task-login input[type="checkbox"]:checked,
[data-theme="light"] input#remember_2FA:checked,
[data-theme="light"] input[name="_remember_2FA"]:checked {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}
[data-theme="light"] body.task-login input[type="checkbox"]:checked::after,
[data-theme="light"] input#remember_2FA:checked::after,
[data-theme="light"] input[name="_remember_2FA"]:checked::after {
  border-color: #FFFFFF !important;
}
input#remember_2FA + label,
input[name="_remember_2FA"] + label,
label[for="remember_2FA"] {
  display: inline !important;
  width: auto !important;
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  color: var(--text) !important;
  font-weight: var(--font-weight-normal) !important;
}
/* The <td.title> wrapper holding both elements — elastic's .propform
   td.title is styled as first-column label cell (narrow width,
   right-aligned). When it contains both the checkbox+label row we
   want, flatten it to a normal block with breathing room. */
td.title:has(> #remember_2FA),
td.title:has(> input[name="_remember_2FA"]) {
  display: block !important;
  width: auto !important;
  text-align: left !important;
  padding: var(--space-4) 0 !important;
  white-space: normal !important;
}
/* ────────────────────────────────────────────────────────────────
   Plugin slots (settings-like list)
   ──────────────────────────────────────────────────────────────── */
/**
 * Enabled / disabled plugin rows. Disabled plugins get the landing's
 * .platform-soon treatment — muted, dashed border.
 */
.umbrellax-plugin-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: var(--space-2);
}
.umbrellax-plugin-row--disabled {
  border-style: dashed;
  opacity: 0.6;
}
.umbrellax-plugin-row__title {
  font-size: 0.9375rem;
  font-weight: var(--font-weight-medium);
  color: var(--text);
}
.umbrellax-plugin-row__desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.umbrellax-plugin-row__status {
  margin-left: auto;
}
/* ────────────────────────────────────────────────────────────────
   Settings buttons bar
   ──────────────────────────────────────────────────────────────── */
.formbuttons,
.umbrellax-form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-6);
  margin-top: var(--space-6);
  border-top: 1px solid var(--border);
}
[data-theme="light"] .formbuttons,
[data-theme="light"] .umbrellax-form-actions {
  border-top-color: rgba(0, 0, 0, 0.06);
}
/**
 * Animations — ported from the landing so the skin feels like the
 * same product. Keyframes, utility classes, and a blanket
 * prefers-reduced-motion reset.
 *
 * Keep timings in sync with landing/index.html:
 *   fadeUp       .9s cubic-bezier(0.16, 1, 0.3, 1)
 *   fadeIn       1s  ease
 *   dropIn       .12s ease-out
 *   countPulse   1.5s ease-in-out infinite
 *   logoPulse    3s ease-in-out infinite
 *   logoSpin     20s linear infinite
 *
 * Reduced-motion override disables everything, matching the landing's
 * blanket @media (prefers-reduced-motion: reduce) clause.
 */
/* ────────────────────────────────────────────────────────────────
   Keyframes
   ──────────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/**
 * dropIn — dropdowns, popovers.
 * Matches landing .lang-dropdown entrance (index.html line 138).
 */
@keyframes dropIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/**
 * countPulse — presence dot, new-mail indicator.
 * Landing uses it on .count-dot (index.html line 272).
 */
@keyframes countPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
/**
 * typingBounce — 3-dot indicator in compose / list loading states.
 */
@keyframes typingBounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-4px);
  }
}
/**
 * logoPulse / logoPulseDark — glow around the umbrella mark in the
 * header. Dark variant has a stronger shadow radius for visibility
 * against the dark surface.
 */
@keyframes logoPulse {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(255, 102, 99, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 6px rgba(255, 102, 99, 0.5));
  }
}
@keyframes logoPulseDark {
  0%,
  100% {
    filter: drop-shadow(0 0 2px rgba(255, 102, 99, 0.3));
    opacity: 0.85;
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(255, 102, 99, 0.8));
    opacity: 1;
  }
}
@keyframes logoSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/**
 * circleGlow — subtle expanding ring around interactive circular
 * elements (avatar on hover, voice-circle placeholder).
 */
@keyframes circleGlow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(201, 148, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(201, 148, 0, 0);
  }
}
/* Used by the toast-area loading indicator — our replacement for
   Roundcube's "Loading..." / "Загрузка..." text toast. */
@keyframes umbrellax-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Animated ellipsis — cycles "." → ".." → "..." → "..." on the
   submit button during form POST. steps(1, end) makes each frame
   a discrete step with no interpolation. */
@keyframes umbrellax-dots {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
  100% {
    content: "...";
  }
}
/* ────────────────────────────────────────────────────────────────
   Utility animation classes
   ──────────────────────────────────────────────────────────────── */
/**
 * Entrance animations for hero / content blocks.
 * Usage: <div class="umbrellax-animate-fade-up delay-2">...</div>
 */
.umbrellax-animate-fade-up {
  animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.umbrellax-animate-fade-in {
  animation: fadeIn 1s ease both;
}
/* Stagger delays — six slots, matches landing's delay-1..delay-6. */
.delay-1 {
  animation-delay: 0.1s;
}
.delay-2 {
  animation-delay: 0.25s;
}
.delay-3 {
  animation-delay: 0.4s;
}
.delay-4 {
  animation-delay: 0.55s;
}
.delay-5 {
  animation-delay: 0.7s;
}
.delay-6 {
  animation-delay: 0.85s;
}
/* Logo animation — applied to .umbrellax-logo-mark (header logo). */
.umbrellax-logo-mark {
  animation: logoPulse 3s ease-in-out infinite, logoSpin 20s linear infinite;
  transition: rotate 0.3s ease;
}
:root .umbrellax-logo-mark,
[data-theme="dark"] .umbrellax-logo-mark {
  animation: logoPulseDark 3s ease-in-out infinite, logoSpin 20s linear infinite;
}
[data-theme="light"] .umbrellax-logo-mark {
  animation: logoPulse 3s ease-in-out infinite, logoSpin 20s linear infinite;
}
/* Hero hover tilt — landing technique (PAGESPEED.md Phase 17).
   rotate is a separate CSS property in modern engines; combined with
   a transition, it composes cleanly over the spin animation without
   breaking the transform stack. */
.umbrellax-header__logo:hover .umbrellax-logo-mark {
  rotate: 15deg;
}
/* Presence / counter dot pulse. */
.umbrellax-counter__dot {
  animation: countPulse 1.5s ease-in-out infinite;
}
/* Typing indicator dots. */
.umbrellax-typing-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: var(--r-full);
  background-color: var(--text-muted);
  animation: typingBounce 1.4s ease-in-out infinite;
}
.umbrellax-typing-dot:nth-child(2) {
  animation-delay: 0.15s;
}
.umbrellax-typing-dot:nth-child(3) {
  animation-delay: 0.3s;
}
/* ────────────────────────────────────────────────────────────────
   Reduced motion
   ──────────────────────────────────────────────────────────────── */
/**
 * Blanket override — if the user asks for reduced motion, we give it.
 * Matches landing lines 267–274.
 *
 * We zero out transforms and rotates explicitly because some animations
 * leave the element at a non-identity position when the last keyframe
 * sets transform/rotate. Without the resets, disabling animation
 * mid-cycle could leave the logo tilted at 15deg or the hero off-screen.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .umbrellax-animate-fade-up,
  .umbrellax-animate-fade-in,
  .umbrellax-logo-mark,
  .umbrellax-counter__dot,
  .umbrellax-typing-dot {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    rotate: 0 !important;
    filter: none !important;
  }
  /* Kill the logo hover tilt. */
  .umbrellax-header__logo:hover .umbrellax-logo-mark {
    rotate: 0 !important;
  }
  /* Entrance animations should not leave elements hidden. */
  .umbrellax-hero,
  .umbrellax-hero__inner {
    opacity: 1 !important;
    transform: none !important;
  }
}
/**
 * Dark theme — default; applies when [data-theme] is unset or "dark".
 *
 * Tokens in _tokens.less already wire dark semantics on :root, and
 * component files include dark rules as the default branch. This file
 * hosts global / cross-component dark tweaks (scrollbars, selection,
 * blockquotes in mail) that would clutter individual components.
 *
 * WCAG contrasts on dark:
 *   --text-dark        #E0E0D1 on #181A20   ~13.8:1   AAA
 *   --text-dark        #E0E0D1 on #20222B   ~11.8:1   AAA
 *   --text-muted-dark  #8E96BC on #181A20   ~6.4:1    AAA body
 *   --text-muted-dark  #8E96BC on #20222B   ~5.5:1    AAA body
 *   --accent           #C99400 on #181A20   ~7.5:1    AAA body
 *   --brand            #FF6663 on #181A20   ~5.2:1    AA+  body
 *
 * Dark accent needs more saturation than light — gold-600 (#C99400) is
 * readable on both. No separate dark-gold token needed.
 */
:root {
  /* Native form controls pick up the scheme. */
  color-scheme: dark;
}
/* Scrollbar on dark — dim on idle, slightly brighter on hover. */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  border: 2px solid var(--ux-dark);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18);
}
/* Firefox scrollbar. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}
[data-theme="light"] * {
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
/* Images in mail — soften against dark background. */
.messagecontent img,
.umbrellax-mail-preview__body img {
  border-radius: var(--r-sm);
}
/* Code blocks. */
pre,
code {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--text);
}
/* Blockquotes — quoted mail. Gold accent bar. */
blockquote {
  border-left: 3px solid var(--accent);
  background: rgba(201, 148, 0, 0.06);
  color: var(--text);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
/* Keyboard input — dark chip. */
kbd {
  background: var(--ux-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom-width: 2px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  color: var(--text);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
}
/**
 * Light theme — overrides applied when [data-theme="light"] is set
 * on the root.
 *
 * Component files already include [data-theme="light"] rules where
 * the light variant is tightly coupled to component structure (e.g.
 * card shadow vs dark card flat). This file hosts global / cross-
 * component light tweaks that didn't fit in a specific component.
 *
 * WCAG contrasts verified for text on --bg and --surface:
 *   --text-light        #2D2D2D on #F4F6FA   ~12.3:1   AAA
 *   --text-light        #2D2D2D on #FFFFFF   ~13.4:1   AAA
 *   --text-muted-light  #6B7280 on #FFFFFF   ~4.83:1   AA (body)
 *   --accent            #C99400 on #FFFFFF   ~3.1:1    AA large / UI
 *   --brand             #FF6663 on #FFFFFF   ~3.0:1    AA large / UI
 *
 * Muted text in light was tightened from the landing's
 * rgba(121,121,121,0.8) (~4.2:1) to #6B7280 (~4.83:1). Webmail has
 * more metadata-dense views than the landing — legibility matters.
 */
[data-theme="light"] {
  /* Native form controls pick up the scheme. */
  color-scheme: light;
  /* Scrollbar — subtle grey on light. */
  /* Tables (mail headers, attachments grids). */
  /* Images in message body get a hairline border to separate from paper bg. */
  /* Code blocks in received mail. */
  /* Blockquotes — quoted mail. */
  /* Keyboard input — Ctrl+K style shortcut hints. */
}
[data-theme="light"] body,
[data-theme="light"] html {
  background-color: var(--bg);
  color: var(--text);
}
[data-theme="light"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
[data-theme="light"] ::-webkit-scrollbar-track {
  background: transparent;
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  border: 2px solid #F4F6FA;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.32);
}
[data-theme="light"] table {
  border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .messagecontent img,
[data-theme="light"] .umbrellax-mail-preview__body img {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--r-sm);
}
[data-theme="light"] pre,
[data-theme="light"] code {
  background-color: #F4F6FA;
  color: #2D2D2D;
}
[data-theme="light"] blockquote {
  border-left: 3px solid var(--accent);
  background: rgba(201, 148, 0, 0.05);
  color: #4B5563;
  padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
[data-theme="light"] kbd {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom-width: 2px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  color: #2D2D2D;
}