/* ============================================================================
   СЗЦ РЭС · Корпоративная тема для веб-почты
   Фирменный стиль resspb.ru: графит + оранжевый #ea5621, Montserrat.
   Подключается ПОСЛЕ style.css и переопределяет визуальный слой.
   ========================================================================== */

/* ---------- Брендовые токены ---------- */
:root {
  --szc-ink: #141619;
  --szc-ink-soft: #1b1b1b;
  --szc-surface: #232527;
  --szc-canvas-light: #f4f5f7;
  --szc-surface-light: #ffffff;
  --szc-soft-light: #f8f8f9;
  --szc-border-light: #e0e1e3;
  --szc-border-dark: #2c2e31;
  --szc-accent: #ea5621;
  --szc-accent-strong: #d64a15;
  --szc-accent-soft: #ff7a3d;
  --szc-accent-faint: rgba(234, 86, 33, 0.10);
  --szc-maroon: #90463e;
  --szc-text: #3d3f43;
  --szc-muted: #6c6d74;
  --szc-line: #e5e5e7;
  --szc-radius: 6px;
  --szc-radius-lg: 12px;
  --szc-font: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---------- Montserrat (self-hosted, из фирменного дистрибутива resspb.ru) ---------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/static/fonts/montserrat-300-montserrat-88e65f67.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/static/fonts/montserrat-300-montserrat-0f73558f.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/static/fonts/montserrat-300-montserrat-e8baea2c.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/static/fonts/montserrat-300-montserrat-352c33a9.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/static/fonts/montserrat-300-montserrat-0dc98610.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/montserrat-400-montserrat-67146b73.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/montserrat-400-montserrat-e081619b.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/montserrat-400-montserrat-0748de38.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/montserrat-400-montserrat-dade07bd.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/montserrat-400-montserrat-ab105b20.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/montserrat-500-montserrat-afa71617.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/montserrat-500-montserrat-28321cff.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/montserrat-500-montserrat-cffba35c.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/montserrat-500-montserrat-126d7ad9.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/montserrat-500-montserrat-552d3dce.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/montserrat-600-montserrat-f05a0e21.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/montserrat-600-montserrat-77cf04c9.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/montserrat-600-montserrat-9006bb6a.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/montserrat-600-montserrat-4d9062ef.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/montserrat-600-montserrat-a77dae9d.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---------- Базовые переопределения ---------- */
/* Состояние до инициализации JS-темы: сразу графит, без синевы */
:root {
  --bg: var(--szc-ink);
  --bg-sidebar: #17181a;
  --bg-content: var(--szc-ink-soft);
  --bg-elevated: #232527;
  --bg-soft: #1e1f21;
  --bg-hover: #2a2c2f;
  --accent: var(--szc-accent);
  --accent-hover: var(--szc-accent-soft);
  --text: #ececee;
  --text-dim: #9a9ca1;
  --text-strong: #ffffff;
  --text2: #828489;
  --border: var(--szc-border-dark);
  --danger: #ff6b6b;
  --success: #4fd08a;
  --unread-bg: rgba(234, 86, 33, 0.10);
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
  --accent-2: var(--szc-accent-soft);
  --surface-glow: radial-gradient(circle at top left, rgba(234, 86, 33, 0.14), transparent 26%);
  --surface-gradient: linear-gradient(180deg, #141619 0%, #18191b 45%, #141619 100%);
  --login-gradient: linear-gradient(135deg, #141619 0%, #1b1b1d 55%, #18191b 100%);
  --yd-ink: #f0f1f3;
  --yd-cobalt: var(--szc-accent-soft);
  --yd-cobalt-strong: var(--szc-accent);
  --yd-signal: var(--szc-accent);
  --yd-cyan: var(--szc-accent-soft);
  --yd-canvas: var(--szc-ink);
  --yd-blueprint: #232527;
  --yd-border: var(--szc-border-dark);
  --yd-muted: #9a9ca1;
  --yd-white: #ffffff;
  --yd-display: "Montserrat", Arial, sans-serif;
  --yd-body: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --workspace-canvas: var(--szc-ink);
  --workspace-surface: var(--szc-ink-soft);
  --workspace-surface-soft: #1e1f21;
  --workspace-text: #ececee;
  --workspace-muted: #9a9ca1;
  --workspace-border: var(--szc-border-dark);
  --workspace-accent: var(--szc-accent-soft);
  --workspace-accent-hover: var(--szc-accent);
  --workspace-focus: 0 0 0 3px rgba(234, 86, 33, 0.25);
}

body,
button,
input,
select,
textarea {
  font-family: var(--szc-font);
}

::selection {
  background: rgba(234, 86, 33, 0.22);
}

* {
  scrollbar-width: thin;
  scrollbar-color: #c9cacd transparent;
}

body[data-theme="dark"] * {
  scrollbar-color: #3a3c40 transparent;
}

:focus-visible {
  outline: 2px solid var(--szc-accent);
  outline-offset: 1px;
}

/* ---------- Тема: переменные приложения ---------- */
body[data-theme="light"] {
  --bg: var(--szc-canvas-light);
  --bg-sidebar: #f0f1f3;
  --bg-content: var(--szc-surface-light);
  --bg-elevated: #f3f3f4;
  --bg-soft: #f7f7f8;
  --bg-hover: #ececee;
  --accent: var(--szc-accent);
  --accent-hover: var(--szc-accent-strong);
  --text: var(--szc-text);
  --text-dim: var(--szc-muted);
  --text-strong: var(--szc-ink);
  --text2: #85878c;
  --border: var(--szc-border-light);
  --danger: #c52e3e;
  --success: #1c8a5a;
  --unread-bg: rgba(234, 86, 33, 0.06);
  --shadow: 0 14px 40px rgba(20, 22, 25, 0.10);
  --accent-2: var(--szc-accent-strong);
  --surface-glow: radial-gradient(circle at top left, rgba(234, 86, 33, 0.08), transparent 24%);
  --surface-gradient: linear-gradient(180deg, #f6f6f7 0%, #f0f1f3 45%, #f6f6f7 100%);
  --login-gradient: linear-gradient(135deg, #ececee 0%, #f4f4f5 55%, #f8f8f9 100%);

  /* канонический слой style.css */
  --yd-ink: #141619;
  --yd-cobalt: var(--szc-accent);
  --yd-cobalt-strong: var(--szc-accent-strong);
  --yd-signal: var(--szc-accent);
  --yd-cyan: var(--szc-accent-soft);
  --yd-canvas: var(--szc-canvas-light);
  --yd-blueprint: #f3f3f4;
  --yd-border: var(--szc-border-light);
  --yd-muted: var(--szc-muted);
  --yd-white: #ffffff;
  --yd-display: "Montserrat", Arial, sans-serif;
  --yd-body: "Montserrat", "Segoe UI", system-ui, sans-serif;

  /* workspace.css */
  --workspace-canvas: var(--szc-canvas-light);
  --workspace-surface: #ffffff;
  --workspace-surface-soft: #f7f7f8;
  --workspace-text: var(--szc-ink);
  --workspace-muted: var(--szc-muted);
  --workspace-border: var(--szc-border-light);
  --workspace-accent: var(--szc-accent);
  --workspace-accent-hover: var(--szc-accent-strong);
  --workspace-focus: 0 0 0 3px rgba(234, 86, 33, 0.22);
}

body[data-theme="dark"] {
  --bg: var(--szc-ink);
  --bg-sidebar: #17181a;
  --bg-content: var(--szc-ink-soft);
  --bg-elevated: #232527;
  --bg-soft: #1e1f21;
  --bg-hover: #2a2c2f;
  --accent: var(--szc-accent);
  --accent-hover: var(--szc-accent-soft);
  --text: #ececee;
  --text-dim: #9a9ca1;
  --text-strong: #ffffff;
  --text2: #828489;
  --border: var(--szc-border-dark);
  --danger: #ff6b6b;
  --success: #4fd08a;
  --unread-bg: rgba(234, 86, 33, 0.10);
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
  --accent-2: var(--szc-accent-soft);
  --surface-glow: radial-gradient(circle at top left, rgba(234, 86, 33, 0.14), transparent 26%);
  --surface-gradient: linear-gradient(180deg, #141619 0%, #18191b 45%, #141619 100%);
  --login-gradient: linear-gradient(135deg, #141619 0%, #1b1b1d 55%, #18191b 100%);

  --yd-ink: #f0f1f3;
  --yd-cobalt: var(--szc-accent-soft);
  --yd-cobalt-strong: var(--szc-accent);
  --yd-signal: var(--szc-accent);
  --yd-cyan: var(--szc-accent-soft);
  --yd-canvas: var(--szc-ink);
  --yd-blueprint: #232527;
  --yd-border: var(--szc-border-dark);
  --yd-muted: #9a9ca1;
  --yd-white: #ffffff;
  --yd-display: "Montserrat", Arial, sans-serif;
  --yd-body: "Montserrat", "Segoe UI", system-ui, sans-serif;

  --workspace-canvas: var(--szc-ink);
  --workspace-surface: var(--szc-ink-soft);
  --workspace-surface-soft: #1e1f21;
  --workspace-text: #ececee;
  --workspace-muted: #9a9ca1;
  --workspace-border: var(--szc-border-dark);
  --workspace-accent: var(--szc-accent-soft);
  --workspace-accent-hover: var(--szc-accent);
  --workspace-focus: 0 0 0 3px rgba(234, 86, 33, 0.25);
}

/* ============================================================================
   ЛОГИН
   ========================================================================== */
.login-screen {
  background:
    linear-gradient(rgba(20, 22, 25, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 22, 25, 0.045) 1px, transparent 1px),
    var(--szc-canvas-light);
  background-size: 32px 32px;
}

body[data-theme="dark"] .login-screen {
  color-scheme: dark;
  background:
    linear-gradient(rgba(234, 86, 33, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234, 86, 33, 0.06) 1px, transparent 1px),
    var(--szc-ink);
  background-size: 32px 32px;
}

/* Шапка логина: логотип СЗЦ РЭС + подпись */
.mail-services-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: 0 28px;
  background: rgba(244, 245, 247, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--szc-border-light);
}

body[data-theme="dark"] .mail-services-header {
  background: rgba(20, 22, 25, 0.86);
  border-bottom-color: var(--szc-border-dark);
}

.mail-services-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.brand-logo {
  display: block;
  height: 34px;
  width: auto;
}

.brand-logo-light { display: none; }
body[data-theme="light"] .brand-logo-light { display: block; }
body[data-theme="light"] .brand-logo-dark { display: none; }

.brand-mail-label {
  font-family: var(--szc-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--szc-muted);
  padding-left: 14px;
  border-left: 1px solid var(--szc-border-light);
}

body[data-theme="dark"] .brand-mail-label {
  color: #b5b7bb;
  border-left-color: var(--szc-border-dark);
}

/* Панель логина */
.login-hero,
.login-card {
  border-radius: 16px;
  border: 1px solid var(--szc-border-light);
}

body[data-theme="dark"] .login-hero,
body[data-theme="dark"] .login-card {
  border-color: var(--szc-border-dark);
}

.login-hero {
  background:
    radial-gradient(circle at 82% 12%, rgba(234, 86, 33, 0.30), transparent 34%),
    linear-gradient(160deg, #1b1b1d 0%, #141619 55%, #1e1f21 100%);
  border: 0;
  box-shadow: 0 28px 80px rgba(20, 22, 25, 0.35);
}

.login-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
}

.login-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--szc-accent), var(--szc-maroon));
}

.login-hero-slide {
  position: relative;
  z-index: 1;
  opacity: 0.85;
  mix-blend-mode: luminosity;
  border-radius: 10px;
}

.login-card {
  background: var(--szc-surface-light);
  box-shadow: 0 24px 70px rgba(20, 22, 25, 0.14);
}

body[data-theme="dark"] .login-card {
  background: var(--szc-ink-soft);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
}

.login-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--szc-accent), var(--szc-maroon));
}

.login-brand-art {
  border-radius: 10px;
}

.login-intro h2 {
  font-family: var(--szc-font);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--szc-ink);
}

body[data-theme="dark"] .login-intro h2 {
  color: #f0f1f3;
}

.login-sub {
  color: var(--szc-muted);
}

.login-kicker,
.login-hero-kicker {
  color: var(--szc-accent);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.login-form label,
.login-credentials label {
  color: var(--szc-text);
  font-weight: 600;
}

body[data-theme="dark"] .login-form label,
body[data-theme="dark"] .login-credentials label {
  color: #d6d7da;
}

.login-form input {
  border: 1px solid #d4d5d8;
  border-radius: var(--szc-radius);
  background: #ffffff;
  color: var(--szc-ink);
  font-family: var(--szc-font);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.login-form input:focus {
  border-color: var(--szc-accent);
  box-shadow: 0 0 0 3px rgba(234, 86, 33, 0.16);
  outline: none;
}

body[data-theme="dark"] .login-form input {
  border-color: var(--szc-border-dark);
  background: #1e1f21;
  color: #f0f1f3;
}

body[data-theme="dark"] .login-form input:focus {
  border-color: var(--szc-accent);
  box-shadow: 0 0 0 3px rgba(234, 86, 33, 0.20);
}

.login-check {
  color: var(--szc-muted);
  font-weight: 500;
}

.login-form .login-submit {
  min-height: 52px;
  border: 1px solid var(--szc-accent);
  border-radius: var(--szc-radius);
  background: linear-gradient(90deg, #f05a22, #e04c13);
  color: #ffffff;
  font-family: var(--szc-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 24px rgba(234, 86, 33, 0.28);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.login-form .login-submit:hover {
  border-color: var(--szc-accent-strong);
  background: linear-gradient(90deg, #e04c13, #cf4310);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(234, 86, 33, 0.34);
}

.login-footer {
  color: var(--szc-muted);
}

.login-footer svg {
  fill: var(--szc-accent);
}

/* ============================================================================
   ОСНОВНОЕ ПРИЛОЖЕНИЕ
   ========================================================================== */

/* ---------- Топбар ---------- */
.topbar {
  background: var(--szc-surface-light);
  border-bottom: 1px solid var(--szc-border-light);
}

body[data-theme="dark"] .topbar {
  background: var(--szc-ink-soft);
  border-bottom-color: var(--szc-border-dark);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.app-brand-mark {
  height: 30px;
  width: auto;
}

.app-brand-caption {
  font-family: var(--szc-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--szc-text);
}

body[data-theme="dark"] .app-brand-caption {
  color: #d6d7da;
}

.topbar-label {
  color: var(--szc-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.topbar-folder-name {
  font-family: var(--szc-font);
  font-weight: 700;
  color: var(--szc-ink);
}

body[data-theme="dark"] .topbar-folder-name {
  color: #f0f1f3;
}

.btn-compose {
  border-radius: var(--szc-radius);
  background: linear-gradient(90deg, #f05a22, #e04c13) !important;
  border-color: var(--szc-accent) !important;
  box-shadow: 0 6px 16px rgba(234, 86, 33, 0.25);
  font-weight: 700;
}

.btn-compose:hover {
  background: linear-gradient(90deg, #e04c13, #cf4310) !important;
}

.user-profile-avatar {
  background: linear-gradient(135deg, var(--szc-accent), var(--szc-maroon));
  color: #ffffff;
  font-weight: 700;
}

.user-email {
  color: var(--szc-text);
}

body[data-theme="dark"] .user-email {
  color: #d6d7da;
}

.text-action {
  color: var(--szc-muted);
}

/* ---------- Сайдбар ---------- */
.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--szc-border-light);
}

body[data-theme="dark"] .sidebar {
  border-right-color: var(--szc-border-dark);
}

.section-title {
  color: var(--szc-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.mailbox-switch,
.folder-item {
  border-radius: var(--szc-radius);
  color: var(--szc-text);
  font-family: var(--szc-font);
}

body[data-theme="dark"] .mailbox-switch,
body[data-theme="dark"] .folder-item {
  color: #d0d1d4;
}

.mailbox-switch:hover,
.folder-item:hover {
  background: var(--bg-hover);
}

.mailbox-switch.active,
.folder-item.active {
  background: #ffffff;
  color: var(--szc-ink);
  box-shadow: inset 3px 0 0 var(--szc-accent);
  font-weight: 600;
}

body[data-theme="dark"] .mailbox-switch.active,
body[data-theme="dark"] .folder-item.active {
  background: #232527;
  color: #ffffff;
}

.workspace-nav-item {
  border-radius: var(--szc-radius);
  font-family: var(--szc-font);
  font-weight: 500;
}

.workspace-nav-item[aria-current="page"],
.workspace-nav-item.active {
  background: #ffffff !important;
  color: var(--szc-ink) !important;
  border-color: var(--szc-border-light) !important;
  box-shadow: inset 3px 0 0 var(--szc-accent);
  font-weight: 700;
}

body[data-theme="dark"] .workspace-nav-item[aria-current="page"],
body[data-theme="dark"] .workspace-nav-item.active {
  background: #232527 !important;
  color: #ffffff !important;
  border-color: var(--szc-border-dark) !important;
}

.unread-badge {
  background: var(--szc-accent);
  color: #fff;
  font-weight: 700;
}

/* ---------- Кнопки ---------- */
.btn {
  border-radius: var(--szc-radius);
  font-family: var(--szc-font);
  font-weight: 600;
}

.btn-primary {
  background: linear-gradient(90deg, #f05a22, #e04c13);
  border: 1px solid var(--szc-accent);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(234, 86, 33, 0.22);
}

.btn-primary:hover {
  background: linear-gradient(90deg, #e04c13, #cf4310);
  border-color: var(--szc-accent-strong);
  color: #ffffff;
}

body[data-theme="dark"] .btn-primary {
  background: linear-gradient(90deg, #f05a22, #e04c13);
  border-color: var(--szc-accent);
  color: #fff;
}

.btn-secondary {
  background: var(--szc-surface-light);
  border: 1px solid #d4d5d8;
  color: var(--szc-text);
}

.btn-secondary:hover {
  background: var(--szc-soft-light);
  border-color: #bfc0c4;
}

body[data-theme="dark"] .btn-secondary {
  background: #232527;
  border-color: #3a3c40;
  color: #ececee;
}

body[data-theme="dark"] .btn-secondary:hover {
  background: #2a2c2f;
}

.mini-btn {
  border-radius: var(--szc-radius);
  border: 1px solid #d4d5d8;
  background: transparent;
  color: var(--szc-text);
  font-family: var(--szc-font);
  font-weight: 500;
}

.mini-btn:hover {
  background: var(--szc-soft-light);
  border-color: #bfc0c4;
}

body[data-theme="dark"] .mini-btn {
  border-color: #3a3c40;
  color: #d6d7da;
}

body[data-theme="dark"] .mini-btn:hover {
  background: #2a2c2f;
}

.icon-btn:hover {
  background: var(--bg-hover);
}

.filter-chip {
  border-radius: 999px;
  border: 1px solid #d4d5d8;
  background: transparent;
  color: var(--szc-muted);
  font-family: var(--szc-font);
  font-weight: 500;
}

.filter-chip:hover {
  border-color: var(--szc-accent);
  color: var(--szc-accent);
}

.filter-chip.active {
  background: var(--szc-accent);
  border-color: var(--szc-accent);
  color: #ffffff;
}

body[data-theme="dark"] .filter-chip {
  border-color: #3a3c40;
  color: #9a9ca1;
}

body[data-theme="dark"] .filter-chip:hover {
  border-color: var(--szc-accent-soft);
  color: var(--szc-accent-soft);
}

body[data-theme="dark"] .filter-chip.active {
  background: var(--szc-accent);
  border-color: var(--szc-accent);
  color: #fff;
}

.mini-select {
  border-radius: var(--szc-radius);
  border: 1px solid #d4d5d8;
  background: var(--szc-surface-light);
  color: var(--szc-text);
  font-family: var(--szc-font);
}

body[data-theme="dark"] .mini-select {
  background: #232527;
  border-color: #3a3c40;
  color: #ececee;
}

/* ---------- Инпуты ---------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="datetime-local"],
input[type="date"],
input[type="number"],
select,
textarea {
  border: 1px solid #d4d5d8;
  border-radius: var(--szc-radius);
  background: var(--szc-surface-light);
  color: var(--szc-ink);
  font-family: var(--szc-font);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--szc-accent);
  box-shadow: 0 0 0 3px rgba(234, 86, 33, 0.14);
  outline: none;
}

body[data-theme="dark"] input[type="text"],
body[data-theme="dark"] input[type="email"],
body[data-theme="dark"] input[type="password"],
body[data-theme="dark"] input[type="search"],
body[data-theme="dark"] input[type="datetime-local"],
body[data-theme="dark"] input[type="date"],
body[data-theme="dark"] input[type="number"],
body[data-theme="dark"] select,
body[data-theme="dark"] textarea {
  background: #1e1f21;
  border-color: var(--szc-border-dark);
  color: #f0f1f3;
}

body[data-theme="dark"] input:focus,
body[data-theme="dark"] select:focus,
body[data-theme="dark"] textarea:focus {
  border-color: var(--szc-accent);
  box-shadow: 0 0 0 3px rgba(234, 86, 33, 0.18);
}

/* ---------- Панели почты ---------- */
.pane-header {
  border-bottom: 1px solid var(--szc-border-light);
  background: var(--szc-surface-light);
}

body[data-theme="dark"] .pane-header {
  border-bottom-color: var(--szc-border-dark);
  background: var(--szc-ink-soft);
}

.pane-kicker {
  color: var(--szc-accent);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.pane-heading h2 {
  font-family: var(--szc-font);
  font-weight: 700;
  color: var(--szc-ink);
}

body[data-theme="dark"] .pane-heading h2 {
  color: #f0f1f3;
}

.pane-splitter {
  background: var(--szc-border-light);
}

body[data-theme="dark"] .pane-splitter {
  background: var(--szc-border-dark);
}

.message-list-pane {
  background: var(--szc-surface-light);
}

body[data-theme="dark"] .message-list-pane {
  background: var(--szc-ink-soft);
}

/* Строка письма */
.message-item {
  border-bottom: 1px solid var(--szc-border-light);
  border-radius: 0;
  font-family: var(--szc-font);
}

body[data-theme="dark"] .message-item {
  border-bottom-color: var(--szc-border-dark);
}

.message-item:hover {
  background: var(--szc-soft-light);
}

body[data-theme="dark"] .message-item:hover {
  background: #1e1f21;
}

.message-item.unread {
  background: var(--unread-bg);
  box-shadow: inset 3px 0 0 var(--szc-accent);
}

.message-item.unread:hover {
  background: rgba(234, 86, 33, 0.10);
}

.message-item .message-sender,
.message-item .message-subject {
  color: var(--szc-ink);
}

body[data-theme="dark"] .message-item .message-sender,
body[data-theme="dark"] .message-item .message-subject {
  color: #ececee;
}

.message-item.unread .message-sender,
.message-item.unread .message-subject {
  font-weight: 700;
}

.muted {
  color: var(--szc-muted);
}

/* ---------- Панель чтения ---------- */
.message-pane {
  background: var(--szc-surface-light);
}

body[data-theme="dark"] .message-pane {
  background: var(--szc-ink-soft);
}

.reader-empty-state {
  color: var(--szc-muted);
}

.reader-empty-kicker {
  color: var(--szc-accent);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ---------- Модалки ---------- */
.modal-backdrop {
  background: rgba(20, 22, 25, 0.55);
  backdrop-filter: blur(3px);
}

.modal-card {
  border-radius: var(--szc-radius-lg);
  border: 1px solid var(--szc-border-light);
  background: var(--szc-surface-light);
  box-shadow: 0 30px 90px rgba(20, 22, 25, 0.28);
}

body[data-theme="dark"] .modal-card {
  background: var(--szc-ink-soft);
  border-color: var(--szc-border-dark);
}

.modal-header {
  border-bottom: 1px solid var(--szc-border-light);
}

body[data-theme="dark"] .modal-header {
  border-bottom-color: var(--szc-border-dark);
}

.modal-header h3 {
  font-family: var(--szc-font);
  font-weight: 700;
  color: var(--szc-ink);
}

body[data-theme="dark"] .modal-header h3 {
  color: #f0f1f3;
}

.modal-footer {
  border-top: 1px solid var(--szc-border-light);
}

body[data-theme="dark"] .modal-footer {
  border-top-color: var(--szc-border-dark);
}

/* ---------- Композер ---------- */
.compose-card {
  border-radius: var(--szc-radius-lg);
}

.compose-format-toolbar .mini-btn {
  border: 0;
  background: transparent;
}

.compose-format-toolbar .mini-btn:hover {
  background: var(--szc-soft-light);
}

body[data-theme="dark"] .compose-format-toolbar .mini-btn:hover {
  background: #2a2c2f;
}

.compose-rich-editor {
  border: 1px solid #d4d5d8;
  border-radius: var(--szc-radius);
  background: var(--szc-surface-light);
  color: var(--szc-ink);
  font-family: var(--szc-font);
}

.compose-rich-editor:focus {
  border-color: var(--szc-accent);
  box-shadow: 0 0 0 3px rgba(234, 86, 33, 0.14);
  outline: none;
}

body[data-theme="dark"] .compose-rich-editor {
  background: #1e1f21;
  border-color: var(--szc-border-dark);
  color: #ececee;
}

.compose-brand-logo {
  color: var(--szc-muted);
  font-family: var(--szc-font);
}

.compose-brand-logo strong {
  color: var(--szc-accent);
  letter-spacing: 0.1em;
}

/* ---------- Настройки ---------- */
.settings-tabs {
  border-bottom: 1px solid var(--szc-border-light);
}

body[data-theme="dark"] .settings-tabs {
  border-bottom-color: var(--szc-border-dark);
}

.settings-tab {
  border-radius: var(--szc-radius) var(--szc-radius) 0 0;
  color: var(--szc-muted);
  font-family: var(--szc-font);
  font-weight: 600;
}

.settings-tab:hover {
  color: var(--szc-accent);
}

.settings-tab.active {
  color: var(--szc-accent);
  border-bottom: 2px solid var(--szc-accent);
  font-weight: 700;
}

body[data-theme="dark"] .settings-tab.active {
  color: var(--szc-accent-soft);
  border-bottom-color: var(--szc-accent);
}

.settings-toggle-row {
  border: 1px solid var(--szc-border-light);
  border-radius: var(--szc-radius);
  background: var(--szc-soft-light);
}

body[data-theme="dark"] .settings-toggle-row {
  border-color: var(--szc-border-dark);
  background: #1e1f21;
}

.appearance-option,
.theme-option {
  border: 1px solid #d4d5d8;
  border-radius: var(--szc-radius);
  background: var(--szc-surface-light);
  color: var(--szc-text);
  font-family: var(--szc-font);
}

.appearance-option.active,
.theme-option.active {
  border-color: var(--szc-accent);
  box-shadow: 0 0 0 2px rgba(234, 86, 33, 0.18);
  color: var(--szc-accent);
}

body[data-theme="dark"] .appearance-option,
body[data-theme="dark"] .theme-option {
  background: #232527;
  border-color: #3a3c40;
  color: #d6d7da;
}

/* ---------- Календарь ---------- */
.cal-day {
  border: 1px solid var(--szc-border-light);
  border-radius: var(--szc-radius);
  background: var(--szc-surface-light);
  color: var(--szc-text);
}

body[data-theme="dark"] .cal-day {
  border-color: var(--szc-border-dark);
  background: var(--szc-ink-soft);
  color: #d6d7da;
}

.cal-day:hover {
  border-color: var(--szc-accent);
}

.cal-day.today .cal-day-num {
  background: var(--szc-accent);
  color: #ffffff;
  font-weight: 700;
  border-radius: 50%;
}

.cal-day.selected {
  border-color: var(--szc-accent);
  box-shadow: 0 0 0 2px rgba(234, 86, 33, 0.18);
}

.cal-day-event {
  background: var(--szc-accent-faint);
  color: var(--szc-accent-strong);
  border-radius: 4px;
}

body[data-theme="dark"] .cal-day-event {
  color: var(--szc-accent-soft);
}

.cal-up-title {
  color: var(--szc-ink);
  font-weight: 600;
}

body[data-theme="dark"] .cal-up-title {
  color: #ececee;
}

.cal-up-time,
.cal-up-date {
  color: var(--szc-muted);
}

.calendar-sidebar {
  border-right: 1px solid var(--szc-border-light);
}

body[data-theme="dark"] .calendar-sidebar {
  border-right-color: var(--szc-border-dark);
}

/* ---------- Контакты ---------- */
.directory-sidebar {
  border-right: 1px solid var(--szc-border-light);
}

body[data-theme="dark"] .directory-sidebar {
  border-right-color: var(--szc-border-dark);
}

.dir-card {
  border: 1px solid var(--szc-border-light);
  border-radius: var(--szc-radius);
  background: var(--szc-surface-light);
}

body[data-theme="dark"] .dir-card {
  border-color: var(--szc-border-dark);
  background: var(--szc-ink-soft);
}

.dir-card:hover {
  border-color: var(--szc-accent);
  box-shadow: 0 6px 18px rgba(20, 22, 25, 0.08);
}

.dir-name {
  color: var(--szc-ink);
  font-weight: 600;
}

body[data-theme="dark"] .dir-name {
  color: #ececee;
}

.dir-avatar {
  background: linear-gradient(135deg, var(--szc-accent), var(--szc-maroon));
  color: #ffffff;
  font-weight: 700;
}

.dir-details {
  border-left: 1px solid var(--szc-border-light);
}

body[data-theme="dark"] .dir-details {
  border-left-color: var(--szc-border-dark);
}

/* ---------- Фокус ---------- */
.focus-section {
  border: 1px solid var(--szc-border-light);
  border-radius: var(--szc-radius-lg);
  background: var(--szc-surface-light);
}

body[data-theme="dark"] .focus-section {
  border-color: var(--szc-border-dark);
  background: var(--szc-ink-soft);
}

.focus-section-head h3 {
  font-family: var(--szc-font);
  font-weight: 700;
  color: var(--szc-ink);
}

body[data-theme="dark"] .focus-section-head h3 {
  color: #f0f1f3;
}

.focus-count {
  background: var(--szc-accent-faint);
  color: var(--szc-accent-strong);
  border-radius: 999px;
  font-weight: 700;
}

body[data-theme="dark"] .focus-count {
  color: var(--szc-accent-soft);
}

.focus-link {
  color: var(--szc-accent);
  font-weight: 600;
}

body[data-theme="dark"] .focus-link {
  color: var(--szc-accent-soft);
}

.focus-header h2 {
  font-family: var(--szc-font);
  font-weight: 700;
  color: var(--szc-ink);
}

body[data-theme="dark"] .focus-header h2 {
  color: #f0f1f3;
}

/* ---------- Toast ---------- */
.toast {
  border-radius: var(--szc-radius-lg);
  background: var(--szc-ink);
  color: #ffffff;
  font-family: var(--szc-font);
  box-shadow: 0 18px 50px rgba(20, 22, 25, 0.35);
}

body[data-theme="dark"] .toast {
  background: #2a2c2f;
}

/* ---------- Пагинация, поиск ---------- */
.pagination {
  border-top: 1px solid var(--szc-border-light);
}

body[data-theme="dark"] .pagination {
  border-top-color: var(--szc-border-dark);
}

.search-row input {
  border-radius: var(--szc-radius);
}

/* ---------- Ссылки ---------- */
a {
  color: var(--szc-accent);
}

body[data-theme="dark"] a {
  color: var(--szc-accent-soft);
}

a:hover {
  color: var(--szc-accent-strong);
}

body[data-theme="dark"] a:hover {
  color: var(--szc-accent);
}

/* ---------- Чекбоксы и переключатели ---------- */
input[type="checkbox"] {
  accent-color: var(--szc-accent);
}

input[type="radio"] {
  accent-color: var(--szc-accent);
}

/* ---------- Мобильная навигация ---------- */
.workspace-mobile-nav {
  border-top: 1px solid var(--szc-border-light);
  background: var(--szc-surface-light);
}

body[data-theme="dark"] .workspace-mobile-nav {
  border-top-color: var(--szc-border-dark);
  background: var(--szc-ink-soft);
}

.lm-mobile-nav-item.active {
  color: var(--szc-accent);
  font-weight: 700;
}

body[data-theme="dark"] .lm-mobile-nav-item.active {
  color: var(--szc-accent-soft);
}

/* ---------- Runtime banner ---------- */
.runtime-banner {
  border-radius: var(--szc-radius);
  border: 1px solid var(--szc-border-light);
  background: var(--szc-soft-light);
}

body[data-theme="dark"] .runtime-banner {
  border-color: var(--szc-border-dark);
  background: #1e1f21;
}

.runtime-badge {
  background: var(--szc-accent);
  color: #fff;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.runtime-title {
  font-weight: 700;
  color: var(--szc-ink);
}

body[data-theme="dark"] .runtime-title {
  color: #ececee;
}

/* ============================================================================
   V2 · «Инженерная точность» — экран входа и детали интерфейса
   Типографика, поверхности, состояния. Соответствует концепту A.
   ========================================================================== */

/* ---------- Экран входа: типографическая композиция вместо слайда ---------- */
.login-hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px 48px;
}

.login-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  margin-top: auto;
  padding-top: 56px;
}

.hero-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--szc-accent-soft);
}

/* усиленные селекторы: старые стили .login-hero h1 / .login-hero-kicker
   (тёмный цвет в светлой теме) не должны перебивать корпоративный вид */
.login-hero .hero-kicker {
  color: var(--szc-accent-soft);
}

.login-hero h1.hero-title {
  margin-top: 16px;
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #ffffff;
  max-width: 17ch;
}

.hero-title em {
  font-style: normal;
  color: var(--szc-accent-soft);
}

.login-hero .hero-sub {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.66);
  max-width: 46ch;
}

.login-hero .hero-meta {
  display: flex;
  gap: 40px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.login-hero .hero-meta-item b {
  display: block;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.login-hero .hero-meta-item span {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* hero: без нижней декоративной полосы (метрики имеют свой разделитель) */
.login-hero::after {
  display: none;
}

/* ---------- Карточка входа: без арта, компактнее ---------- */
.login-brand-art {
  display: none;
}

.login-intro {
  margin: 4px 0 10px;
}

.login-intro h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--szc-ink);
}

body[data-theme="dark"] .login-intro h2 {
  color: #f0f1f3;
}

.login-card::before {
  display: none;
}

/* ---------- Поля: капс-подписи, аккуратный фокус ---------- */
.login-form label.login-field {
  color: var(--szc-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body[data-theme="dark"] .login-form label.login-field {
  color: #a9abb0;
}

.login-form input {
  min-height: 46px;
}

.login-form input::placeholder {
  color: var(--szc-muted);
  opacity: 0.75;
}

/* ---------- Кнопка входа: плоский фирменный оранжевый ---------- */
.login-form .login-submit {
  background: var(--szc-accent);
  background-image: none;
  box-shadow: 0 8px 22px rgba(234, 86, 33, 0.26);
}

.login-form .login-submit:hover {
  background: var(--szc-accent-strong);
  background-image: none;
  transform: none;
  box-shadow: 0 10px 26px rgba(234, 86, 33, 0.34);
}

.login-form .login-submit:focus-visible {
  outline: 2px solid var(--szc-accent-soft);
  outline-offset: 2px;
}

/* ---------- Список писем: типографика и плотность ---------- */
.message-item {
  padding: 14px 16px;
}
.message-item .msg-from,
.message-item .msg-subject {
  font-size: 13.5px;
  letter-spacing: -0.005em;
}

.message-item .msg-date,
.message-item .msg-snippet {
  font-size: 12px;
  color: var(--szc-muted);
}

.message-item.unread {
  background: rgba(234, 86, 33, 0.045);
  box-shadow: inset 3px 0 0 var(--szc-accent);
}

body[data-theme="dark"] .message-item.unread {
  background: rgba(234, 86, 33, 0.09);
}

.message-item.selected {
  box-shadow: inset 3px 0 0 var(--szc-accent);
  background: rgba(234, 86, 33, 0.06);
}

.message-item.multi-selected {
  background: rgba(20, 22, 25, 0.04);
}

body[data-theme="dark"] .message-item.selected {
  background: rgba(234, 86, 33, 0.13);
}

body[data-theme="dark"] .message-item.multi-selected {
  background: rgba(255, 255, 255, 0.05);
}

/* ---------- Заголовок входящих в приложении ---------- */
.pane-header h2 {
  letter-spacing: -0.015em;
}

/* ---------- Только логотип в шапках: подписи скрыты ---------- */
.brand-mail-label {
  display: none;
}

.app-brand-caption {
  display: none;
}

/* ---------- Экран входа без шапки: шапка скрыта, отступ убран ---------- */
.mail-services-header {
  display: none !important;
}

.login-screen {
  padding-top: 32px !important;
}

/* ---------- Hero экрана входа: изображение вместо типографики, метрики внизу ---------- */
.login-hero .hero-kicker,
.login-hero h1.hero-title,
.login-hero .hero-sub {
  display: none !important;
}

.login-hero .hero-image {
  display: block;
  width: 100%;
  max-height: 400px;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.login-hero-content {
  padding-top: 24px !important;
}

.login-hero .hero-meta {
  margin-top: 28px !important;
  padding-top: 18px !important;
}

/* Мобильная адаптация панели с иллюстрацией */
@media (max-width: 560px) {
  .login-hero {
    padding: 24px 20px !important;
  }
  .login-hero .hero-image {
    max-height: 220px !important;
  }
  .login-hero .hero-meta {
    gap: 24px !important;
  }
}

/* ---------- Hero: полноэкранная 3D-вставка вместо контента ---------- */
.login-hero {
  position: relative;
  overflow: hidden;
}

.login-hero .hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
  padding: 28px 36px;
  border-radius: 0;
  box-shadow: none;
}

.login-hero .hero-kicker,
.login-hero h1.hero-title,
.login-hero .hero-sub,
.login-hero .hero-meta {
  display: none !important;
}

.login-hero-content {
  position: static !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.login-hero::before {
  display: none;
}

@media (max-width: 1120px) {
  .login-hero {
    min-height: 300px !important;
    padding: 0 !important;
  }
  .login-hero .hero-image {
    max-height: none !important;
  }
}