/*
 * Shared Boxberry-inspired presentation layer.
 * Loaded after each page stylesheet so application markup and behaviour stay intact.
 */
:root {
  --bb-berry: #9c0e4d;
  --bb-berry-dark: #76083a;
  --bb-berry-deep: #4c0a2b;
  --bb-lime: #bed600;
  --bb-lime-dark: #8fa700;
  --bb-ink: #251d23;
  --bb-muted: #746970;
  --bb-line: #e8dfe4;
  --bb-surface: #ffffff;
  --bb-background: #f8f5f7;
  --bb-soft: #f8edf3;
  --bb-soft-lime: #f4f8d9;
  --bb-danger: #bd2f3d;
  --bb-radius-sm: 8px;
  --bb-radius-md: 8px;
  --bb-radius-lg: 8px;
  --bb-shadow: 0 18px 48px rgba(76, 10, 43, 0.1);
  --bb-shadow-small: 0 8px 24px rgba(76, 10, 43, 0.08);

  /* Main questionnaire tokens. */
  --color-primary: var(--bb-berry);
  --color-primary-hover: var(--bb-berry-dark);
  --color-accent-red: var(--bb-danger);
  --color-bg-main: var(--bb-background);
  --color-bg-card: var(--bb-surface);
  --color-text-main: var(--bb-ink);
  --color-text-secondary: var(--bb-muted);
  --color-border: var(--bb-line);
  --color-progress-bg: #eee6ea;
  --color-soft-green: var(--bb-soft);
  --color-soft-red: #fff0f1;
  --color-input: var(--bb-surface);
  --radius-sm: var(--bb-radius-sm);
  --radius-md: var(--bb-radius-md);
  --radius-lg: var(--bb-radius-lg);
  --shadow-card: var(--bb-shadow-small);

  /* Tokens used by the focused application pages. */
  --green: var(--bb-berry);
  --green-dark: var(--bb-berry-dark);
  --blue: var(--bb-berry);
  --blue-dark: var(--bb-berry-dark);
  --blue-pale: var(--bb-soft);
  --navy: var(--bb-berry-deep);
  --ink: var(--bb-ink);
  --muted: var(--bb-muted);
  --line: var(--bb-line);
  --surface: var(--bb-surface);
  --background: var(--bb-background);
  --border: var(--bb-line);
  --card: #fcfafb;
  --danger: var(--bb-danger);
}

[data-theme="dark"] {
  --bb-berry: #e65b9d;
  --bb-berry-dark: #f07caf;
  --bb-berry-deep: #f8c7dd;
  --bb-lime: #d2e642;
  --bb-lime-dark: #bed600;
  --bb-ink: #f8f1f5;
  --bb-muted: #c0afb8;
  --bb-line: #4b3541;
  --bb-surface: #261b21;
  --bb-background: #170f14;
  --bb-soft: #38202d;
  --bb-soft-lime: #30351b;
  --bb-shadow: 0 20px 52px rgba(0, 0, 0, 0.34);
  --bb-shadow-small: 0 10px 28px rgba(0, 0, 0, 0.28);
  --color-progress-bg: #46323d;
  --color-soft-red: #402027;
  --color-input: #20171c;
}

html {
  accent-color: var(--bb-berry);
}

body {
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

button,
a,
input,
select,
textarea,
summary {
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease,
    box-shadow 160ms ease, transform 160ms ease;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--bb-lime) 72%, white);
  outline-offset: 3px;
}

::selection {
  background: color-mix(in srgb, var(--bb-lime) 58%, white);
  color: var(--bb-berry-deep);
}

/* Questionnaire, privacy and dialogs. */
.questionnaire-page,
body:has(.privacy-page) {
  background: var(--color-bg-main);
}

.top {
  border-bottom-color: color-mix(in srgb, var(--bb-berry) 18%, var(--color-border));
  background: color-mix(in srgb, var(--color-bg-card) 92%, transparent);
}

.top::after,
.topbar::after,
.dashboard-header::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bb-berry) 0 76%, var(--bb-lime) 76% 100%);
  content: "";
}

.topbar,
.dashboard-header {
  position: relative;
}

.top {
  position: sticky;
}

.logo img,
.topbar img,
.card > img,
.background-brand img {
  height: auto;
}

.section-kicker,
.eyebrow,
.success-kicker {
  color: var(--bb-berry) !important;
  letter-spacing: 0;
}

.section-kicker i,
.questionnaire-progress-bar,
.progress-bar,
.support-chat-header,
.verification-actions .btn,
.success-actions .btn:not(.btn-ghost) {
  background: var(--bb-berry);
}

.questionnaire-intro h1,
.questionnaire-section h2,
.modal-card h2,
.verification-card h2,
.support-card h2,
.privacy-page h1 {
  color: var(--bb-ink);
  letter-spacing: 0;
}

.questionnaire-note,
.questionnaire-section,
.success-screen,
.modal-card,
.verification-card,
.privacy-page {
  border-color: var(--bb-line);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-small);
}

.questionnaire-note,
.questionnaire-tip,
.candidate-number,
.application-number,
.support-chat-status {
  background: var(--bb-soft);
}

.pay-note,
.waiting-note,
.security-note,
.legal-notice {
  border-color: color-mix(in srgb, var(--bb-lime) 54%, var(--bb-line));
  background: var(--bb-soft-lime);
}

.questionnaire-section {
  overflow: clip;
}

.questionnaire-section::before {
  background: linear-gradient(180deg, var(--bb-berry), var(--bb-lime));
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-color: var(--bb-line);
  border-radius: var(--bb-radius-sm);
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  border-color: var(--bb-berry) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bb-berry) 13%, transparent) !important;
  outline: none;
}

.choice-card,
.option-card,
.contact-option,
.device-option,
.schedule-option,
.contact-channel {
  border-color: var(--bb-line);
  border-radius: var(--bb-radius-md);
}

:where(.choice-card, .option-card, .contact-option, .device-option, .schedule-option):hover,
.contact-channel:hover {
  border-color: color-mix(in srgb, var(--bb-berry) 62%, var(--bb-line));
  box-shadow: var(--bb-shadow-small);
}

:where(.choice-card, .option-card, .contact-option, .device-option, .schedule-option):has(input:checked) {
  border-color: var(--bb-berry);
  background: var(--bb-soft);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bb-berry) 14%, transparent);
}

.btn,
.button,
.primary-button,
button[type="submit"] {
  border-radius: 999px;
}

.btn:not(.btn-ghost),
.primary-button {
  border-color: var(--bb-berry);
  background: var(--bb-berry);
  color: #fff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--bb-berry) 21%, transparent);
}

:where(.btn:not(.btn-ghost), .primary-button):hover:not(:disabled) {
  background: var(--bb-berry-dark);
  transform: translateY(-1px);
}

.btn-ghost,
.secondary-button,
.text-button,
.icon-button {
  border-color: var(--bb-line);
  background: var(--bb-soft);
  color: var(--bb-berry-dark);
}

.questionnaire-progress-track,
.progress-track {
  background: color-mix(in srgb, var(--bb-berry) 9%, var(--bb-line));
}

.success-icon,
.success-icon svg,
.candidate-number strong,
.application-number b {
  color: var(--bb-berry);
}

.success-icon {
  background: var(--bb-soft-lime);
  box-shadow: 0 0 0 11px color-mix(in srgb, var(--bb-soft-lime) 62%, transparent);
}

.support-chat-header {
  background: var(--bb-berry);
}

.support-chat-avatar > i,
.support-chat-header small i {
  background: var(--bb-lime);
}

.support-chat-message.is-visitor {
  border-color: color-mix(in srgb, var(--bb-berry) 24%, var(--bb-line));
  background: var(--bb-soft);
}

.contact-channel-site b,
.support-chat-status {
  color: var(--bb-berry);
}

.ios-access-preview-modal,
.ios-access-preview-card,
.ios-preview-intro,
.ios-preview-benefit,
.ios-preview-next-step,
.ios-preview-exit-guide {
  border-radius: var(--bb-radius-md);
}

.ios-access-preview-card {
  background: var(--bb-surface);
  color: var(--bb-ink);
}

.ios-access-preview-card .modal-close {
  background: var(--bb-soft);
  color: var(--bb-berry-dark);
}

.ios-access-preview-card h2,
.ios-preview-intro p,
.ios-preview-benefit strong,
.ios-preview-exit-guide summary,
.ios-preview-exit-guide li strong,
.ios-preview-next-step b {
  color: var(--bb-ink);
  letter-spacing: 0;
}

.ios-preview-guide-banner {
  border-radius: var(--bb-radius-md);
  background: var(--bb-berry);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--bb-berry) 25%, transparent);
}

.ios-preview-guide-play {
  border-bottom: 4px solid var(--bb-lime);
  border-radius: var(--bb-radius-sm);
}

.ios-preview-intro,
.ios-preview-benefit,
.ios-preview-next-step {
  background: #fcfafb;
}

.ios-preview-benefit-icon,
.ios-preview-summary-icon {
  border-radius: var(--bb-radius-sm);
  background: var(--bb-soft);
  color: var(--bb-berry);
}

.ios-preview-benefit small,
.ios-preview-exit-guide ol,
.ios-preview-next-step span,
.ios-preview-summary-arrow {
  color: var(--bb-muted);
}

.ios-preview-exit-guide {
  border-color: var(--bb-line);
  background: var(--bb-surface);
}

.ios-preview-exit-guide > p {
  background: var(--bb-soft-lime);
  color: var(--bb-berry-deep);
}

.ios-preview-actions .btn {
  border-radius: var(--bb-radius-sm);
}

.ios-preview-actions .ios-support-link {
  color: var(--bb-berry-dark);
}

/* Candidate onboarding. */
body:has(.topbar) {
  background: var(--bb-background);
}

.topbar {
  border-color: var(--bb-line);
  background: color-mix(in srgb, white 94%, transparent);
}

.card,
.pdf-frame,
.acceptance-card,
.credentials-card {
  border-color: var(--bb-line);
}

.card {
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow);
}

.steps span.is-current,
.candidate-number strong {
  color: var(--bb-berry);
}

.steps span.is-current b,
.steps span.is-complete b {
  border-color: var(--bb-berry);
  background: var(--bb-berry);
}

.steps span.is-complete b {
  box-shadow: inset 0 -4px 0 var(--bb-lime);
}

.state-icon.success-icon {
  background: var(--bb-soft-lime);
  color: var(--bb-berry);
}

.button,
.button-primary {
  background: var(--bb-berry);
  color: #fff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--bb-berry) 20%, transparent);
}

.button:hover:not(:disabled),
.button-primary:hover:not(:disabled) {
  background: var(--bb-berry-dark);
}

.button.secondary,
.button-secondary {
  border-color: var(--bb-line);
  background: var(--bb-surface);
  color: var(--bb-berry-dark);
  box-shadow: none;
}

.waiting-note,
.delivery-card {
  border-color: color-mix(in srgb, var(--bb-lime) 44%, var(--bb-line));
  background: var(--bb-soft-lime);
}

.credential-row button,
.delivery-card button,
.credentials button {
  background: var(--bb-soft);
  color: var(--bb-berry-dark);
}

.spinner {
  border-color: color-mix(in srgb, var(--bb-berry) 14%, var(--bb-line));
  border-top-color: var(--bb-berry);
}

/* Temporary Apple account flow. */
body:has(.modal-backdrop) {
  background: #eee8ec;
}

.app-background {
  background:
    radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--bb-lime) 22%, transparent), transparent 25rem),
    linear-gradient(145deg, #fff 0%, var(--bb-background) 70%);
}

.modal-backdrop {
  background: rgba(47, 16, 34, 0.58);
}

.access-modal {
  border: 1px solid color-mix(in srgb, var(--bb-berry) 13%, var(--bb-line));
  border-radius: var(--bb-radius-lg);
  box-shadow: 0 28px 76px rgba(55, 9, 34, 0.3);
}

.guide-banner {
  background: var(--bb-berry);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--bb-berry) 28%, transparent);
}

.guide-play {
  border-bottom: 4px solid var(--bb-lime);
}

.benefit-card,
.intro-card,
.exit-guide,
.credentials > div {
  border-color: var(--bb-line);
  background: #fcfafb;
}

.benefit-icon,
.summary-icon,
.timer-panel {
  background: var(--bb-soft);
  color: var(--bb-berry);
}

.benefit-icon svg,
.summary-icon svg {
  stroke: var(--bb-berry);
}

.timer-panel strong,
.copy-status {
  color: var(--bb-berry-dark);
}

.action-status,
.state-icon {
  background: var(--bb-soft-lime);
  color: var(--bb-berry-dark);
}

.icon-close {
  background: var(--bb-soft);
  color: var(--bb-berry-dark);
}

/* HR dashboard. */
body:has(.auth-layout),
body:has(.dashboard#dashboardView) {
  background: var(--bb-background);
}

.auth-layout {
  background: var(--bb-background);
}

.login-card {
  border-color: var(--bb-line);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow);
}

.security-mark {
  border-radius: 16px;
  background: var(--bb-berry);
  box-shadow: inset 0 -5px 0 var(--bb-lime);
}

.dashboard-header {
  border-color: var(--bb-line);
  background: var(--bb-surface);
}

.queue-panel {
  border-color: var(--bb-line);
}

.application-item,
.funnel,
.application-fields,
.history {
  border-color: var(--bb-line);
  border-radius: var(--bb-radius-md);
}

.application-item:hover,
.application-item.is-active {
  border-color: var(--bb-berry);
  background: var(--bb-soft);
}

.field dd a,
.status-value {
  color: var(--bb-berry);
}

.funnel {
  background: var(--bb-soft-lime);
}

.primary-button {
  background: var(--bb-berry);
}

.secondary-button {
  background: var(--bb-berry-deep);
  color: #fff;
}

.text-button,
.icon-button {
  background: var(--bb-soft);
  color: var(--bb-berry-dark);
}

/* Operator workspace. */
body:has(#operatorLoginForm) {
  background: var(--bb-background);
  color: var(--bb-ink);
}

body:has(#operatorLoginForm) .card {
  border-color: var(--bb-line);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow);
}

body:has(#operatorLoginForm) .eyebrow,
body:has(#operatorLoginForm) .status-value {
  color: var(--bb-berry) !important;
}

body:has(#operatorLoginForm) input:focus {
  border-color: var(--bb-berry);
  outline-color: color-mix(in srgb, var(--bb-berry) 14%, transparent);
}

body:has(#operatorLoginForm) button,
body:has(#operatorLoginForm) .action-link.primary {
  border-color: var(--bb-berry);
  background: var(--bb-berry);
}

body:has(#operatorLoginForm) .check {
  background: var(--bb-soft-lime);
  color: var(--bb-berry);
}

body:has(#operatorLoginForm) .dashboard-tile {
  border-color: var(--bb-line);
  border-radius: var(--bb-radius-md);
  background: #fcfafb;
}

body:has(#operatorLoginForm) .next-actions {
  border: 1px solid color-mix(in srgb, var(--bb-lime) 45%, var(--bb-line));
  background: var(--bb-soft-lime);
}

body:has(#operatorLoginForm) .action-link:not(.primary),
body:has(#operatorLoginForm) .secondary-button {
  border-color: color-mix(in srgb, var(--bb-berry) 23%, var(--bb-line));
  background: #fff;
  color: var(--bb-berry-dark);
}

/* Contract preview chrome only; printable document dimensions remain unchanged. */
body:has(.pages .paper) {
  background: #eee8ec;
}

.toolbar {
  border-bottom-color: var(--bb-line);
  box-shadow: var(--bb-shadow-small);
}

.toolbar strong {
  color: var(--bb-berry);
}

.toolbar .button:not(.secondary) {
  background: var(--bb-berry);
}

.toolbar .button.secondary {
  background: var(--bb-soft);
  color: var(--bb-berry-dark);
}

.paper {
  box-shadow: 0 12px 34px rgba(63, 21, 45, 0.14);
}

.confirmed {
  border-left-color: var(--bb-berry);
  background: var(--bb-soft);
}

.term-card div {
  border-color: var(--bb-line);
  background: #fcfafb;
}

@media (max-width: 700px) {
  .questionnaire-note,
  .questionnaire-section,
  .success-screen,
  .modal-card,
  .verification-card,
  .privacy-page,
  .card,
  .access-modal,
  .login-card {
    border-radius: 8px;
  }

  .topbar::after,
  .dashboard-header::after {
    height: 2px;
  }
}

/* Pages without a manual theme control follow the operating-system preference. */
@media (prefers-color-scheme: dark) {
  body:has(.topbar),
  body:has(.auth-layout) {
    color-scheme: dark;
    --bb-berry: #e65b9d;
    --bb-berry-dark: #f07caf;
    --bb-berry-deep: #6f2348;
    --bb-lime: #d2e642;
    --bb-lime-dark: #bed600;
    --bb-ink: #f8f1f5;
    --bb-muted: #c0afb8;
    --bb-line: #4b3541;
    --bb-surface: #261b21;
    --bb-background: #170f14;
    --bb-soft: #38202d;
    --bb-soft-lime: #30351b;
    --bb-shadow: 0 20px 52px rgba(0, 0, 0, 0.34);
    --bb-shadow-small: 0 10px 28px rgba(0, 0, 0, 0.28);
    --green: var(--bb-berry);
    --green-dark: var(--bb-berry-dark);
    --blue: var(--bb-berry);
    --blue-dark: var(--bb-berry-dark);
    --navy: var(--bb-berry-deep);
    --ink: var(--bb-ink);
    --muted: var(--bb-muted);
    --line: var(--bb-line);
    --surface: var(--bb-surface);
    --background: var(--bb-background);
    --border: var(--bb-line);
    --card: #21181d;
  }

  body:has(.topbar) .topbar {
    background: color-mix(in srgb, var(--bb-surface) 94%, transparent);
  }

  body:has(.topbar) .candidate-number,
  body:has(.topbar) .credential-row {
    border-color: var(--bb-line);
    background: #21181d;
  }

  body:has(.topbar) .pdf-frame {
    background: #30252b;
  }

  body:has(.topbar) .error-icon,
  body:has(.topbar) .form-error {
    background: #402027;
    color: #ffb7c0 !important;
  }

  body:has(.topbar) .error-icon {
    box-shadow: 0 0 0 11px rgba(117, 64, 74, 0.24);
  }

  body:has(.auth-layout) label {
    color: var(--bb-ink);
  }

  body:has(.auth-layout) input,
  body:has(.auth-layout) select,
  body:has(.auth-layout) .application-item,
  body:has(.auth-layout) .field,
  body:has(.auth-layout) .history,
  body:has(.auth-layout) .login-card,
  body:has(.auth-layout) .dashboard-header,
  body:has(.auth-layout) .queue-panel {
    border-color: var(--bb-line);
    background: var(--bb-surface);
    color: var(--bb-ink);
  }

  body:has(.auth-layout) .error,
  body:has(.auth-layout) .danger-button {
    border-color: #75404a;
    background: #402027;
    color: #ffb7c0;
  }

  body:has(.auth-layout) .status {
    background: var(--bb-soft);
    color: var(--bb-muted);
  }

  body:has(.auth-layout) .status[data-status="new"] {
    background: #38202d;
    color: #f3a7ca;
  }

  body:has(.auth-layout) .status[data-status="approved"] {
    background: #30351b;
    color: #d2e642;
  }

  body:has(.auth-layout) .status[data-status="rejected"] {
    background: #402027;
    color: #ffb7c0;
  }

  body:has(.topbar) .button:not(.secondary),
  body:has(.auth-layout) .primary-button {
    background: #9c0e4d;
    color: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  button,
  a,
  input,
  select,
  textarea,
  summary {
    transition: none;
  }
}

@media print {
  .paper,
  .term-card div {
    box-shadow: none;
  }
}

/* -------------------------------------------------------------------------
 * Classic Boxberry layout
 *
 * The original theme above translated the application into a contemporary
 * card UI.  The approved reference uses a much more distinctive layout:
 * compact white header, saturated berry background, lime/red diagonal trim
 * and a dense white paper surface.  Keep this layer last so it can restyle
 * the existing markup without changing any form or API hooks.
 * ------------------------------------------------------------------------- */
:root {
  --classic-pink: #ed0b57;
  --classic-pink-dark: #c90649;
  --classic-lime: #a9ce37;
  --classic-green: #84ad2d;
  --classic-ink: #222;
  --classic-muted: #686868;
  --classic-line: #d8d8d8;
  --classic-paper: #fff;
  --classic-shadow: 0 2px 12px rgb(0 0 0 / 24%);
}

body.questionnaire-page {
  min-width: 320px;
  background: var(--classic-pink);
  color: var(--classic-ink);
  font-family: Arial, Helvetica, sans-serif;
}

body.questionnaire-page .top {
  position: relative;
  height: 122px;
  border: 0;
  background: #fff;
  box-shadow: none;
  backdrop-filter: none;
}

body.questionnaire-page .top::before {
  pointer-events: none;
  position: absolute;
  right: max(22px, calc((100% - 900px) / 2));
  top: 22px;
  width: 310px;
  padding-left: 18px;
  border-left: 1px solid #bbb;
  color: #333;
  content: "Служба поддержки кандидатов\A Ответим на вопросы по оформлению";
  font-size: 12px;
  line-height: 1.55;
  white-space: pre;
}

body.questionnaire-page .top::after,
body:has(.topbar) .topbar::after,
body:has(.dashboard-header) .dashboard-header::after {
  pointer-events: none;
  position: absolute;
  right: 0;
  bottom: -12px;
  left: 0;
  z-index: 2;
  height: 12px;
  background: repeating-linear-gradient(-45deg,
      var(--classic-pink) 0 13px,
      #fff 13px 21px,
      var(--classic-lime) 21px 34px,
      #fff 34px 42px);
  content: "";
}

body.questionnaire-page .top-inner {
  width: min(900px, calc(100% - 36px));
  height: 96px;
  margin: 0 auto;
}

body.questionnaire-page .logo img {
  width: 210px;
  height: auto;
}

body.questionnaire-page .nav {
  gap: 12px;
  align-self: flex-start;
  margin-top: 22px;
}

body.questionnaire-page .support-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #333;
  font-size: 12px;
  font-weight: 400;
  text-decoration: underline;
}

body.questionnaire-page .theme-toggle { display: none; }

/* Leave room for the fixed support button and its expanded prompt at page end. */
body.questionnaire-page .footer {
  padding-bottom: calc(240px + env(safe-area-inset-bottom, 0px));
}

body.questionnaire-page .questionnaire-main {
  padding: 50px 0 70px;
  background: var(--classic-pink);
}

body.questionnaire-page .questionnaire-shell {
  width: min(900px, calc(100% - 36px));
  padding: 20px 18px 36px;
  background: var(--classic-paper);
  box-shadow: var(--classic-shadow);
}

body.questionnaire-page .questionnaire-intro {
  padding: 10px 18px 24px;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

body.questionnaire-page .section-kicker {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--classic-pink) !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

body.questionnaire-page .section-kicker i {
  width: 9px;
  height: 9px;
  border-radius: 0;
  background: var(--classic-lime);
  box-shadow: none;
}

body.questionnaire-page .questionnaire-intro h1 {
  max-width: 700px;
  margin: 12px 0 10px;
  color: #222;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(27px, 5vw, 40px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1;
}

body.questionnaire-page .intro-lead {
  max-width: 720px;
  color: #555;
  font-size: 15px;
  line-height: 1.45;
}

body.questionnaire-page .hero-badges span,
body.questionnaire-page .questionnaire-note,
body.questionnaire-page .questionnaire-privacy {
  border-radius: 0;
  box-shadow: none;
}

body.questionnaire-page .questionnaire-note {
  border-color: var(--classic-line);
  background: #fafafa;
}

body.questionnaire-page .questionnaire-note.pay-note {
  border-color: #cfdf9c;
  background: #f5f9e8;
}

body.questionnaire-page .questionnaire-section {
  margin-top: 16px;
  border: 1px solid var(--classic-line);
  border-radius: 0;
  box-shadow: none;
}

body.questionnaire-page .questionnaire-section::before {
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  width: auto;
  height: 5px;
  background: repeating-linear-gradient(-45deg,
      var(--classic-pink) 0 12px,
      #fff 12px 19px,
      var(--classic-lime) 19px 31px,
      #fff 31px 38px);
}

body.questionnaire-page .questionnaire-section legend {
  padding-top: 16px;
}

body.questionnaire-page .section-number {
  border-radius: 0;
  background: var(--classic-pink);
}

body.questionnaire-page .questionnaire-field input,
body.questionnaire-page .questionnaire-field select,
body.questionnaire-page .questionnaire-field textarea,
body.questionnaire-page .choice-card,
body.questionnaire-page .option-card,
body.questionnaire-page .vacancy-card,
body.questionnaire-page .contact-channel {
  border-radius: 0;
}

body.questionnaire-page .questionnaire-field input,
body.questionnaire-page .questionnaire-field select,
body.questionnaire-page .questionnaire-field textarea {
  min-height: 44px;
  border-color: #bcbcbc;
}

body.questionnaire-page .questionnaire-field input:focus,
body.questionnaire-page .questionnaire-field select:focus,
body.questionnaire-page .questionnaire-field textarea:focus {
  border-color: var(--classic-pink);
  box-shadow: 0 0 0 2px rgb(237 11 87 / 15%);
}

body.questionnaire-page .btn,
body.questionnaire-page .button,
body.questionnaire-page .primary-button,
body.questionnaire-page button[type="submit"] {
  border-radius: 3px;
  box-shadow: none;
}

body.questionnaire-page .btn:not(.btn-ghost),
body.questionnaire-page .primary-button,
body.questionnaire-page button[type="submit"] {
  border-color: var(--classic-green);
  background: linear-gradient(#b2d54d, var(--classic-green));
  color: #fff;
  text-shadow: 0 1px 1px rgb(0 0 0 / 28%);
}

body.questionnaire-page .btn:not(.btn-ghost):hover,
body.questionnaire-page .primary-button:hover,
body.questionnaire-page button[type="submit"]:hover {
  background: var(--classic-pink);
}

body.questionnaire-page .questionnaire-progress-track,
body.questionnaire-page .progress-track {
  border-radius: 0;
  background: #eee;
}

body.questionnaire-page .questionnaire-progress {
  border-color: #cfcfcf;
  border-radius: 0;
  background: #fff;
  color: var(--classic-ink);
  box-shadow: 0 1px 5px rgb(0 0 0 / 12%);
  backdrop-filter: none;
}

body.questionnaire-page .questionnaire-progress b,
body.questionnaire-page .questionnaire-progress small,
body.questionnaire-page .progress-time {
  color: var(--classic-ink);
}

body.questionnaire-page .questionnaire-progress small,
body.questionnaire-page .progress-time {
  color: var(--classic-muted);
}

body.questionnaire-page .questionnaire-progress-bar,
body.questionnaire-page .progress-bar {
  border-radius: 0;
  background: var(--classic-pink);
}

body.questionnaire-page .success-screen,
body.questionnaire-page .modal-card,
body.questionnaire-page .verification-card {
  border-radius: 0;
  box-shadow: var(--classic-shadow);
}

/* The same paper-and-stripe language is used on the protected flows. */
body:has(.topbar),
body:has(.auth-layout),
body:has(#operatorLoginForm) {
  background: var(--classic-pink);
  color: var(--classic-ink);
  font-family: Arial, Helvetica, sans-serif;
}

body:has(.topbar) .topbar,
body:has(.dashboard-header) .dashboard-header {
  position: relative;
  min-height: 82px;
  border: 0;
  background: #fff;
  box-shadow: none;
}

body:has(.classic-auth-topbar) .classic-auth-topbar {
  display: flex;
  min-height: 122px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 max(22px, calc((100% - 900px) / 2));
}

body:has(.classic-auth-topbar) .classic-auth-topbar::before {
  position: absolute;
  right: max(22px, calc((100% - 900px) / 2));
  top: 22px;
  width: 310px;
  padding-left: 18px;
  border-left: 1px solid #bbb;
  color: #333;
  content: "Служба поддержки кандидатов\A Ответим на вопросы по оформлению";
  font-size: 12px;
  line-height: 1.55;
  white-space: pre;
}

body:has(.classic-auth-topbar) .classic-auth-topbar::after {
  bottom: -12px;
}

body:has(.classic-auth-topbar) .classic-auth-topbar > a {
  display: inline-flex;
  align-items: center;
}

body:has(.classic-auth-topbar) .classic-auth-topbar img {
  width: 210px;
  height: auto;
}

.classic-header-meta {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: -72px;
  color: #333;
  font-size: 12px;
  line-height: 1.45;
}

.classic-header-meta span { display: none; }

.classic-header-meta a {
  color: #333;
  text-decoration: underline;
}

body:has(.classic-auth-topbar) .auth-layout {
  min-height: calc(100vh - 122px);
  padding: 42px 24px 56px;
}

body:has(.classic-auth-topbar) .login-card {
  width: min(440px, 100%);
}

body:has(.topbar) .topbar img { width: 210px; }
body:has(.topbar) .shell { margin-top: 42px; }
body:has(.topbar) .card,
body:has(.topbar) .pdf-frame,
body:has(.topbar) .acceptance-card,
body:has(.topbar) .credentials-card,
body:has(.auth-layout) .login-card,
body:has(#operatorLoginForm) .card {
  border-radius: 0;
  border-color: var(--classic-line);
  box-shadow: var(--classic-shadow);
}

body:has(.topbar) .button,
body:has(.auth-layout) .primary-button,
body:has(#operatorLoginForm) button,
body:has(#operatorLoginForm) .action-link.primary {
  border-radius: 3px;
  background: linear-gradient(#b2d54d, var(--classic-green));
  box-shadow: none;
}

body:has(.topbar) .eyebrow,
body:has(.auth-layout) .eyebrow,
body:has(#operatorLoginForm) .eyebrow {
  color: var(--classic-pink) !important;
  letter-spacing: 0;
}

body:has(.auth-layout) .auth-layout { background: transparent; }
body:has(.auth-layout) .security-mark { border-radius: 0; background: var(--classic-pink); box-shadow: inset 0 -5px 0 var(--classic-lime); }
body:has(.dashboard-header) .dashboard-header::after { bottom: -12px; }
body:has(.dashboard-header) .dashboard-grid { margin-top: 12px; }

html body:has(.topbar),
html body:has(.auth-layout),
html body:has(#operatorLoginForm) {
  background: var(--classic-pink) !important;
  background-image: none !important;
}

html body:has(.auth-layout) .auth-layout,
html body:has(#operatorLoginForm) main {
  background: transparent !important;
}

@media (max-width: 700px) {
  body.questionnaire-page .top,
  body.questionnaire-page .top-inner { height: 82px; }
  body.questionnaire-page .top::before { display: none; }
  body.questionnaire-page .top-inner { width: calc(100% - 24px); }
  body.questionnaire-page .nav { align-self: center; margin-top: 0; }
  body.questionnaire-page .logo img { width: 160px; height: auto; }
  body:has(.topbar) .topbar img { width: 150px; }
  body.questionnaire-page .questionnaire-main { padding-top: 38px; }
  body.questionnaire-page .questionnaire-shell { width: calc(100% - 20px); padding: 12px 9px 24px; }
  body.questionnaire-page .questionnaire-intro { padding-inline: 10px; }

  body:has(.classic-auth-topbar) .classic-auth-topbar {
    min-height: 82px;
    padding: 0 16px;
  }

  body:has(.classic-auth-topbar) .classic-auth-topbar::before {
    display: none;
  }

  body:has(.classic-auth-topbar) .classic-auth-topbar img {
    width: 160px;
  }

  .classic-header-meta {
    margin-top: 0;
  }

  .classic-header-meta span { display: none; }

  body:has(.classic-auth-topbar) .auth-layout {
    min-height: calc(100vh - 82px);
    padding: 38px 12px 48px;
  }
}

/* Keep the approved classic page readable when the browser prefers dark mode.
 * The reference itself is a light paper layout on a berry background. */
html[data-theme="dark"] body.questionnaire-page {
  --color-bg-main: var(--classic-pink);
  --color-bg-card: #fff;
  --color-text-main: var(--classic-ink);
  --color-text-secondary: #555;
  --color-border: var(--classic-line);
  --color-input: #fff;
  --color-soft-green: #f5f9e8;
  --color-soft-red: #fff2f4;
  --color-primary: var(--classic-green);
  background: var(--classic-pink);
  color: var(--classic-ink);
  color-scheme: dark;
}

html[data-theme="dark"] body.questionnaire-page .questionnaire-shell,
html[data-theme="dark"] body.questionnaire-page .questionnaire-intro,
html[data-theme="dark"] body.questionnaire-page .questionnaire-section,
html[data-theme="dark"] body.questionnaire-page .questionnaire-progress,
html[data-theme="dark"] body.questionnaire-page .success-screen {
  border-color: var(--classic-line);
  background: #fff;
  color: var(--classic-ink);
}

html[data-theme="dark"] body.questionnaire-page .questionnaire-intro h1,
html[data-theme="dark"] body.questionnaire-page .questionnaire-section legend b,
html[data-theme="dark"] body.questionnaire-page .questionnaire-field > span,
html[data-theme="dark"] body.questionnaire-page .questionnaire-question > p,
html[data-theme="dark"] body.questionnaire-page .questionnaire-note b {
  color: var(--classic-ink);
}

html[data-theme="dark"] body.questionnaire-page .intro-lead,
html[data-theme="dark"] body.questionnaire-page .questionnaire-note small,
html[data-theme="dark"] body.questionnaire-page .questionnaire-privacy {
  color: #555;
}

html[data-theme="dark"] body.questionnaire-page .questionnaire-note {
  border-color: var(--classic-line);
  background: #fafafa;
}

html[data-theme="dark"] body.questionnaire-page .questionnaire-note.pay-note {
  border-color: #cfdf9c;
  background: #f5f9e8;
}

html[data-theme="dark"] body.questionnaire-page .questionnaire-note.pay-note b {
  color: #08724f;
}

html[data-theme="dark"] body.questionnaire-page .questionnaire-field input,
html[data-theme="dark"] body.questionnaire-page .questionnaire-field select,
html[data-theme="dark"] body.questionnaire-page .questionnaire-field textarea,
html[data-theme="dark"] body.questionnaire-page .questionnaire-options label span {
  border-color: #bcbcbc;
  background: #fff;
  color: var(--classic-ink);
}

@media (prefers-color-scheme: dark) {
  body:has(.topbar),
  body:has(.auth-layout),
  body:has(#operatorLoginForm) {
    --bb-ink: var(--classic-ink);
    --bb-muted: var(--classic-muted);
    --bb-line: var(--classic-line);
    --bb-surface: #fff;
    --bb-background: var(--classic-pink);
    --bb-soft: #fafafa;
    --bb-soft-lime: #f5f9e8;
    background: var(--classic-pink);
    color: var(--classic-ink);
    color-scheme: dark;
  }

  body:has(.topbar) .topbar,
  body:has(.topbar) .card,
  body:has(.topbar) .pdf-frame,
  body:has(.topbar) .acceptance-card,
  body:has(.topbar) .credentials-card,
  body:has(.auth-layout) .login-card,
  body:has(.dashboard-header) .dashboard-header,
  body:has(#operatorLoginForm) .card {
    border-color: var(--classic-line);
    background: #fff;
    color: var(--classic-ink);
  }

  body:has(.topbar) .candidate-number,
  body:has(.topbar) .credential-row,
  body:has(.topbar) input,
  body:has(.topbar) select,
  body:has(.topbar) textarea,
  body:has(.auth-layout) input,
  body:has(.auth-layout) select,
  body:has(#operatorLoginForm) input {
    border-color: #bcbcbc;
    background: #fff;
    color: var(--classic-ink);
  }

  body:has(.auth-layout) .auth-layout,
  body:has(#operatorLoginForm) main {
    background: transparent;
  }
}