@property --pct {
      syntax: "<number>";
      inherits: false;
      initial-value: 0;
    }

    :root {
      --blue-main: #0a4f8a;
      --blue-light: #d8e8ff;
      --blue-dark: #07345b;
      --text-main: #222;
      --text-muted: #545c66;
      --border-color: #dde6f0;
      --surface-page: #f3f6fa;
      --surface-card: #ffffff;
      --surface-header: rgba(255, 255, 255, 0.82);
      --surface-intro: #ffffff;
      --surface-footer: rgba(255, 255, 255, 0.72);
      --surface-modal: #ffffff;
      --surface-elevated: #ffffff;
      --surface-input: #fafbfd;
      --input-autofill-bg: #fafbfd;
      --ui-radius-lg: 18px;
      --ui-radius-md: 14px;
      --ui-radius-sm: 8px;
      --ui-radius-btn: 8px;
      --control-height: 40px;
      --shadow-card: 0 10px 30px rgba(15, 73, 120, 0.06);
      --shadow-elevated: 0 18px 50px rgba(15, 73, 120, 0.12);
      --shadow-modal: 0 16px 48px rgba(15, 20, 40, 0.18);
      --shadow-header: 0 4px 24px -6px rgba(15, 73, 120, 0.1);
      --shadow-test-card: 0 2px 14px rgba(15, 73, 120, 0.05);
      --shadow-test-card-hover: 0 14px 36px rgba(15, 73, 120, 0.11);
      --backdrop-overlay: rgba(0, 0, 0, 0.35);
      --accent-error: #c62828;
      --surface-invalid: #fff8f8;
      --surface-muted: #fafbfc;
      --surface-panel: #f5f8fc;
      --surface-table-head: #f5f7f9;
      --surface-table-wrap: #ffffff;
      --surface-question-tab: #f7f9fc;
      --surface-test-card: #f8fafc;
      --surface-test-cover: #eef3fb;
      --surface-cover-preview: #f2f6fc;
      --table-row-hover: rgba(7, 52, 91, 0.04);
      --muted-fg: #888;
      --focus-invalid-ring: rgba(198, 40, 40, 0.14);
      --surface-explanation: #fdecea;
      --accent-danger-strong: #b71c1c;
      --text-label: #3d4d63;
      --placeholder-fg: #9aa8b8;
      --surface-run-soft: #fbfdff;
      --surface-success-soft: #e8f5e9;
      --accent-success: #2e7d32;
      --accent-success-muted: #1b5e20;
      --surface-audio-wrap: #f8fbff;
      --surface-tab-track: #eef2f7;
      --gauge-rest: #e8eef4;
      --gradient-image-1: #f8fbff;
      --gradient-image-2: #f0f4fa;
      --chart-bar-fill: #5b9bd5;
      --stats-grid-line: #e8ecf1;
      --page-blob-1: rgba(10, 79, 138, 0.11);
      --page-blob-2: rgba(216, 232, 255, 0.45);
      --accent-alpha-04: rgba(10, 79, 138, 0.04);
      --accent-alpha-06: rgba(10, 79, 138, 0.06);
      --accent-alpha-08: rgba(10, 79, 138, 0.08);
      --accent-alpha-10: rgba(10, 79, 138, 0.1);
      --accent-alpha-12: rgba(10, 79, 138, 0.12);
      --accent-alpha-14: rgba(10, 79, 138, 0.14);
      --accent-alpha-15: rgba(10, 79, 138, 0.15);
      --accent-alpha-16: rgba(10, 79, 138, 0.16);
      --accent-alpha-18: rgba(10, 79, 138, 0.18);
      --accent-alpha-35: rgba(10, 79, 138, 0.35);
      --accent-alpha-40: rgba(10, 79, 138, 0.4);
      --accent-alpha-45: rgba(10, 79, 138, 0.45);
      --accent-alpha-55: rgba(10, 79, 138, 0.55);
      --accent-spinner-track: rgba(10, 79, 140, 0.25);
      --page-blob-3: rgba(10, 79, 138, 0.04);
      --deep-alpha-06: rgba(7, 52, 91, 0.06);
      --deep-alpha-08: rgba(7, 52, 91, 0.08);
      --deep-alpha-15: rgba(7, 52, 91, 0.15);
      --deep-alpha-26: rgba(7, 52, 91, 0.26);
      --deep-alpha-52: rgba(7, 52, 91, 0.52);
      --deep-alpha-10: rgba(7, 52, 91, 0.1);
      --overlay-press: rgba(0, 0, 0, 0.03);
      --pill-border-accent: rgba(0, 133, 255, 0.1);
      --slider-focus-glow: rgba(0, 153, 255, 0.2);
      --accent-navy-soft: rgba(27, 86, 145, 0.04);
      --editor-gap-xl: 28px;
      --editor-gap-lg: 24px;
      --editor-gap-md: 16px;
      --editor-gap-sm: 12px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --radius-field: 10px;
      --editor-radius: 12px;
      --type-card-title: 18px;
      --type-subcard-title: 16px;
      --type-lead: 13px;
      --type-label: 13px;
      --type-body: 14px;
      --ease-ui: cubic-bezier(0.22, 0.61, 0.36, 1);
      --dur-ui-fast: 0.18s;
      --dur-ui: 0.22s;
      --focus-ring: 2px solid var(--accent-alpha-45);
      --focus-ring-offset: 2px;
      --auth-input-radius: 12px;
      --dur-view-enter: 0.66s;
    }

    @property --editor-save-emphasis {
      syntax: "<number>";
      inherits: false;
      initial-value: 0;
    }

    @keyframes uiFadeIn {
      from {
        opacity: 0;
        transform: translateY(5px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes uiEditorCardIn {
      from {
        opacity: 0;
        transform: translateY(11px) scale(0.992);
        filter: blur(1px);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    @keyframes uiModalBackdropIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @keyframes uiModalCardIn {
      from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    select {
      background-color: var(--surface-input);
      color: var(--text-main);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: var(--space-2) 10px;
      font-size: 14px;
      font-family: inherit;
      line-height: 1.35;
      cursor: pointer;
    }

    select:focus {
      outline: none;
      border-color: var(--blue-main);
      box-shadow: 0 0 0 2px var(--accent-alpha-12);
    }

    select option,
    select optgroup {
      background-color: var(--surface-card);
      color: var(--text-main);
    }

    textarea {
      background-color: var(--surface-input);
      color: var(--text-main);
      border: 1px solid var(--border-color);
      font-family: inherit;
    }

    html {
      color-scheme: light dark;
    }

    * {
      box-sizing: border-box;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    :where(button, [role="button"], a, input, select, textarea, summary):focus:not(:focus-visible) {
      outline: none;
    }

    :where(
        a,
        button:not(:disabled),
        input:not([type="hidden"]):not(:disabled),
        select:not(:disabled),
        textarea:not(:disabled),
        summary,
        [role="tab"],
        [role="checkbox"],
        [role="radio"]
      ):focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }

    .field input:focus-visible,
    .field textarea:focus-visible,
    .field select:focus-visible,
    .answer-text:focus-visible,
    .ip-modal-input:focus-visible {
      outline: var(--focus-ring);
      outline-offset: 1px;
    }

    body {
      margin: 0;
      background-color: var(--surface-page);
      background-image:
        radial-gradient(ellipse 130% 90% at 50% -18%, var(--page-blob-1), transparent 58%),
        radial-gradient(ellipse 85% 55% at 100% 0%, var(--page-blob-2), transparent 52%),
        radial-gradient(ellipse 70% 50% at 0% 100%, var(--page-blob-3), transparent 48%);
      color: var(--text-main);
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
      -webkit-box-shadow: 0 0 0 1000px var(--input-autofill-bg) inset !important;
      box-shadow: 0 0 0 1000px var(--input-autofill-bg) inset !important;
      -webkit-text-fill-color: var(--text-main) !important;
      caret-color: var(--text-main);
    }

    .prose-readable {
      max-width: 62ch;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.6;
      color: var(--text-muted);
      font-size: 15px;
      letter-spacing: -0.01em;
    }

    .app-preboot .page {
      opacity: 0;
      transform: translateY(14px);
      pointer-events: none;
    }

    .page {
      transition: opacity 0.72s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.72s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .intro-overlay {
      position: fixed;
      inset: 0;
      z-index: 1200;
      display: flex;
      align-items: center;
      justify-content: center;
      background:
        radial-gradient(ellipse 85% 55% at 50% 18%, var(--page-blob-1), transparent 58%),
        radial-gradient(ellipse 70% 45% at 100% 80%, var(--page-blob-2), transparent 52%),
        var(--surface-intro);
      opacity: 1;
      transition: opacity 0.64s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.64s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .intro-content {
      width: min(92vw, 760px);
      text-align: center;
      transform: translateY(8px);
      opacity: 0;
      transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
      will-change: transform, opacity;
      padding: 12px 16px;
    }

    .intro-brand {
      margin: 0;
      font-size: clamp(46px, 9vw, 112px);
      line-height: 0.95;
      font-weight: 900;
      letter-spacing: -0.035em;
      color: var(--blue-main);
      opacity: 0;
      transform: translateY(20px) scale(0.985);
      filter: blur(4px);
      transition:
        opacity 1.05s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 1.05s cubic-bezier(0.22, 0.61, 0.36, 1),
        filter 1.05s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .intro-overlay-stage-brand .intro-content {
      opacity: 1;
      transform: translateY(0);
    }

    .intro-overlay-stage-brand .intro-brand {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }

    .intro-subtitle {
      margin: 10px 0 0;
      color: var(--text-muted);
      font-size: clamp(14px, 2.2vw, 20px);
      letter-spacing: 0.01em;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.56s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.56s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .intro-overlay-stage-subtitle .intro-subtitle {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }

    .intro-overlay-leave .intro-content {
      transform: translateY(-34px);
      opacity: 0;
    }

    .intro-overlay-leave {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .card-enter {
      animation: cardEnterPop var(--dur-view-enter) cubic-bezier(0.22, 0.61, 0.36, 1) both;
      will-change: transform, opacity, filter;
    }

    @keyframes cardEnterPop {
      from {
        opacity: 0;
        transform: translateY(14px) scale(0.984);
        filter: blur(1.6px);
      }
      55% {
        filter: blur(0);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    @keyframes authSubmitSpin {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes authTabContentSettle {
      0% {
        opacity: 0.52;
        transform: translateY(12px) scale(0.988);
        filter: blur(1.8px);
      }
      68% {
        opacity: 1;
        transform: translateY(-1px) scale(1.006);
        filter: blur(0);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    @keyframes authRegisterExtraIn {
      0% {
        opacity: 0;
        transform: translateY(-18px) scale(0.987);
        filter: blur(1.8px);
      }
      74% {
        opacity: 1;
        transform: translateY(-0.8px) scale(1.004);
        filter: blur(0);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    @keyframes authSharedShiftDownIn {
      0% {
        opacity: 0.62;
        transform: translateY(-11px) scale(0.996);
      }
      70% {
        opacity: 1;
        transform: translateY(0.5px) scale(1.002);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes authSharedShiftUpIn {
      0% {
        opacity: 0.62;
        transform: translateY(11px) scale(0.996);
      }
      70% {
        opacity: 1;
        transform: translateY(-0.5px) scale(1.002);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .page {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    header {
      border-bottom: 1px solid var(--border-color);
      background: var(--surface-header);
      backdrop-filter: blur(14px) saturate(1.12);
      -webkit-backdrop-filter: blur(14px) saturate(1.12);
      box-shadow: var(--shadow-header);
      position: sticky;
      top: 0;
      z-index: 10;
    }

    body.app-auth-only header {
      display: none;
    }

    body.app-auth-only .layout {
      margin-top: 56px;
    }

    .header-inner {
      max-width: none;
      margin: 0;
      padding-top: calc(14px + env(safe-area-inset-top, 0px));
      padding-bottom: 14px;
      padding-left: calc(clamp(16px, 3.6vw, 56px) + env(safe-area-inset-left, 0px));
      padding-right: calc(clamp(16px, 3.6vw, 56px) + env(safe-area-inset-right, 0px));
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      column-gap: 20px;
    }

    .logo {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      white-space: nowrap;
      flex-shrink: 0;
      user-select: none;
    }

    .logo-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      flex: 0 0 48px;
      border-radius: 12px;
      font-size: 22px;
      font-weight: 800;
      line-height: 1;
      color: var(--blue-main);
      background: var(--accent-alpha-10);
      border: 1px solid var(--accent-alpha-16);
      box-shadow: 0 2px 8px var(--accent-alpha-08);
    }

    .logo-wordmark {
      display: flex;
      align-items: center;
      min-height: 48px;
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -0.03em;
      color: var(--text-main);
      line-height: 1.05;
    }

    .logo-wordmark strong {
      font-weight: 800;
      color: var(--blue-main);
    }

    button.logo-home-btn {
      -webkit-tap-highlight-color: transparent;
    }

    .logo-home-btn {
      appearance: none;
      border: none;
      margin: 0;
      padding: 0;
      background: transparent;
      cursor: pointer;
      font: inherit;
      color: inherit;
      text-align: left;
    }

    .logo-home-btn:focus-visible {
      outline: 2px solid var(--accent-alpha-45);
      outline-offset: 4px;
      border-radius: 14px;
    }

    .header-nav-left,
    .header-nav-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .header-nav-right {
      justify-content: flex-end;
      flex-wrap: wrap;
      row-gap: 8px;
    }

    .header-role-switch {
      display: inline-flex;
      align-items: stretch;
      gap: 4px;
      padding: 4px;
      border-radius: 14px;
      border: 1px solid var(--accent-alpha-08);
      background: var(--surface-tab-track);
      flex-shrink: 0;
    }

    .header-role-btn {
      margin: 0;
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.2;
      border: none;
      border-radius: 11px;
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      white-space: nowrap;
      transition: color 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.22s ease, background 0.22s ease;
    }

    .header-role-btn:hover {
      color: var(--blue-main);
    }

    .header-role-btn-active {
      background: var(--surface-card);
      color: var(--blue-main);
      box-shadow: 0 2px 10px var(--accent-alpha-10);
    }

    .header-role-btn:focus-visible {
      outline: 2px solid var(--accent-alpha-45);
      outline-offset: 2px;
      z-index: 1;
    }

    .header-nav-left {
      justify-content: center;
      justify-self: center;
      gap: 8px;
      min-width: 0;
    }

    main {
      flex: 1;
      padding-left: env(safe-area-inset-left, 0px);
      padding-right: env(safe-area-inset-right, 0px);
    }

    .layout {
      max-width: 1440px;
      margin: 40px auto 32px;
      padding: 0 16px;
      display: flex;
      justify-content: center;
    }

    @media (max-width: 800px) {
      .intro-content {
        width: min(94vw, 560px);
      }
      .intro-start-btn {
        width: 100%;
        max-width: 320px;
      }
      .header-inner {
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
        padding-bottom: 12px;
        padding-left: calc(14px + env(safe-area-inset-left, 0px));
        padding-right: calc(14px + env(safe-area-inset-right, 0px));
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        row-gap: 10px;
      }
      .header-nav-left {
        position: static;
        left: auto;
        transform: none;
        order: 3;
        width: 100%;
        justify-content: flex-start;
        justify-self: auto;
      }
      .header-nav-right {
        order: 2;
        margin-left: auto;
        justify-content: flex-end;
      }
      .header-role-switch {
        margin-right: 2px;
      }
      .header-role-btn {
        padding: 7px 10px;
        font-size: 12px;
      }
      .layout {
        max-width: 100%;
        margin: 24px auto 24px;
      }
      header {
        position: static;
      }
      .logo {
        gap: 10px;
      }
      .logo-mark {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        font-size: 18px;
        border-radius: 10px;
      }
      .logo-wordmark {
        min-height: 40px;
        font-size: 19px;
        font-weight: 700;
      }
      .logo-wordmark strong {
        font-weight: 800;
      }
    }

    .card {
      background: var(--surface-card);
      border-radius: var(--ui-radius-md);
      border: 1px solid var(--border-color);
      padding: 18px 18px 16px;
      box-shadow: var(--shadow-card);
      width: min(1240px, 72%);
    }

    .card-title {
      font-size: var(--type-card-title);
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.02em;
      margin-bottom: 6px;
    }

    .card-subtitle {
      font-size: 14px;
      line-height: 1.45;
      color: var(--text-muted);
      margin-bottom: 18px;
    }

    .pill {
      border-radius: 999px;
      padding: 4px 10px;
      font-size: 11px;
      background: var(--blue-light);
      color: var(--blue-dark);
      border: 1px solid var(--pill-border-accent);
      white-space: nowrap;
    }

    .btn {
      border: none;
      border-radius: var(--ui-radius-btn);
      min-height: var(--control-height);
      padding: 9px 16px;
      font-size: var(--type-body);
      font-weight: 500;
      cursor: pointer;
      background: var(--blue-main);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition:
        background var(--dur-ui-fast) var(--ease-ui),
        transform var(--dur-ui-fast) var(--ease-ui),
        border-color var(--dur-ui-fast) var(--ease-ui),
        opacity var(--dur-ui-fast) var(--ease-ui);
    }

    .btn:hover {
      background: var(--blue-dark);
      transform: translateY(-1px);
    }

    .btn:active {
      transform: translateY(0);
    }

    .btn-secondary:active,
    .btn-ghost:active {
      transform: translateY(0);
      filter: brightness(0.98);
    }

    .btn:focus-visible {
      outline: 2px solid var(--accent-alpha-45);
      outline-offset: 2px;
    }

    .btn-secondary:focus-visible {
      outline-color: var(--accent-alpha-55);
    }

    .btn.btn-busy {
      cursor: wait;
      opacity: 0.92;
      position: relative;
      pointer-events: none;
    }

    .btn.btn-busy:not(.btn-icon-only):not(.btn-invitations-export):not(.btn-invitations-more):not(.test-icon-btn) {
      color: transparent !important;
    }

    .btn.btn-busy:not(.btn-icon-only):not(.btn-invitations-export):not(.btn-invitations-more):not(.test-icon-btn)::after {
      content: "";
      position: absolute;
      inset: 0;
      margin: auto;
      width: 18px;
      height: 18px;
      border: 2px solid rgba(255, 255, 255, 0.35);
      border-top-color: #fff;
      border-radius: 50%;
      animation: authSubmitSpin 0.72s linear infinite;
    }

    .btn-secondary.btn-busy:not(.btn-icon-only):not(.btn-invitations-export):not(.btn-invitations-more):not(.test-icon-btn)::after {
      border-color: var(--accent-spinner-track);
      border-top-color: var(--blue-main);
    }

    .btn:disabled,
    .btn[aria-disabled="true"] {
      opacity: 0.55;
      cursor: not-allowed;
      pointer-events: none;
      transform: none;
    }

    .btn-icon-only.btn-busy,
    .btn-invitations-export.btn-busy,
    .btn-invitations-more.btn-busy,
    .test-icon-btn.btn-busy {
      position: relative;
      pointer-events: none;
    }

    .btn-icon-only.btn-busy::after,
    .btn-invitations-export.btn-busy::after,
    .btn-invitations-more.btn-busy::after,
    .test-icon-btn.btn-busy::after {
      content: "";
      position: absolute;
      inset: 0;
      margin: auto;
      width: 16px;
      height: 16px;
      border: 2px solid var(--accent-spinner-track);
      border-top-color: var(--blue-main);
      border-radius: 50%;
      animation: authSubmitSpin 0.72s linear infinite;
    }

    .stats-table-btn.btn-busy {
      cursor: wait;
      opacity: 0.88;
    }

    .btn-secondary {
      background: var(--surface-elevated);
      color: var(--blue-main);
      border: 1px solid var(--border-color);
      box-shadow: none;
      font-weight: 500;
    }

    .btn-secondary:hover {
      background: var(--surface-muted);
      border-color: var(--blue-main);
    }

    .btn-secondary:disabled,
    .btn-secondary[aria-disabled="true"] {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }

    .btn-reset {
      background: var(--blue-main);
      border: 1px solid var(--blue-main);
      color: #fff;
    }

    .btn-reset:hover {
      background: var(--blue-dark);
      border-color: var(--blue-dark);
    }

    .btn-tab-active {
      background: var(--accent-alpha-18);
      color: var(--blue-dark);
    }

    .btn-tab-active:hover {
      background: var(--deep-alpha-26);
    }

    .btn-secondary.btn-tab-active {
      background: var(--accent-alpha-10);
    }

    #btnTests {
      padding: 11px 26px;
      border-radius: var(--ui-radius-btn);
      font-size: 16px;
      background: var(--blue-main);
      border: 1px solid var(--blue-main);
      color: #fff;
    }

    #btnTests:hover {
      background: var(--blue-dark);
      border-color: var(--blue-dark);
    }

    #btnCreateTest {
      padding: 11px 26px;
      border-radius: var(--ui-radius-btn);
      font-size: 16px;
      background: var(--blue-main);
      border: 1px solid var(--blue-main);
      color: #fff;
    }

    #btnCreateTest:hover {
      background: var(--blue-dark);
      border-color: var(--blue-dark);
    }

    .btn-run-test {
      padding: 11px 26px;
      border-radius: var(--ui-radius-btn);
      font-size: 16px;
      background: var(--blue-main);
      border: 1px solid var(--blue-main);
      color: #fff;
    }

    .btn-run-test:hover {
      background: var(--blue-dark);
      border-color: var(--blue-dark);
    }

    .btn-ghost {
      background: transparent;
      border: none;
      color: var(--text-muted);
      padding-inline: 4px;
      box-shadow: none;
    }

    .btn-ghost:hover {
      background: var(--overlay-press);
      box-shadow: none;
      color: var(--text-main);
    }

    .muted {
      font-size: 12px;
      line-height: 1.4;
      color: var(--muted-fg);
    }

    .styling-categories-hint {
      margin: 0 0 8px 0;
      font-size: 13px;
      color: var(--text-muted);
    }

    .styling-categories-readonly {
      background: var(--surface-panel);
      cursor: default;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 10px 12px;
      color: var(--text-main);
      min-height: 92px;
      resize: vertical;
    }

    .editor-subcard {
      border: 1px solid var(--border-color);
      border-radius: var(--editor-radius);
      background: var(--surface-muted);
      padding: 16px 18px;
      transition:
        border-color var(--dur-ui) var(--ease-ui),
        box-shadow var(--dur-ui) var(--ease-ui);
    }

    @media (hover: hover) and (pointer: fine) {
      .editor-subcard:hover {
        border-color: var(--accent-alpha-16);
      }
    }

    .editor-subcard-title {
      margin: 0 0 6px;
      font-size: var(--type-subcard-title);
      font-weight: 700;
      line-height: 1.3;
      color: var(--text-main);
      letter-spacing: -0.02em;
    }

    .editor-subcard-lead {
      margin: 0 0 14px;
      font-size: var(--type-lead);
      line-height: 1.45;
      color: var(--text-muted);
      max-width: 56ch;
    }

    .test-editor-section-stack {
      display: flex;
      flex-direction: column;
      gap: var(--editor-gap-md);
    }

    .test-main-editor .editor-subcard + .editor-subcard {
      margin-top: var(--editor-gap-md);
    }

    #testResultsSection.test-section-active > .editor-subcard:first-child,
    #testStylingSection.test-section-active > .editor-subcard:first-child,
    #testSettingsSection.test-section-active > .editor-subcard:first-child,
    #testAccessSection.test-section-active > .test-editor-section-stack:first-child,
    #testGroupingSection.test-section-active > .test-editor-section-stack:first-child {
      margin-top: 0.7cm;
    }

    #testStylingSection.test-section-active > .editor-subcard + .editor-subcard,
    #testSettingsSection.test-section-active > .editor-subcard + .editor-subcard {
      margin-top: var(--editor-gap-md);
    }

    .ip-access-section--in-subcard {
      margin-top: 0;
    }

    .invitations-block--in-subcard {
      margin-top: 0;
      padding-top: 0;
      border-top: none;
    }

    .styling-field-label {
      font-size: var(--type-body);
      font-weight: 600;
      color: var(--text-muted);
    }

    .styling-checkbox-row {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      min-height: 38px;
      padding: 12px 12px;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-field);
      background: var(--surface-elevated);
      font-size: 14px;
      color: var(--text-main);
      cursor: pointer;
      margin-top: 8px;
    }

    .styling-checkbox-row input[type="checkbox"] {
      margin: 0;
      accent-color: var(--blue-main);
    }

    /* Воздух под блоком «форма регистрации» перед полем категорий */
    #testStylingSection .field:has(#test-show-registration) {
      margin-bottom: 4px;
    }

    #testStylingSection .field:has(#test-show-registration) + .field {
      margin-top: 20px;
    }

    #testStylingSection #test-min-pass-percent {
      max-width: 180px;
      border-radius: var(--radius-field);
      border: 1px solid var(--border-color);
      padding: var(--space-2) 10px;
      font-size: 14px;
      background: var(--surface-input);
      color: var(--text-main);
      margin-top: 6px;
    }

    #testStylingSection #test-min-pass-percent:focus,
    #testStylingSection .styling-categories-readonly:focus {
      outline: none;
      border-color: var(--blue-main);
      box-shadow: 0 0 0 2px var(--accent-alpha-08);
    }

    .form-grid {
      display: flex;
      flex-direction: column;
      gap: var(--editor-gap-sm);
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .field label {
      font-size: var(--type-label);
      line-height: 1.35;
      font-weight: 500;
      color: var(--text-label);
    }

    .field input[type="text"],
    .field input[type="email"],
    .field input[type="password"],
    .field input[type="tel"],
    .field input[type="number"],
    .answer-text {
      border-radius: var(--radius-field);
      border: 1px solid var(--border-color);
      padding: var(--space-2) 10px;
      min-height: var(--control-height);
      font-size: 14px;
      outline: none;
      width: 100%;
      background: var(--surface-input);
      color: var(--text-main);
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .field input::placeholder,
    .answer-text::placeholder {
      color: var(--placeholder-fg);
    }

    .field input:focus {
      border-color: var(--blue-main);
      box-shadow: 0 0 0 3px var(--slider-focus-glow);
    }

    .field-password {
      position: relative;
    }

    .password-input-wrapper {
      position: relative;
      width: 100%;
    }

    .password-input-wrapper input {
      padding-right: 38px; /* немного места под иконку справа, без изменения общей длины */
    }

    .auth-form .password-input-wrapper input {
      padding-right: 48px;
    }

    .password-toggle {
      position: absolute;
      inset-block: 0;
      right: 8px;
      border: none;
      background: none;
      padding: 0;
      cursor: pointer;
      color: var(--blue-main);
      width: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .auth-form .password-toggle {
      right: 6px;
      width: 40px;
      min-height: 40px;
      margin-block: auto;
      border-radius: var(--ui-radius-sm);
      color: var(--text-muted);
      transition:
        background var(--dur-ui-fast) var(--ease-ui),
        color var(--dur-ui-fast) var(--ease-ui);
    }

    .auth-form .password-toggle:hover {
      background: var(--accent-alpha-08);
      color: var(--blue-main);
    }

    .auth-form .password-toggle:focus-visible {
      outline: var(--focus-ring);
      outline-offset: 1px;
      color: var(--blue-main);
    }

    .form-note {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 4px;
    }

    .auth-separator {
      margin-top: 16px;
      padding-top: 10px;
      border-top: 1px solid var(--border-color);
      font-size: 13px;
      color: var(--text-muted);
      text-align: center;
    }

    .auth-separator button {
      border: none;
      background: none;
      padding: 0;
      margin-left: 4px;
      font-size: 13px;
      cursor: pointer;
      color: var(--blue-main);
      font-weight: 500;
    }

    .auth-field .auth-input {
      width: 100%;
    }
    .auth-required-mark {
      color: var(--accent-error);
      font-weight: 600;
    }
    .auth-input.auth-input-invalid {
      border-color: var(--accent-error);
      background-color: var(--surface-invalid);
    }
    .auth-input.auth-input-invalid:focus {
      outline: none;
      border-color: var(--accent-error);
    }
    .auth-field-error {
      display: block;
      font-size: 12px;
      color: var(--accent-error);
      margin-top: 4px;
      min-height: 16px;
      visibility: hidden;
    }
    .auth-field-error.auth-field-error-visible {
      visibility: visible;
    }

    .card:has(.auth-panel) {
      position: relative;
      width: min(440px, 94%);
      padding: 28px 26px 24px;
      border-radius: var(--ui-radius-lg);
      box-shadow: var(--shadow-elevated);
      background: var(--surface-card);
    }

    /* Единая «стеклянная» карточка для списка тестов, прохождения, профиля и т.п. (не авторизация и не редактор). */
    #authCard.card:not(:has(.test-editor-page)):not(:has(.auth-panel)) {
      position: relative;
      padding: 22px 22px 20px;
      border-radius: var(--ui-radius-lg);
      box-shadow: var(--shadow-elevated);
      background: var(--surface-card);
    }

    .auth-panel {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .auth-tabs-wrap {
      margin-bottom: 20px;
    }

    .auth-tab-track {
      position: relative;
      display: flex;
      gap: 4px;
      padding: 4px;
      border-radius: var(--ui-radius-md);
      background: var(--surface-tab-track);
      border: 1px solid var(--accent-alpha-08);
      box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.65);
    }

    .auth-tab-slider {
      position: absolute;
      top: 4px;
      bottom: 4px;
      left: 4px;
      width: calc((100% - 8px - 4px) / 2);
      border-radius: 11px;
      background: var(--surface-card);
      box-shadow: 0 3px 14px var(--accent-alpha-14);
      transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
      z-index: 0;
      pointer-events: none;
    }

    .auth-tab-track[data-mode="register"] .auth-tab-slider {
      transform: translateX(calc(100% + 4px));
    }

    .auth-motion-instant .auth-tab-slider,
    .auth-motion-instant .auth-view,
    .auth-motion-instant .auth-lead-stack .auth-lead,
    .auth-motion-instant .auth-footer-stack .auth-footer-hint {
      transition: none !important;
    }

    .auth-tab-btn {
      position: relative;
      z-index: 1;
      flex: 1;
      margin: 0;
      padding: 11px 14px;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -0.02em;
      border: none;
      border-radius: 11px;
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      transition: color 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .auth-tab-btn:hover {
      color: var(--blue-main);
    }

    .auth-tab-btn-active {
      color: var(--blue-main);
    }

    .auth-tab-btn:focus-visible {
      outline: 2px solid var(--accent-alpha-45);
      outline-offset: 2px;
      z-index: 2;
    }

    .auth-inline-link:focus-visible {
      outline: 2px solid var(--accent-alpha-45);
      outline-offset: 3px;
      border-radius: 4px;
    }

    .auth-lead-stack {
      display: grid;
    }

    .auth-lead-stack .auth-lead {
      grid-area: 1 / 1;
      margin: 0 0 22px;
      transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    #authShellRoot[data-active="login"] .auth-lead-register {
      opacity: 0;
      transform: translateY(-5px);
      pointer-events: none;
    }

    #authShellRoot[data-active="register"] .auth-lead-login {
      opacity: 0;
      transform: translateY(5px);
      pointer-events: none;
    }

    .auth-views {
      display: grid;
      align-content: start;
    }

    .auth-view {
      grid-area: 1 / 1;
      align-self: start;
      width: 100%;
      transition: opacity 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    #authViews[data-active="login"] .auth-view-register {
      opacity: 0;
      transform: translateY(-12px);
      pointer-events: none;
    }

    #authViews[data-active="register"] .auth-view-login {
      opacity: 0;
      transform: translateY(12px);
      pointer-events: none;
    }

    .auth-footer-stack {
      display: grid;
    }

    .auth-footer-stack .auth-footer-hint {
      grid-area: 1 / 1;
      margin: 22px 0 0;
      padding-top: 18px;
      border-top: 1px solid var(--border-color);
      transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    #authShellRoot[data-active="login"] .auth-footer-register {
      opacity: 0;
      transform: translateY(5px);
      pointer-events: none;
    }

    #authShellRoot[data-active="register"] .auth-footer-login {
      opacity: 0;
      transform: translateY(-5px);
      pointer-events: none;
    }

    #authShellRoot.auth-mode-switching[data-active="login"] .auth-view-login,
    #authShellRoot.auth-mode-switching[data-active="login"] .auth-lead-login,
    #authShellRoot.auth-mode-switching[data-active="login"] .auth-footer-login,
    #authShellRoot.auth-mode-switching[data-active="register"] .auth-view-register,
    #authShellRoot.auth-mode-switching[data-active="register"] .auth-lead-register,
    #authShellRoot.auth-mode-switching[data-active="register"] .auth-footer-register {
      animation: authTabContentSettle 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
      will-change: transform, opacity, filter;
    }

    #authShellRoot.auth-mode-switching[data-active="register"] .auth-view-register .auth-register-extra {
      animation: authRegisterExtraIn 0.62s cubic-bezier(0.22, 0.61, 0.36, 1) both;
      will-change: transform, opacity, filter;
    }

    #authShellRoot.auth-mode-switching[data-active="register"] .auth-view-register .auth-register-extra-phone {
      animation-delay: 0.1s;
    }

    #authShellRoot.auth-mode-switching[data-active="register"] .auth-view-register .auth-shared-field {
      animation: authSharedShiftDownIn 0.56s cubic-bezier(0.22, 0.61, 0.36, 1) both;
      will-change: transform, opacity;
    }

    #authShellRoot.auth-mode-switching[data-active="login"] .auth-view-login .auth-shared-field {
      animation: authSharedShiftUpIn 0.56s cubic-bezier(0.22, 0.61, 0.36, 1) both;
      will-change: transform, opacity;
    }

    .auth-lead {
      margin: 0 0 22px;
      font-size: 15px;
      line-height: 1.5;
      color: var(--text-muted);
      letter-spacing: -0.01em;
      max-width: 38ch;
    }

    .auth-form {
      gap: 20px;
    }

    .auth-form .field label {
      font-size: var(--type-label);
      font-weight: 600;
      color: var(--text-label);
      letter-spacing: -0.01em;
    }

    .auth-form .auth-input,
    .auth-form .field input[type="text"],
    .auth-form .field input[type="email"],
    .auth-form .field input[type="password"],
    .auth-form .field input[type="tel"] {
      border-radius: var(--auth-input-radius);
      border: 1px solid var(--border-color);
      padding: 13px 14px;
      min-height: 48px;
      font-size: 16px;
      background: var(--surface-input);
      transition:
        border-color var(--dur-ui) var(--ease-ui),
        box-shadow var(--dur-ui) var(--ease-ui),
        background var(--dur-ui) var(--ease-ui);
    }

    .auth-form .auth-input::placeholder,
    .auth-form .field input::placeholder {
      color: var(--placeholder-fg);
    }

    .auth-form .auth-input:focus,
    .auth-form .field input:focus {
      background: var(--surface-card);
      border-color: var(--blue-main);
      box-shadow: 0 0 0 3px var(--accent-alpha-12);
    }

    .auth-form .auth-input.auth-input-invalid:focus,
    .auth-form .field input.auth-input-invalid:focus {
      background: var(--surface-invalid);
      border-color: var(--accent-error);
      box-shadow: 0 0 0 4px var(--focus-invalid-ring);
    }

    .auth-form .auth-input.auth-input-invalid,
    .auth-form .field input.auth-input-invalid {
      background: var(--surface-invalid);
      border-color: var(--accent-error);
    }

    .auth-submit-btn {
      width: 100%;
      margin-top: 8px;
      padding: 14px 20px;
      border-radius: var(--ui-radius-btn);
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.02em;
      gap: 10px;
      box-shadow: 0 2px 14px var(--accent-alpha-14);
    }

    .auth-submit-btn:hover {
      box-shadow: 0 4px 20px var(--accent-alpha-18);
    }

    .auth-submit-btn:focus-visible {
      outline: 2px solid rgba(255, 255, 255, 0.95);
      outline-offset: 3px;
      box-shadow: 0 0 0 3px var(--accent-alpha-45);
    }

    .auth-submit-label {
      display: inline-block;
    }

    .auth-submit-spinner {
      display: none;
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      border: 2px solid rgba(255, 255, 255, 0.35);
      border-top-color: rgba(255, 255, 255, 0.95);
      border-radius: 50%;
      animation: authSubmitSpin 0.72s linear infinite;
    }

    .auth-submit-btn.auth-submit-loading .auth-submit-spinner {
      display: block;
    }

    .auth-submit-btn.auth-submit-loading .auth-submit-label {
      opacity: 0.9;
    }

    .auth-submit-btn:disabled {
      cursor: wait;
      opacity: 0.94;
      transform: none;
    }

    .auth-submit-btn:disabled:hover {
      transform: none;
    }

    .auth-form.auth-form-busy {
      pointer-events: none;
    }

    .auth-footer-hint {
      margin: 22px 0 0;
      padding: 18px 12px 0;
      border-top: 1px solid var(--border-color);
      font-size: 14px;
      line-height: 1.5;
      color: var(--text-muted);
      text-align: center;
    }

    .auth-inline-link {
      margin: 0;
      padding: 0;
      border: none;
      background: none;
      font: inherit;
      font-weight: 600;
      color: var(--blue-main);
      cursor: pointer;
      text-decoration: none;
      transition: color 0.15s ease;
    }

    .auth-inline-link:hover {
      color: var(--blue-dark);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    @media (max-width: 520px) {
      .card:has(.auth-panel) {
        width: 100%;
        padding: 22px 16px 20px;
      }
      #authCard.card:not(:has(.test-editor-page)):not(:has(.auth-panel)) {
        padding: 18px 14px 16px;
      }
      .auth-tabs-wrap {
        margin-bottom: 18px;
      }
      .auth-tab-btn {
        padding: 10px 10px;
        font-size: 14px;
      }
    }

    .rating-block {
      width: 100%;
      margin-top: var(--space-2);
    }

    .rating-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-main);
      margin-bottom: 0;
    }

    .rating-separator {
      height: 1px;
      background: var(--border-color);
      margin: 10px 0 14px;
    }

    .rating-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-field);
      overflow: hidden;
    }

    .rating-table th {
      text-align: left;
      padding: 10px 12px;
      background: var(--surface-panel);
      color: var(--text-main);
      font-weight: 600;
      border-bottom: 1px solid var(--border-color);
    }

    .rating-table td {
      padding: 10px 12px;
      border-bottom: 1px solid var(--border-color);
      color: var(--text-main);
    }

    .rating-table tbody tr:last-child td {
      border-bottom: none;
    }

    .rating-row-current {
      background: var(--accent-alpha-08);
    }

    .rating-row-current td {
      border-bottom: 2px solid var(--blue-main);
    }

    .rating-table tbody tr.rating-row-current + tr td {
      border-top: none;
    }

    .score-block {
      width: 100%;
      margin-top: var(--space-2);
    }

    .score-block-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-main);
      margin-bottom: 0;
    }

    .score-block-separator {
      height: 1px;
      background: var(--border-color);
      margin: 10px 0 14px;
    }

    .score-block-content {
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: var(--space-3) 14px;
      background: var(--surface-muted);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-field);
    }

    .score-block-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
    }

    .score-block-row:not(:last-child) {
      padding-bottom: var(--space-3);
      border-bottom: 1px solid var(--border-color);
      margin-bottom: 0;
    }

    .score-block-row + .score-block-row {
      padding-top: var(--space-3);
    }

    .score-block-label {
      color: var(--text-label);
    }

    .score-block-value {
      font-weight: 600;
      color: var(--blue-main);
    }

    .score-block-value.score-block-pass {
      color: var(--accent-success);
    }

    .score-block-value.score-block-fail {
      color: var(--accent-error);
    }

    .results-chart-block {
      width: 100%;
      margin-top: var(--space-2);
    }

    .results-chart-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-main);
      margin-bottom: 0;
    }

    .results-chart-separator {
      height: 1px;
      background: var(--border-color);
      margin: 10px 0 14px;
    }

    .results-chart-content {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      align-items: stretch;
    }

    .results-chart-gauge {
      flex: 0 0 220px;
      max-width: 260px;
      position: relative;
      height: 128px;
      --gauge-color: var(--blue-main);
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .results-chart-gauge-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .results-chart-gauge-track,
    .results-chart-gauge-progress {
      fill: none;
      stroke-width: 10;
      stroke-linecap: round;
    }

    .results-chart-gauge-track {
      stroke: var(--gauge-rest);
      opacity: 0.95;
    }

    .results-chart-gauge-progress {
      stroke-dasharray: 100;
      stroke-dashoffset: 100;
      transition: stroke-dashoffset 1.15s cubic-bezier(0.22, 0.61, 0.36, 1), stroke 0.45s ease;
    }

    .results-chart-gauge-center {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      background: transparent;
      border: none;
      box-shadow: none;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: none;
      pointer-events: none;
    }

    .results-chart-gauge-value {
      position: absolute;
      left: 50%;
      bottom: 28px;
      transform: translateX(-50%);
      font-size: 26px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.02em;
      color: var(--gauge-color);
      text-shadow: 0 2px 10px color-mix(in srgb, var(--gauge-color) 28%, transparent);
    }

    .results-chart-table {
      flex: 1 1 240px;
    }

    .results-chart-table table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-field);
      overflow: hidden;
    }

    .results-chart-table th {
      text-align: left;
      padding: var(--space-2) var(--space-3);
      background: var(--surface-panel);
      color: var(--text-main);
      font-weight: 600;
      border-bottom: 1px solid var(--border-color);
    }

    .results-chart-table td {
      padding: var(--space-2) var(--space-3);
      border-bottom: 1px solid var(--border-color);
      color: var(--text-main);
    }

    .results-chart-table tr:last-child td {
      border-bottom: none;
    }

    .question-layout {
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: stretch;
    }

    .question-main {
      flex: 1;
      width: 100%;
    }

    #questionsCard {
      width: 100%;
    }

    .question-main .form-grid {
      width: 100%;
      gap: 12px;
    }

    #questionEditorSection .field + .field {
      margin-top: 16px; /* дополнительный отступ между полями редактора */
    }

    #questionCommentSection .field:first-child,
    #questionParamsSection .field:first-child,
    #questionGroupingSection .field:first-child {
      margin-top: 0.7cm;
    }

    #questionParamsSection .field + .field,
    #questionGroupingSection .field + .field,
    #testSettingsSection .field + .field,
    #testResultsSection .field + .field {
      margin-top: 16px;
    }

    #testAccessSection .field + .field {
      margin-top: 24px;
    }

    #testAccessSection .time-limit-access-wrapper {
      margin-top: 20px;
    }

    .ip-access-section {
      margin-top: 24px;
    }
    .ip-access-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: 18px;
    }
    @media (max-width: 640px) {
      .ip-access-row {
        grid-template-columns: 1fr;
      }
    }
    .ip-access-panel {
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 16px;
      background: var(--surface-muted);
    }
    .ip-access-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--text-main);
      margin: 0 0 8px 0;
    }
    .ip-access-status {
      font-size: 13px;
      color: var(--text-muted);
      margin: 0 0 10px 0;
      line-height: 1.4;
    }
    .ip-access-list {
      min-height: 24px;
      margin-bottom: 12px;
    }
    .ip-access-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 6px 10px;
      margin-bottom: 6px;
      background: var(--surface-elevated);
      border-radius: 8px;
      border: 1px solid var(--border-color);
      font-size: 13px;
    }
    .ip-access-item-text {
      word-break: break-all;
    }
    .ip-access-remove {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      padding: 0;
      border: none;
      background: transparent;
      color: var(--text-muted);
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      border-radius: 4px;
    }
    .ip-access-remove:hover {
      color: var(--blue-dark);
      background: var(--deep-alpha-08);
    }
    .ip-add-btn {
      padding: 6px 14px;
      font-size: 14px;
    }
    .ip-modal {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    .ip-modal[hidden] {
      display: none !important;
    }
    .ip-modal-backdrop {
      position: absolute;
      inset: 0;
      background: var(--backdrop-overlay);
      cursor: pointer;
    }
    .ip-modal-card {
      position: relative;
      z-index: 1;
      background: var(--surface-modal);
      border-radius: var(--ui-radius-lg);
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-modal);
      padding: 0;
      max-width: 420px;
      width: 100%;
    }
    .ip-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 18px;
      background: var(--blue-dark);
      color: #fff;
      border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0;
    }
    .ip-modal-title {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
    }
    .ip-modal-close {
      width: 32px;
      height: 32px;
      padding: 0;
      border: none;
      background: transparent;
      color: #fff;
      font-size: 24px;
      line-height: 1;
      cursor: pointer;
      opacity: 0.9;
    }
    .ip-modal-close:hover {
      opacity: 1;
    }
    .ip-modal-body {
      padding: 18px;
    }
    .ip-modal-radio-row {
      display: flex;
      gap: 16px;
      margin-bottom: 12px;
    }
    .ip-radio-label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      cursor: pointer;
    }
    .ip-modal-hint {
      font-size: 13px;
      color: var(--text-muted);
      margin: 0 0 14px 0;
    }
    .ip-modal-field-wrap {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-2);
      margin-bottom: 12px;
    }
    .ip-modal-label {
      font-size: 14px;
      min-width: 28px;
    }
    .ip-modal-input {
      flex: 1;
      min-width: 120px;
      padding: var(--space-2) 10px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 14px;
      background: var(--surface-input);
      color: var(--text-main);
    }
    .ip-modal-input:focus {
      outline: none;
      border-color: var(--blue-dark);
    }
    .ip-modal-error {
      font-size: 13px;
      color: var(--accent-error);
      margin-top: 8px;
    }
    .ip-modal-footer {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      padding: 14px 18px;
      border-top: 1px solid var(--border-color);
    }
    .ip-denied-message {
      font-size: 15px;
      color: var(--text-main);
      margin-bottom: 16px;
    }

    .invitations-block {
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid var(--border-color);
    }
    .invitations-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 14px;
    }
    .invitations-group-id {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-main);
    }
    .invitations-header-actions {
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }
    .btn-invitations-add {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-2) 14px;
      background: var(--blue-main);
      color: #fff;
      border: none;
      border-radius: var(--ui-radius-btn);
      font-size: 14px;
      cursor: pointer;
    }
    .btn-invitations-add:hover {
      background: var(--blue-dark);
    }
    .invitations-icon {
      flex-shrink: 0;
    }
    .btn-icon-only {
      width: 36px;
      height: 36px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border-color);
      border-radius: var(--ui-radius-sm);
      background: var(--surface-elevated);
      color: var(--blue-main);
      cursor: pointer;
    }
    .btn-icon-only:hover {
      background: var(--blue-light);
    }
    .invitations-more-wrap {
      position: relative;
    }
    .btn-invitations-more {
      width: 36px;
      height: 36px;
    }
    .invitations-more-menu {
      position: absolute;
      right: 0;
      top: 100%;
      margin-top: 4px;
      background: var(--surface-modal);
      border: 1px solid var(--border-color);
      border-radius: var(--ui-radius-btn);
      box-shadow: var(--shadow-modal);
      min-width: 200px;
      z-index: 100;
      padding: 6px 0;
    }
    .ip-modal:not([hidden]) .ip-modal-backdrop {
      animation: uiModalBackdropIn 0.2s var(--ease-ui) both;
    }
    .ip-modal:not([hidden]) .ip-modal-card {
      animation: uiModalCardIn 0.24s var(--ease-ui) both;
      transform-origin: center top;
    }
    .invitations-more-menu[hidden] {
      display: none !important;
    }
    .invitations-more-item {
      display: block;
      width: 100%;
      padding: 10px 14px;
      text-align: left;
      border: none;
      background: none;
      font-size: 14px;
      color: var(--text-main);
      cursor: pointer;
    }
    .invitations-more-item:hover {
      background: var(--blue-light);
    }
    .invitations-toolbar {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 12px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border-color);
    }
    .invitations-filter-label {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-size: 14px;
      cursor: pointer;
    }
    .invitations-funnel-icon {
      color: var(--text-muted);
    }
    .invitations-template-wrap {
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }
    .invitations-template-wrap label {
      font-size: 14px;
      margin: 0;
    }
    .invitations-template-select {
      min-width: 140px;
    }
    .invitations-table-wrap,
    .stats-table-wrap {
      overflow-x: auto;
      background: var(--surface-table-wrap);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-field);
    }
    .invitations-table,
    .stats-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }
    .invitations-table th,
    .invitations-table td,
    .stats-table th,
    .stats-table td {
      padding: 10px var(--space-3);
      text-align: left;
      border-bottom: 1px solid var(--border-color);
    }
    .invitations-table th {
      background: var(--blue-light);
      font-weight: 600;
      line-height: 1.35;
      color: var(--blue-dark);
    }
    .status-chip {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      border: 1px solid transparent;
      white-space: nowrap;
    }
    .status-chip--ok {
      color: var(--accent-success-muted);
      background: var(--surface-success-soft);
      border-color: color-mix(in srgb, var(--accent-success) 34%, transparent);
    }
    .status-chip--neutral {
      color: var(--text-muted);
      background: var(--surface-panel);
      border-color: var(--border-color);
    }
    .invitations-table tbody tr:hover {
      background: var(--accent-alpha-04);
    }
    .invitations-th-check {
      width: 36px;
      text-align: center;
    }
    .invitations-td-check {
      text-align: center;
    }
    .invitations-td-link a {
      color: var(--blue-main);
      text-decoration: none;
    }
    .invitations-td-link a:hover {
      text-decoration: underline;
    }

    .invitations-add-modal .ip-modal-card {
      max-width: 460px;
    }
    .invitations-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      background: var(--blue-main);
      color: #fff;
      border-radius: 14px 14px 0 0;
    }
    .invitations-modal-title {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
    }
    .invitations-modal-tabs {
      display: flex;
      border-bottom: 1px solid var(--border-color);
      padding: 0 18px;
      gap: 4px;
    }
    .invitations-tab {
      padding: 10px 14px;
      border: none;
      background: none;
      font-size: 14px;
      color: var(--text-muted);
      cursor: pointer;
      border-bottom: 3px solid transparent;
      margin-bottom: -1px;
    }
    .invitations-tab:hover {
      color: var(--text-main);
    }
    .invitations-tab-active {
      font-weight: 600;
      color: var(--blue-main);
      border-bottom-color: var(--blue-main);
    }
    .invitations-modal-body {
      padding: 18px;
    }
    .invitations-tab-panel {
      display: block;
    }
    .invitations-tab-panel[hidden] {
      display: none !important;
    }
    .invitations-input {
      width: 100%;
      padding: var(--space-2) var(--space-3);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 14px;
      background: var(--surface-input);
      color: var(--text-main);
    }
    .invitations-checkbox-label {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-size: 14px;
      cursor: pointer;
      margin-top: 12px;
    }
    .invitations-checkbox-label-mt {
      margin-top: 14px;
    }
    .invitations-file-hint {
      font-size: 14px;
      color: var(--blue-main);
      margin: 0 0 14px 0;
    }
    .invitations-modal-footer {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      padding: 14px 18px;
      border-top: 1px solid var(--border-color);
    }
    .invitations-test-select {
      width: 100%;
    }

    .grouping-section-label {
      display: block;
      font-weight: 600;
      color: var(--text-main);
      margin-bottom: 4px;
    }
    .grouping-inner-card {
      border: 1px solid var(--border-color);
      border-radius: 12px;
      background: var(--surface-muted);
      padding: 14px 16px;
      margin-bottom: 16px;
    }
    .grouping-hint {
      margin: 0 0 14px 0;
      font-size: 13px;
      color: var(--text-muted);
    }
    .test-groups-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 16px;
    }
    .test-group-item {
      border: 1px solid var(--border-color);
      border-radius: var(--radius-field);
      padding: 14px;
      background: var(--surface-muted);
    }
    .test-group-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
    }
    .test-group-row:last-child {
      margin-bottom: 0;
    }
    .test-group-label {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-label);
      min-width: 160px;
    }
    .test-group-name-input {
      flex: 1;
      min-width: 180px;
      padding: 8px 10px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 14px;
      background: var(--surface-input);
      color: var(--text-main);
    }
    .test-group-summary {
      font-size: 13px;
      color: var(--text-muted);
      min-width: 160px;
    }
    .btn-small {
      padding: 4px 10px;
      font-size: 13px;
    }
    .test-group-remove-btn {
      min-width: 32px;
      padding: 4px 8px;
    }
    .group-select-checkboxes {
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-height: 280px;
      overflow-y: auto;
    }
    .group-checkbox-label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      cursor: pointer;
    }
    .question-card-theme {
      font-size: 13px;
      color: var(--blue-dark);
      font-weight: 600;
      margin-bottom: 8px;
      padding: 6px 0;
      border-bottom: 1px solid var(--border-color);
    }
    .question-card-theme:empty,
    .question-card-theme[style*="display: none"] {
      display: none;
    }

    #questionParamsSection .field {
      border-radius: var(--radius-field);
      border: 1px solid var(--border-color);
      padding: 10px 10px;
      background: var(--surface-elevated);
    }

    #testSettingsSection .field {
      border-radius: var(--radius-field);
      border: 1px solid var(--border-color);
      padding: 10px 10px;
      background: var(--surface-elevated);
    }

    #testResultsSection .field,
    #testAccessSection .field {
      border-radius: var(--radius-field);
      border: 1px solid var(--border-color);
      padding: 10px 10px;
      background: var(--surface-elevated);
    }

    #questionParamsSection .field label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: var(--text-main);
      cursor: pointer;
    }

    #testSettingsSection .field label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: var(--text-main);
      cursor: pointer;
    }

    #testResultsSection .field label,
    #testAccessSection .field label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: var(--text-main);
      cursor: pointer;
    }

    #questionParamsSection .field input[type="checkbox"] {
      margin: 0;
    }

    #testSettingsSection .field input[type="checkbox"] {
      margin: 0;
    }

    #testResultsSection .field input[type="checkbox"],
    #testAccessSection .field input[type="checkbox"] {
      margin: 0;
    }

    .question-actions {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
      gap: var(--space-2);
      margin-top: 16px;
    }

    .question-add-btn,
    .question-remove-btn,
    .answer-add,
    .answer-remove,
    .matching-add-left,
    .matching-remove-left,
    .matching-add-right,
    .matching-remove-right {
      inline-size: var(--control-height);
      block-size: var(--control-height);
      padding: 0;
      font-size: 0;
      line-height: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
    }

    .question-actions > .btn:first-child {
      min-height: var(--control-height);
      white-space: nowrap;
      padding-left: 14px;
      padding-right: 14px;
    }

    /* Иконки-действия в редакторе — вторичный уровень CTA */
    .question-add-btn,
    .question-remove-btn,
    .answer-add,
    .answer-remove,
    .matching-add-left,
    .matching-remove-left,
    .matching-add-right,
    .matching-remove-right {
      background: var(--surface-elevated);
      color: var(--blue-main);
      border: 1px solid var(--border-color);
      box-shadow: none;
    }

    .question-add-btn:hover,
    .question-remove-btn:hover,
    .answer-add:hover,
    .answer-remove:hover,
    .matching-add-left:hover,
    .matching-remove-left:hover,
    .matching-add-right:hover,
    .matching-remove-right:hover {
      background: var(--surface-muted);
      border-color: var(--blue-main);
    }

    #questionsCard .card-title {
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border-color);
      margin-bottom: 8px;
    }

    #authCard > .card-title,
    .test-editor-settings-card > .test-editor-top > .card-title {
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border-color);
      margin-bottom: 8px;
    }

    #authCard:has(.test-editor-page) {
      background: transparent;
      border: none;
      box-shadow: none;
      padding: 0;
    }

    .test-editor-page {
      display: flex;
      flex-direction: column;
      gap: var(--editor-gap-lg);
      width: 100%;
    }

    .test-editor-page > .card {
      width: 100%;
      animation: uiEditorCardIn 0.48s var(--ease-ui) both;
    }

    .test-editor-settings-card .form-grid {
      gap: var(--editor-gap-sm);
    }

    .test-editor-settings-card .test-editor-nav {
      margin-bottom: var(--editor-gap-md);
    }

    .save-settings-block {
      margin-top: var(--editor-gap-md);
      padding-top: var(--editor-gap-md);
      border-top: 1px solid var(--border-color);
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: var(--editor-gap-sm);
      flex-wrap: wrap;
    }

    /* «Сохранить…»: плавный акцент только при несохранённых правках (--editor-save-emphasis 0→1) */
    #btnSaveTestSettings,
    .editor-save-question-btn,
    #btnSaveTest {
      --editor-save-emphasis: 0;
      border: 1px solid transparent;
      box-shadow: none;
      letter-spacing: 0;
      color: #fff;
      background: linear-gradient(
        180deg,
        color-mix(
          in srgb,
          var(--blue-main) calc(100% - 12% * var(--editor-save-emphasis)),
          #ffffff calc(12% * var(--editor-save-emphasis))
        ),
        var(--blue-main)
      );
      transition:
        --editor-save-emphasis 0.52s var(--ease-ui),
        box-shadow 0.52s var(--ease-ui),
        border-color 0.45s var(--ease-ui),
        font-weight 0.35s var(--ease-ui),
        letter-spacing 0.35s var(--ease-ui),
        opacity 0.35s var(--ease-ui),
        transform var(--dur-ui-fast) var(--ease-ui);
    }

    #btnSaveTestSettings.btn-editor-save-dirty,
    .editor-save-question-btn.btn-editor-save-dirty,
    #btnSaveTest.btn-editor-save-dirty:not(:disabled) {
      --editor-save-emphasis: 1;
      border-color: color-mix(in srgb, var(--blue-main) 78%, #000 22%);
      box-shadow: 0 8px 22px color-mix(in srgb, var(--blue-main) 26%, transparent);
      font-weight: 700;
      letter-spacing: 0.01em;
    }

    #btnSaveTestSettings.btn-editor-save-dirty:hover:not(:disabled),
    .editor-save-question-btn.btn-editor-save-dirty:hover:not(:disabled),
    #btnSaveTest.btn-editor-save-dirty:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 10px 26px color-mix(in srgb, var(--blue-main) 32%, transparent);
      background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--blue-main) 88%, #ffffff 12%),
        var(--blue-main)
      );
    }

    #btnSaveTestSettings:not(.btn-editor-save-dirty):hover:not(:disabled),
    .editor-save-question-btn:not(.btn-editor-save-dirty):hover:not(:disabled),
    #btnSaveTest:not(.btn-editor-save-dirty):hover:not(:disabled) {
      background: var(--blue-dark);
    }

    .editor-save-test-wrap {
      display: inline-flex;
      position: relative;
      vertical-align: middle;
      max-width: 100%;
    }

    .editor-save-test-wrap.editor-save-test-blocked::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: var(--ui-radius-btn);
      z-index: 1;
      cursor: not-allowed;
    }

    #btnSaveTest:disabled {
      opacity: 0.48;
      cursor: not-allowed;
      box-shadow: none;
      transform: none;
    }

    .test-editor-questions-host {
      display: flex;
      flex-direction: column;
      gap: var(--editor-gap-md);
      width: 100%;
    }

    .test-editor-questions-host .questions-card-spacing {
      margin-top: 0;
    }

    /* Появление новой карточки «Вопрос» (классы вешает JS; без #id — все карточки одинаковы для каскада). */
    .test-editor-questions-host > .questions-card-spacing.question-card-entering {
      opacity: 0;
      transform: translateY(22px) scale(0.97);
      transform-origin: top center;
    }

    .test-editor-questions-host > .questions-card-spacing.question-card-entering.question-card-entering-active {
      opacity: 1;
      transform: translateY(0) scale(1);
      transition:
        opacity 0.55s var(--ease-ui),
        transform 0.55s var(--ease-ui);
    }

    .test-editor-questions-host > .questions-card-spacing.question-card-leaving {
      opacity: 1;
      transform: translateY(0) scale(1);
      transform-origin: top center;
    }

    .test-editor-questions-host > .questions-card-spacing.question-card-leaving.question-card-leaving-active {
      opacity: 0;
      transform: translateY(-14px) scale(0.97);
      transition:
        height 0.55s var(--ease-ui),
        margin 0.55s var(--ease-ui),
        padding 0.55s var(--ease-ui),
        border-width 0.55s var(--ease-ui),
        opacity 0.36s var(--ease-ui),
        transform 0.36s var(--ease-ui);
    }

    .ui-empty-state {
      text-align: center;
      padding: var(--editor-gap-lg) var(--editor-gap-md);
      border-radius: var(--editor-radius);
      border: 1px dashed var(--border-color);
      background: var(--surface-panel);
      color: var(--text-main);
    }

    .ui-empty-state--compact {
      padding: var(--editor-gap-md);
    }

    .ui-empty-title {
      margin: 0 0 8px;
      font-size: var(--type-subcard-title);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text-main);
    }

    .ui-empty-lead {
      margin: 0;
      font-size: var(--type-lead);
      line-height: 1.5;
      color: var(--text-muted);
      max-width: 44ch;
      margin-left: auto;
      margin-right: auto;
    }

    .invitations-empty {
      margin-bottom: var(--editor-gap-sm);
    }

    .test-groups-empty {
      margin-bottom: var(--editor-gap-sm);
    }

    @media (max-width: 720px) {
      #authCard:has(.test-editor-page) {
        width: 100%;
        max-width: 100%;
      }

      .test-nav-primary {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 2px;
        scrollbar-width: thin;
        border-bottom-width: 1px;
      }

      .test-nav-primary-btn {
        flex: 0 0 auto;
        padding: 10px 12px 8px;
        font-size: 14px;
      }

      .test-nav-secondary-shell {
        padding: 10px 12px 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      .test-nav-subrow {
        flex-wrap: nowrap;
        gap: 6px;
        min-width: min-content;
      }

      .test-nav-sub-btn {
        flex: 0 0 auto;
        font-size: 13px;
        padding: 8px 12px;
      }

      .question-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
      }

      .question-actions {
        justify-content: flex-end;
      }

      .question-actions > .btn:first-child {
        min-width: 0;
        flex: 1 1 160px;
      }

      .question-tab {
        flex: 0 0 auto;
      }

      .save-test-block,
      .save-settings-block {
        justify-content: stretch;
      }

      .save-test-block .btn,
      .save-settings-block .btn {
        width: 100%;
      }
    }

    #test-access {
      border-radius: var(--radius-field);
      border: 1px solid var(--border-color);
      padding: var(--space-2) 52px var(--space-2) 10px;
      font-size: 14px;
      outline: none;
      background: var(--surface-input);
      color: var(--text-main);
    }

    .question-tabs {
      display: flex;
      flex-direction: row;
      gap: var(--space-2);
      justify-content: flex-start;
      align-items: center;
      margin-top: var(--space-2);
    }

    .question-tab {
      border-radius: var(--ui-radius-btn);
      border: 1px solid var(--border-color);
      background: var(--surface-question-tab);
      padding: var(--space-2) var(--space-3);
      font-size: var(--type-label);
      font-weight: 600;
      cursor: pointer;
      text-align: center;
      color: var(--text-muted);
      transition:
        background var(--dur-ui) var(--ease-ui),
        border-color var(--dur-ui) var(--ease-ui),
        color var(--dur-ui) var(--ease-ui),
        transform var(--dur-ui-fast) var(--ease-ui);
    }

    .question-tab:hover {
      background: var(--accent-alpha-08);
      border-color: var(--blue-main);
      color: var(--text-main);
      transform: translateY(-1px);
    }

    .question-tab-active {
      background: var(--blue-main);
      border-color: var(--blue-main);
      color: #fff;
    }

    .question-tab-active:hover {
      transform: none;
    }

    .score-mode {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 13px;
      color: var(--text-muted);
    }

    .score-mode label {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 8px;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      background: var(--surface-elevated);
    }

    .score-mode input[type="checkbox"],
    .score-mode input[type="radio"] {
      margin: 0;
    }

    .question-section {
      display: none;
    }

    .question-section-active {
      display: block;
      animation: uiFadeIn var(--dur-ui) var(--ease-ui) both;
    }

    .test-tabs-row {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      margin-top: var(--space-2);
      margin-bottom: 4px;
    }

    .test-editor-top {
      margin-bottom: 4px;
    }

    .test-editor-top .card-title {
      margin-bottom: var(--space-2);
    }

    .test-editor-nav {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: 2px;
      margin-bottom: var(--space-3);
    }

    .test-nav-primary {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 0;
      border-bottom: 2px solid var(--border-color);
      margin-bottom: 0;
    }

    .test-nav-primary-btn {
      appearance: none;
      margin: 0 4px 0 0;
      padding: var(--space-3) 14px 10px;
      font-size: 15px;
      font-weight: 600;
      font-family: inherit;
      border: none;
      border-bottom: 3px solid transparent;
      margin-bottom: -2px;
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      border-radius: var(--ui-radius-btn) var(--ui-radius-btn) 0 0;
      transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    }

    .test-nav-primary-btn:hover {
      color: var(--text-main);
      background: var(--accent-alpha-06);
    }

    .test-nav-primary-btn--active {
      color: var(--blue-main);
      border-bottom-color: var(--blue-main);
      background: var(--accent-alpha-04);
    }

    .test-nav-primary-btn--active:hover {
      color: var(--blue-main);
      background: var(--accent-alpha-08);
    }

    .test-nav-secondary-shell {
      margin-top: var(--space-3);
      padding: var(--space-3) 14px 14px;
      border-radius: 0 12px 12px 12px;
      border: 1px solid var(--border-color);
      border-top: 1px solid var(--border-color);
      background: var(--surface-muted);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .test-nav-secondary-label {
      display: block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin: 0 0 var(--space-2);
    }

    .test-nav-secondary-track {
      min-height: 38px;
    }

    .test-nav-subrow {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }

    .test-nav-subrow[hidden] {
      display: none !important;
    }

    .test-nav-sub-btn {
      appearance: none;
      margin: 0;
      padding: 7px 14px;
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      border-radius: var(--ui-radius-btn);
      border: 1px solid var(--border-color);
      background: var(--surface-elevated);
      color: var(--text-muted);
      cursor: pointer;
      transition:
        background var(--dur-ui-fast) var(--ease-ui),
        border-color var(--dur-ui-fast) var(--ease-ui),
        color var(--dur-ui-fast) var(--ease-ui),
        box-shadow var(--dur-ui-fast) var(--ease-ui);
    }

    .test-nav-sub-btn:hover {
      color: var(--text-main);
      border-color: var(--blue-main);
      background: var(--surface-card);
    }

    .test-nav-sub-btn--active {
      background: var(--blue-main);
      border-color: var(--blue-main);
      color: #fff;
      box-shadow: 0 2px 10px var(--accent-alpha-14);
    }

    .test-nav-sub-btn--active:hover {
      background: var(--blue-dark);
      border-color: var(--blue-dark);
      color: #fff;
    }

    .test-nav-primary-btn:focus-visible,
    .test-nav-sub-btn:focus-visible {
      outline: 2px solid var(--accent-alpha-45);
      outline-offset: 2px;
    }

    .test-main-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
      gap: var(--editor-gap-xl) 32px;
      align-items: start;
    }

    @media (max-width: 840px) {
      .test-main-layout {
        grid-template-columns: 1fr;
      }

      .test-student-preview-aside {
        order: -1;
        max-width: 320px;
        margin: 0 auto;
      }
    }

    .test-main-editor-lead {
      margin: 0 0 16px;
      font-size: 13px;
      line-height: 1.5;
      color: var(--text-muted);
      max-width: 62ch;
    }

    .test-main-cover-hint {
      margin: 10px 0 0;
      font-size: 12px;
      line-height: 1.4;
    }

    .test-student-preview-aside {
      position: sticky;
      top: 12px;
    }

    .test-preview-aside-title {
      margin: 0 0 8px;
      font-size: 15px;
      font-weight: 700;
      color: var(--text-main);
      letter-spacing: -0.02em;
    }

    .test-preview-aside-text {
      margin: 0 0 16px;
      font-size: 13px;
      line-height: 1.45;
      color: var(--text-muted);
    }

    .test-preview-aside-frame {
      padding: 14px;
      border-radius: 14px;
      border: 1px solid var(--border-color);
      background: var(--surface-page);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .test-card.test-card--editor-preview {
      width: 100%;
      max-width: 280px;
      margin: 0 auto;
      pointer-events: auto;
      box-shadow: none;
      transition: none;
    }

    .test-card--editor-preview .test-card-cover--editor-preview {
      position: relative;
      height: 132px;
      min-height: 0;
      background-color: var(--surface-test-cover);
      background-position: 50% 50%;
      overflow: hidden;
      user-select: none;
      touch-action: none;
    }

    .test-card--editor-preview .test-card-cover-overlay {
      pointer-events: none;
    }

    .test-editor-preview-cta {
      padding: 0 12px 12px;
    }

    .test-editor-preview-cta .btn-run-test:disabled {
      width: 100%;
      opacity: 0.88;
      cursor: default;
    }

    .test-section {
      display: none;
    }

    .test-section-active {
      display: block;
      animation: uiFadeIn var(--dur-ui) var(--ease-ui) both;
    }

    .test-section-entering {
      animation: uiEditorCardIn 0.56s var(--ease-ui) both;
      will-change: transform, opacity, filter;
    }

    footer,
    .page-footer {
      border-top: 1px solid var(--border-color);
      padding: 14px clamp(16px, 3.6vw, 56px);
      padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
      font-size: 13px;
      line-height: 1.55;
      letter-spacing: 0.01em;
      color: var(--text-muted);
      text-align: center;
      margin-top: auto;
      background: var(--surface-footer);
      backdrop-filter: blur(10px) saturate(1.06);
      -webkit-backdrop-filter: blur(10px) saturate(1.06);
    }

    .header-auth-btn-hidden {
      display: none;
    }

    .field-spacing-top {
      margin-top: 0.7cm;
    }

    .login-title {
      font-size: 20px;
    }

    .questions-card-spacing {
      margin-top: 16px;
    }

    .select-field {
      border-radius: var(--radius-field);
      border: 1px solid var(--border-color);
      padding: var(--space-2) 10px;
      min-height: var(--control-height);
      font-size: 14px;
      outline: none;
      background: var(--surface-input);
      color: var(--text-main);
    }

    .time-limit-wrapper {
      display: none;
      margin-top: var(--space-2);
      margin-left: 0;
    }

    .time-limit-input {
      max-width: 120px;
    }

    .field-deduct-wrong .label-with-checkbox {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      cursor: pointer;
    }

    .field-deduct-wrong .label-with-checkbox input[type="checkbox"] {
      margin: 0;
    }

    .deduct-wrong-value-wrap {
      margin-top: 10px;
      margin-left: 0;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .deduct-wrong-value-wrap label {
      font-size: 13px;
      color: var(--text-label);
      margin: 0;
    }

    .deduct-wrong-input {
      max-width: 100px;
      padding: 6px 10px;
      border: 1px solid var(--accent-alpha-35);
      border-radius: 8px;
      font-size: 14px;
      background: var(--surface-input);
      color: var(--text-main);
    }

    .time-limit-access-wrapper {
      margin-top: 10px;
      margin-bottom: 4px;
    }

    .time-limit-access-wrapper[style*="display: none"] {
      display: none !important;
    }

    .time-limit-access-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      max-width: 240px;
    }

    .time-limit-access-row label {
      font-size: 13px;
      color: var(--text-label);
      margin: 0;
    }

    .time-limit-access-input {
      width: 56px;
      padding: var(--space-2) 10px;
      font-size: 14px;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-field);
      background: var(--surface-input);
      color: var(--text-main);
      outline: none;
    }

    .time-limit-access-input:focus {
      border-color: var(--blue-main);
    }

    .passphrase-prompt-separator {
      height: 1px;
      background: var(--border-color);
      margin: 10px 0 14px;
    }

    .pre-test-separator {
      height: 1px;
      background: var(--border-color);
      margin: 12px 0 20px 0;
    }
    .pre-test-description-block {
      margin-bottom: 24px;
    }
    .pre-test-description-title,
    .pre-test-registration-title {
      font-size: 16px;
      font-weight: 600;
      margin: 0 0 8px 0;
      color: var(--text-main);
    }
    .pre-test-description-separator,
    .pre-test-registration-separator {
      height: 1px;
      background: var(--border-color);
      margin-bottom: 12px;
    }
    .pre-test-description-content {
      font-size: 14px;
      line-height: 1.5;
      color: var(--text-main);
    }
    .pre-test-description-content p {
      margin: 0 0 12px 0;
    }
    .pre-test-registration-block {
      margin-bottom: 20px;
    }
    .pre-test-registration-fields .field {
      margin-bottom: 14px;
    }
    .pre-test-input {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 14px;
      background: var(--surface-input);
      color: var(--text-main);
    }
    .pre-test-input:focus {
      outline: none;
      border-color: var(--blue-main);
      background: var(--surface-input);
    }

    .pre-test-input.pre-test-input-invalid:focus {
      background: var(--surface-invalid);
      border-color: var(--accent-error);
      box-shadow: 0 0 0 3px var(--focus-invalid-ring);
    }
    .pre-test-input.pre-test-input-invalid {
      border-color: var(--accent-error);
      background-color: var(--surface-invalid);
    }
    .pre-test-input.pre-test-input-invalid:focus {
      border-color: var(--accent-error);
    }
    .pre-test-required-mark {
      color: var(--accent-error);
      font-weight: 600;
    }
    .pre-test-field-error {
      display: block;
      font-size: 12px;
      color: var(--accent-error);
      margin-top: 4px;
      min-height: 16px;
      visibility: hidden;
    }
    .pre-test-field-error.pre-test-field-error-visible {
      visibility: visible;
    }
    .pre-test-actions {
      margin-top: 20px;
    }

    /* Общий таймер: в потоке над панелью действий, не ломает выравнивание кнопок */
    .run-test-footer-stack {
      margin-top: 24px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: stretch;
    }

    .run-test-timer-banner {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      flex-wrap: wrap;
      padding: 8px 12px;
      border-radius: var(--radius-field);
      border: 1px solid var(--border-color);
      background: var(--surface-elevated);
      font-size: 13px;
      line-height: 1.2;
      color: var(--text-main);
      user-select: none;
    }

    .run-test-timer-banner-label {
      font-size: 11px;
      font-weight: 650;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-right: auto;
    }

    #runTestTimerValue.run-test-timer-mono {
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      font-size: 15px;
      color: var(--blue-main);
    }

    .run-test-container {
      outline: none;
    }

    .run-test-title {
      font-size: 17px;
      font-weight: 600;
      color: var(--text-muted);
      letter-spacing: -0.01em;
      margin-bottom: 2px;
    }

    .run-test-title-separator {
      height: 1px;
      background: var(--border-color);
      margin: 10px 0 14px;
    }

    .run-test-forbid-copy {
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
    }

    .run-test-forbid-copy input,
    .run-test-forbid-copy textarea,
    .run-test-forbid-copy select {
      user-select: text;
      -webkit-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
    }

    .timeout-message {
      margin-bottom: 14px;
      font-size: 14px;
      color: var(--text-main);
    }

    .timeout-overlay-text {
      margin: 0 0 16px;
      font-size: 14px;
      color: var(--text-muted);
    }

    .time-limit-note {
      font-size: 12px;
      color: var(--text-muted);
      margin-left: 4px;
    }

    .profile-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-2);
    }

    .profile-view-card {
      border: 1px solid color-mix(in srgb, var(--blue-main) 14%, var(--border-color));
      border-radius: var(--ui-radius-lg);
      background: var(--surface-card);
      padding: 18px 18px 16px;
    }

    .profile-title-row--view {
      margin-bottom: 4px;
    }

    .profile-edit-btn-plain {
      min-width: 104px;
    }

    .profile-edit-btn {
      border: none;
      background: none;
      padding: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--blue-main);
    }

    .profile-view-avatar-row {
      margin-bottom: 20px;
    }

    .profile-view-hero {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 16px;
      padding: 12px;
      border-radius: var(--ui-radius-md);
      border: 1px solid color-mix(in srgb, var(--blue-main) 16%, var(--border-color));
      background: color-mix(in srgb, var(--blue-main) 5%, var(--surface-elevated));
    }

    .profile-view-hero-text {
      min-width: 0;
    }

    .profile-view-name {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text-main);
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    .profile-view-mail {
      margin-top: 4px;
      color: var(--text-muted);
      font-size: 14px;
      overflow-wrap: anywhere;
    }

    .profile-view-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .profile-view-item {
      border: 1px solid var(--border-color);
      border-radius: var(--ui-radius-md);
      background: var(--surface-elevated);
      padding: 10px 12px;
      min-height: 72px;
    }

    .profile-view-item label {
      display: block;
      margin: 0 0 6px;
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 600;
    }

    .profile-view-item div {
      color: var(--text-main);
      font-weight: 600;
      overflow-wrap: anywhere;
    }
    .profile-avatar-wrap {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--border-color);
    }
    .profile-avatar-wrap-view {
      margin: 0;
    }
    .profile-avatar-img,
    .profile-avatar-preview-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .profile-avatar-placeholder {
      background: var(--blue-light);
      color: var(--blue-main);
    }
    .profile-avatar-default-icon {
      width: 56%;
      height: 56%;
      color: var(--blue-main);
      opacity: 0.85;
    }
    .profile-avatar-edit-field {
      margin-bottom: 18px;
    }
    .profile-avatar-edit-row {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }
    .profile-avatar-preview {
      width: 80px;
      height: 80px;
    }
    .profile-avatar-actions {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }
    .profile-avatar-upload-label {
      cursor: pointer;
      margin: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .profile-avatar-input {
      position: absolute;
      width: 0;
      height: 0;
      opacity: 0;
      pointer-events: none;
    }
    .profile-avatar-remove-btn {
      font-size: 13px;
    }

    @media (max-width: 900px) {
      .profile-view-grid {
        grid-template-columns: 1fr;
      }
    }

    .question-comment-editor-wrapper .question-comment-input {
      width: 100%;
      min-height: 52px;
      padding: var(--space-2) 10px;
      font-size: 14px;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-field);
      resize: vertical;
      font-family: inherit;
      background: var(--surface-input);
      color: var(--text-main);
    }

    .question-comment-editor-wrapper .question-comment-input:focus {
      border-color: var(--blue-main);
      outline: none;
    }

    .question-audio-field {
      display: none;
    }

    .audio-input-row {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      margin-top: 4px;
    }

    .audio-upload-btn {
      flex: 1;
      justify-content: flex-start;
      border: 1px solid var(--border-color);
      background: var(--surface-elevated);
      color: var(--blue-main);
      font-size: 13px;
    }

    .audio-record-btn {
      padding: var(--space-2) 10px;
      min-width: 36px;
      border: 1px solid var(--border-color);
      background: var(--surface-elevated);
      color: var(--blue-main);
      font-size: 13px;
    }

    .audio-remove-btn {
      padding: var(--space-2) 10px;
      min-width: 36px;
      border: 1px solid var(--border-color);
      background: var(--surface-elevated);
      color: var(--blue-main);
      font-size: 20px;
      line-height: 1;
      font-weight: 700;
    }

    .audio-record-btn.audio-recording {
      background: var(--blue-main);
      border-color: var(--blue-main);
      color: #fff;
    }

    .audio-preview {
      margin-top: var(--space-2);
    }

    .question-main-image-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-2);
      margin-top: 6px;
    }

    .question-main-image-preview {
      flex-basis: 100%;
      overflow: hidden;
      border-radius: 12px;
    }

    .question-main-image-thumb {
      max-width: 140px;
      max-height: 100px;
      border-radius: 12px;
      display: block;
      border: 1px solid var(--accent-alpha-14);
      object-fit: cover;
    }

    .run-question-comment {
      margin-top: 6px;
      margin-bottom: 4px;
      padding: var(--space-2) 10px;
      font-size: 13px;
      color: var(--text-main);
      background: var(--surface-panel);
      border-radius: 8px;
      border-left: 3px solid var(--blue-main);
      white-space: pre-wrap;
    }

    .run-question-correct-answer {
      margin-top: 10px;
      padding: var(--space-2) var(--space-3);
      font-size: 13px;
      color: var(--text-main);
      background: var(--surface-success-soft);
      border-radius: 8px;
      border-left: 3px solid var(--accent-success);
    }

    .run-question-correct-label {
      font-weight: 600;
      color: var(--accent-success-muted);
      margin-right: 6px;
    }

    .run-question-audio-wrap {
      margin-top: 10px;
      margin-bottom: 4px;
      padding: 6px 8px;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-field);
      background: var(--surface-audio-wrap);
      max-width: 340px;
    }

    .run-question-audio {
      width: 100%;
      max-width: 320px;
      height: 30px;
      display: block;
    }

    .run-question-prompt {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 4px;
    }

    .run-question-prompt--stacked {
      flex-direction: column;
    }

    .run-question-prompt--side-image {
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px 20px;
    }

    .run-question-prompt-text {
      flex: 1 1 0;
      min-width: 0;
    }

    .run-question-prompt label {
      font-weight: 700;
      font-size: 20px;
      color: var(--text-main);
      line-height: 1.3;
      margin: 0;
    }

    .run-question-prompt--side-image .run-question-image-wrap {
      flex: 0 0 auto;
      max-width: min(42%, 300px);
      width: 100%;
      align-self: flex-start;
    }

    .run-question-field--with-side-image {
      gap: 0;
    }

    .run-question-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(148px, 36%);
      gap: 16px 28px;
      align-items: stretch;
      width: 100%;
    }

    .run-question-main-col {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-self: start;
    }

    .run-question-main-col .run-question-prompt-text {
      flex: 0 0 auto;
    }

    .run-question-main-col .run-question-prompt-text label {
      display: block;
      font-weight: 700;
      font-size: 20px;
      color: var(--text-main);
      line-height: 1.3;
      margin: 0;
    }

    .run-question-step-timer {
      font-size: 13px;
      font-weight: 700;
      color: var(--blue-main);
      background: color-mix(in srgb, var(--blue-main) 10%, var(--surface-elevated));
      border: 1px solid color-mix(in srgb, var(--blue-main) 28%, var(--border-color));
      border-radius: 999px;
      padding: 6px 10px;
      margin-right: 2px;
      white-space: nowrap;
    }

    .run-question-answers-block {
      margin: 0;
      padding-left: 1.15rem;
      margin-left: 0.2rem;
      border-left: 3px solid var(--accent-alpha-14);
    }

    .run-question-answers-block .answers-run-list {
      margin-top: 0;
    }

    .run-question-media-col {
      min-width: 0;
      display: flex;
      align-self: stretch;
    }

    .run-question-media-col .run-question-image-wrap {
      flex: 1;
      width: 100%;
      max-width: none;
      margin: 0;
      min-height: min(52vh, 420px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 12px;
      box-sizing: border-box;
    }

    .run-question-media-col .run-question-image {
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: min(52vh, 420px);
      min-height: 180px;
      object-fit: contain;
      object-position: center;
      margin: 0;
      border-radius: 12px;
    }

    @media (max-width: 720px) {
      .run-question-layout {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .run-question-media-col .run-question-image-wrap {
        min-height: 200px;
        max-height: min(40vh, 320px);
      }

      .run-question-media-col .run-question-image {
        max-height: min(40vh, 300px);
        min-height: 120px;
      }
    }

    @media (max-width: 640px) {
      .run-question-prompt--side-image {
        flex-direction: column;
      }

      .run-question-prompt--side-image .run-question-image-wrap {
        max-width: min(100%, 440px);
      }
    }

    .run-question-image-wrap {
      padding: 8px 10px;
      background: linear-gradient(145deg, var(--gradient-image-1) 0%, var(--gradient-image-2) 100%);
      border: 1px solid var(--border-color);
      border-radius: 14px;
      max-width: min(100%, 440px);
      box-shadow: 0 4px 14px var(--accent-alpha-06);
      overflow: hidden;
    }

    .run-question-image {
      display: block;
      width: auto;
      max-width: 100%;
      max-height: 240px;
      height: auto;
      margin: 0 auto;
      object-fit: contain;
      border-radius: 12px;
    }

    .run-question-explanation {
      margin-top: 6px;
      padding: 8px 12px;
      font-size: 13px;
      color: var(--text-main);
      background: var(--surface-explanation);
      border-radius: 8px;
      border-left: 3px solid var(--accent-error);
      white-space: pre-wrap;
    }

    .run-question-explanation-label {
      font-weight: 600;
      color: var(--accent-danger-strong);
      margin-right: 6px;
    }

    .run-question-confirm-wrap {
      margin-top: 10px;
    }

    .run-question-confirm-btn {
      min-width: 120px;
    }

    .run-question-confirmed .run-matching-left-row,
    .run-question-confirmed .run-matching-right-row {
      pointer-events: none;
      opacity: 0.85;
    }

    .result-review-block {
      width: 100%;
      margin-top: 8px;
    }

    .result-review-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-main);
      margin-bottom: 0;
    }

    .result-review-separator {
      height: 1px;
      background: var(--border-color);
      margin: 10px 0 14px;
    }

    .result-review-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .result-review-item {
      padding: 14px 16px;
      background: var(--surface-muted);
      border: 1px solid var(--border-color);
      border-radius: 12px;
    }

    .result-review-question {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-main);
      margin-bottom: 10px;
      line-height: 1.4;
    }

    .result-review-image-wrap {
      margin: 0 0 10px;
      padding: 8px;
      background: var(--surface-elevated);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      max-width: 320px;
      overflow: hidden;
    }

    .result-review-image {
      display: block;
      max-width: 100%;
      max-height: 200px;
      height: auto;
      margin: 0 auto;
      object-fit: contain;
      border-radius: 10px;
    }

    .result-review-num {
      color: var(--blue-main);
      margin-right: 4px;
    }

    .result-review-row {
      font-size: 13px;
      line-height: 1.45;
      margin-top: 6px;
      padding-left: 4px;
    }

    .result-review-user {
      color: var(--text-muted);
    }

    .result-review-correct {
      color: var(--accent-success-muted);
      font-weight: 500;
    }

    .result-review-label {
      font-weight: 600;
      margin-right: 6px;
    }

    .result-review-user .result-review-label {
      color: var(--text-label);
    }

    .result-review-correct .result-review-label {
      color: var(--accent-success-muted);
    }

    .answers-section {
      margin-top: 28px;
    }

    .answers-header {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 6px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--border-color);
    }

    .answers-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 0.7cm;
    }

    .matching-section {
      margin-top: 28px;
    }

    .matching-columns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: var(--space-4);
    }

    .matching-column {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .matching-header {
      font-weight: 600;
      margin-bottom: 4px;
    }

    .matching-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .matching-left-row,
    .matching-right-row {
      display: grid;
      align-items: center;
      column-gap: 8px;
    }

    .matching-left-row {
      grid-template-columns: minmax(0, 1.4fr) auto auto auto;
    }

    .matching-right-row {
      grid-template-columns: auto minmax(0, 1.4fr) auto auto;
    }

    .matching-image-toolbar {
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
    }

    .matching-right-row .matching-image-toolbar {
      grid-column: 2 / -1;
    }

    .matching-question-text,
    .matching-answer-text {
      width: 100%;
      border-radius: 12px;
      border: 1px solid var(--border-color);
      padding: 10px 12px;
      font-size: 14px;
      background: var(--surface-input);
      color: var(--text-main);
    }

    .matching-answer-index {
      min-width: 24px;
      text-align: center;
      font-weight: 600;
    }

    .matching-image-preview {
      flex-basis: 100%;
      margin-top: 0;
    }

    .matching-image-thumb {
      max-width: 80px;
      max-height: 80px;
      border-radius: 10px;
      display: block;
    }

    .run-matching-section {
      margin-top: 8px;
      position: relative;
      width: 100%;
    }

    .run-matching-columns {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: 96px;
      row-gap: 8px;
      position: relative;
      z-index: 1;
      width: 100%;
    }

    .run-matching-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
    }

    .run-matching-column {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
    }

    .run-matching-header {
      font-weight: 600;
      font-size: 14px;
    }

    .run-matching-left-list,
    .run-matching-right-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .run-matching-left-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid var(--border-color);
      background-color: var(--surface-run-soft);
    }

    .run-matching-right-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid var(--border-color);
      background-color: var(--surface-run-soft);
    }

    .run-matching-question-index {
      display: none;
    }

    .run-matching-question-text {
      order: 1;
      flex: 1;
      min-width: 180px;
      font-size: 16px;
      line-height: 1.35;
      color: var(--text-main);
    }

    .run-matching-answer-index {
      display: none;
    }

    .run-matching-answer-text {
      order: 1;
      flex: 1;
      min-width: 180px;
      font-size: 16px;
      line-height: 1.35;
      color: var(--text-main);
    }

    .run-matching-image {
      order: 0;
      width: 140px;
      height: 140px;
      object-fit: cover;
      border-radius: 14px;
      margin: 0;
      flex-shrink: 0;
      border: 1px solid var(--accent-alpha-14);
      background: var(--surface-panel);
      box-shadow: 0 4px 14px var(--accent-alpha-08);
    }

    .run-matching-select {
      order: 2;
      width: 110px;
      min-width: 110px;
      flex-basis: 100%;
      margin-left: 152px;
    }

    @media (max-width: 920px) {
      .run-matching-select {
        margin-left: 0;
      }
    }

    .run-matching-right-row.dragging {
      opacity: 0.6;
    }

    .run-matching-left-row.drop-target {
      outline: 2px dashed var(--primary);
      outline-offset: 2px;
      background-color: var(--accent-navy-soft);
      border-radius: 10px;
    }

    .run-test-actions {
      margin-top: 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .run-test-actions-icons {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .run-test-report-btn {
      min-height: 40px;
      padding: 8px 14px;
      border-radius: 10px;
      background: var(--surface-elevated);
      border: 1px solid var(--border-color);
      color: var(--blue-main);
      box-shadow: none;
    }

    .run-test-report-btn:hover {
      background: var(--surface-muted);
      border-color: var(--blue-main);
      color: var(--blue-dark);
    }

    .run-test-actions-right {
      margin-left: auto;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }

    .run-test-confirm-hint {
      font-size: 12px;
      color: var(--accent-danger-strong);
      background: var(--surface-explanation);
      border-radius: 8px;
      padding: 6px 10px;
      margin-right: 4px;
      white-space: nowrap;
    }

    /* Кнопка "Назад": стиль как у "Профиль" с полупрозрачным фоном */
    #runTestPrevBtn,
    #btnAddGroup,
    #testCoverUploadBtn,
    #testCoverRemoveBtn,
    .test-group-select-btn,
    .test-group-remove-btn,
    .run-question-confirm-btn,
    .matching-image-btn,
    .matching-image-remove-btn,
    .question-main-image-btn,
    .question-main-image-remove-btn {
      background: var(--accent-alpha-10);
      border: none;
      color: var(--blue-main);
    }

    #runTestPrevBtn:hover,
    #btnAddGroup:hover,
    #testCoverUploadBtn:hover,
    #testCoverRemoveBtn:hover,
    .test-group-select-btn:hover,
    .test-group-remove-btn:hover,
    .run-question-confirm-btn:hover,
    .matching-image-btn:hover,
    .matching-image-remove-btn:hover,
    .question-main-image-btn:hover,
    .question-main-image-remove-btn:hover {
      background: var(--accent-alpha-16);
      border: none;
      color: var(--blue-dark);
    }

    .question-main-image-remove-btn[hidden],
    .matching-image-remove-btn[hidden],
    .profile-avatar-remove-btn[hidden] {
      display: none !important;
    }

    .question-main-image-remove-btn:disabled,
    .matching-image-remove-btn:disabled,
    .profile-avatar-remove-btn:disabled {
      opacity: 0.45;
      pointer-events: none;
    }

    .card-subtitle-separator {
      height: 1px;
      background: var(--border-color);
      margin: 10px 0 14px;
    }
    .stats-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 16px;
      margin-top: 16px;
      margin-bottom: 20px;
    }
    .stats-period-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .stats-period-label {
      font-size: 14px;
      color: var(--text-main);
      font-weight: 500;
    }
    .stats-period-btns {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }
    .stats-period-btn {
      padding: 6px 12px;
      font-size: 13px;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      background: var(--surface-elevated);
      color: var(--text-main);
    }
    .stats-period-btn:hover {
      background: var(--deep-alpha-06);
      border-color: var(--blue-main);
    }
    .stats-period-active {
      background: var(--deep-alpha-10);
      border-color: var(--blue-main);
      color: var(--blue-main);
    }
    .stats-dates-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .stats-date-label {
      font-size: 14px;
      color: var(--text-main);
    }
    .stats-date-input {
      padding: 6px 10px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 14px;
      color: var(--text-main);
      background: var(--surface-input);
    }
    .stats-date-input:focus {
      outline: none;
      border-color: var(--blue-main);
    }
    .stats-actions-row {
      margin-left: auto;
    }
    .stats-recalc-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      font-size: 14px;
    }
    .stats-recalc-btn svg {
      flex-shrink: 0;
    }
    .stats-chart-block {
      width: 100%;
      min-height: 220px;
      border: 1px solid var(--border-color);
      border-radius: 12px;
      background: var(--surface-card);
      padding: 16px;
      margin-bottom: 20px;
    }
    .stats-chart-inner {
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      gap: 8px;
      min-height: 200px;
    }
    .stats-chart-bar-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      min-width: 28px;
    }
    .stats-chart-bar {
      width: 20px;
      min-height: 4px;
      border-radius: 4px 4px 0 0;
      background: var(--blue-main);
    }
    .stats-chart-label {
      font-size: 11px;
      color: var(--text-muted);
    }
    .stats-chart-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 200px;
      color: var(--text-muted);
      font-size: 14px;
      border: 1px dashed var(--border-color);
      border-radius: 10px;
      background: var(--surface-panel);
      padding: 12px;
    }
    .stats-correct-block {
      width: 100%;
      margin-top: 28px;
      padding: 18px;
      border: 1px solid var(--border-color);
      border-radius: 12px;
      background: var(--surface-muted);
    }
    .stats-correct-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }
    .stats-correct-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-main);
      margin: 0;
    }
    .stats-correct-menu {
      color: var(--text-muted);
      display: flex;
      align-items: center;
    }
    .stats-correct-chart-area {
      display: flex;
      gap: 12px;
      background: var(--surface-card);
      border-radius: 10px;
      padding: 16px;
      min-height: 240px;
    }
    .stats-correct-y-axis {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }
    .stats-correct-y-label {
      font-size: 12px;
      color: var(--text-muted);
      white-space: nowrap;
      max-width: 80px;
      text-align: center;
      line-height: 1.2;
    }
    .stats-correct-y-ticks {
      display: flex;
      flex-direction: column-reverse;
      align-items: flex-end;
      justify-content: space-between;
      height: 200px;
      font-size: 12px;
      color: var(--text-muted);
    }
    .stats-correct-y-tick {
      flex-shrink: 0;
    }
    .stats-correct-bars-wrap {
      flex: 1;
      min-width: 0;
      position: relative;
    }
    .stats-correct-grid {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 200px;
      pointer-events: none;
    }
    .stats-correct-grid-line {
      position: absolute;
      left: 0;
      right: 0;
      height: 1px;
      background: var(--stats-grid-line);
    }
    .stats-correct-bars-inner {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      gap: 10px;
      height: 200px;
    }
    .stats-correct-bar-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      flex: 1;
      min-width: 24px;
    }
    .stats-correct-bar {
      width: 100%;
      max-width: 36px;
      min-height: 4px;
      border-radius: 4px 4px 0 0;
      background: var(--chart-bar-fill);
    }
    .stats-correct-x-tick {
      font-size: 12px;
      color: var(--text-muted);
    }
    .stats-correct-legend {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 14px;
      font-size: 13px;
      color: var(--text-muted);
    }
    .stats-correct-legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--chart-bar-fill);
    }
    .stats-table-block {
      width: 100%;
      margin-top: 28px;
      padding: 18px;
      border: 1px solid var(--border-color);
      border-radius: 12px;
      background: var(--surface-muted);
    }
    .stats-table-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }
    .stats-table-toolbar-left {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .stats-table-perpage-label {
      font-size: 14px;
      color: var(--text-muted);
    }
    .stats-table-perpage {
      padding: 6px 10px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 14px;
      background: var(--surface-input);
      color: var(--text-main);
    }
    .stats-table-perpage-suffix {
      font-size: 14px;
      color: var(--text-muted);
    }
    .stats-table-search {
      padding: 6px 10px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 14px;
      min-width: 180px;
      background: var(--surface-input);
      color: var(--text-main);
    }
    .stats-table-search:focus {
      outline: none;
      border-color: var(--blue-main);
    }
    .stats-table-toolbar-right {
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }
    .stats-table-btn {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: 6px 14px;
      font-size: 14px;
    }
    .stats-table th {
      font-weight: 600;
      color: var(--text-main);
      background: var(--surface-table-head);
    }
    .stats-table tbody tr:hover {
      background: var(--table-row-hover);
    }
    .stats-table-cell-check,
    .stats-table-th-check {
      width: 36px;
      text-align: center;
    }
    .stats-table-cell-num,
    .stats-table-th-num { width: 48px; }
    .stats-table-cell-user,
    .stats-table-th-user { min-width: 120px; }
    .stats-table-cell-ip,
    .stats-table-th-ip { min-width: 100px; }
    .stats-table-cell-date,
    .stats-table-th-date { min-width: 130px; }
    .stats-table-cell-duration,
    .stats-table-th-duration { min-width: 90px; }
    .stats-table-cell-correct,
    .stats-table-th-correct { min-width: 80px; }
    .stats-table-cell-pct,
    .stats-table-th-pct { min-width: 70px; }
    .stats-table-empty {
      text-align: center;
      color: var(--text-muted);
      padding: 24px !important;
      background: var(--surface-panel);
      border: 1px dashed var(--border-color);
      border-radius: var(--radius-field);
    }
    .stats-empty-state {
      margin: 0 0 18px;
      padding: 14px 16px;
      border: 1px dashed var(--border-color);
      border-radius: var(--radius-field);
      background: var(--surface-panel);
    }
    .stats-empty-title {
      margin: 0 0 6px;
      font-size: 15px;
      font-weight: 700;
      color: var(--text-main);
    }
    .stats-empty-lead {
      margin: 0;
      font-size: 13px;
      line-height: 1.45;
      color: var(--text-muted);
      max-width: 62ch;
    }
    .stats-table-pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 14px;
    }
    .stats-table-page-num {
      font-size: 14px;
      color: var(--text-muted);
    }
    .stats-table-page-btn {
      min-width: 36px;
      padding: 6px 10px;
    }
    .stats-detail-table-block {
      margin-top: 28px;
    }
    .stats-detail-table-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-main);
      margin: 0 0 14px 0;
    }
    .stats-detail-th-answers {
      min-width: 280px;
      max-width: 400px;
    }
    .stats-detail-cell-answers {
      font-size: 13px;
      line-height: 1.5;
      white-space: normal;
      vertical-align: top;
      max-width: 400px;
    }
    .stats-detail-cell-answers br {
      display: block;
      content: "";
      margin-top: 6px;
    }
    .stats-back-row {
      margin-top: 24px;
    }

    .report-error-overlay {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .report-error-overlay[hidden] {
      display: none !important;
    }

    .report-error-backdrop {
      position: absolute;
      inset: 0;
      background: var(--backdrop-overlay);
      cursor: pointer;
    }

    .report-error-card {
      position: relative;
      z-index: 1;
      background: var(--surface-modal);
      border-radius: var(--ui-radius-lg);
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-modal);
      padding: 18px 20px;
      max-width: 420px;
      width: 100%;
    }

    .run-test-issue-card {
      max-width: 520px;
    }

    .run-test-issue-text {
      min-height: 110px;
    }

    .report-error-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 0;
    }

    .report-error-separator {
      border-bottom: 1px solid var(--border-color);
      margin: 10px 0 14px;
    }

    .report-error-label {
      display: block;
      font-size: 14px;
      color: var(--text-main);
      margin-bottom: 8px;
    }

    .report-error-text {
      width: 100%;
      min-height: 80px;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid var(--border-color);
      background: var(--surface-input);
      color: var(--text-main);
      font-size: 14px;
      font-family: inherit;
      resize: vertical;
    }

    .report-error-buttons {
      margin-top: 16px;
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    .issue-report-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 14px;
    }

    .issue-report-counter {
      font-size: 13px;
      color: var(--text-muted);
      font-weight: 600;
    }

    .issue-report-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .issue-report-item {
      border: 1px solid var(--border-color);
      background: var(--surface-card);
      border-radius: 12px;
      padding: 12px 14px;
      box-shadow: var(--shadow-card);
      animation: uiEditorCardIn 0.42s var(--ease-ui) both;
    }

    .issue-report-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }

    .issue-report-user {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-main);
    }

    .issue-report-date {
      font-size: 12px;
      color: var(--text-muted);
      white-space: nowrap;
    }

    .issue-report-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 10px;
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 8px;
    }

    .issue-report-question {
      font-size: 13px;
      color: var(--text-main);
      padding: 8px 10px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--surface-panel);
      margin-bottom: 8px;
    }

    .issue-report-comment {
      margin: 0;
      color: var(--text-main);
      line-height: 1.5;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .issue-report-actions {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
    }

    .issue-report-delete {
      min-height: 36px;
      padding: 7px 12px;
    }

    .issue-report-empty {
      text-align: center;
      border: 1px dashed var(--border-color);
      background: var(--surface-panel);
      border-radius: 12px;
      padding: 20px 16px;
    }

    .issue-report-empty-title {
      margin: 0 0 8px;
      font-size: 17px;
      color: var(--text-main);
    }

    .issue-report-empty-lead {
      margin: 0;
      color: var(--text-muted);
      line-height: 1.5;
      max-width: 52ch;
      margin-left: auto;
      margin-right: auto;
    }

    .tests-empty-state {
      text-align: center;
      padding: 28px 12px 8px;
      max-width: 480px;
      margin: 0 auto;
    }

    .tests-empty-visual {
      color: var(--blue-main);
      margin-bottom: 18px;
      display: flex;
      justify-content: center;
    }

    .tests-empty-icon {
      display: block;
    }

    .tests-empty-title {
      margin: 0 0 12px;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text-main);
    }

    .tests-empty-lead {
      margin: 0 0 22px;
    }

    .tests-empty-actions {
      display: flex;
      justify-content: center;
    }

    .tests-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
    }

    .test-cover-controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
    }

    .test-cover-scale-row {
      margin-top: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      color: var(--text-muted);
    }

    #testCoverScaleInput {
      flex: 1;
      accent-color: var(--blue-main);
    }

    #testCoverScaleValue {
      min-width: 44px;
      font-weight: 600;
      color: var(--blue-main);
    }

    .test-card-cover--editor-preview.test-cover-preview--draggable {
      cursor: grab;
    }

    .test-card-cover--editor-preview.test-cover-preview--dragging {
      cursor: grabbing;
    }

    .test-card {
      padding: 0 0 14px;
      background: var(--surface-test-card);
      border: 1px solid var(--border-color);
      border-radius: var(--editor-radius);
      display: flex;
      flex-direction: column;
      gap: 10px;
      overflow: hidden;
      box-shadow: var(--shadow-test-card);
      transition:
        box-shadow var(--dur-ui) var(--ease-ui),
        transform var(--dur-ui) var(--ease-ui),
        border-color var(--dur-ui) var(--ease-ui);
    }

    .test-card--restricted {
      border-color: color-mix(in srgb, #d32f2f 28%, var(--border-color));
    }

    .test-card--open {
      border-color: color-mix(in srgb, #2e7d32 28%, var(--border-color));
    }

    @media (hover: hover) and (pointer: fine) {
      .tests-grid .test-card:hover {
        border-color: var(--accent-alpha-18);
        box-shadow: var(--shadow-test-card-hover);
        transform: translateY(-2px);
      }
    }

    .test-card-cover {
      position: relative;
      width: 100%;
      height: 160px;
      background: var(--surface-test-cover);
    }

    .test-card-cover-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, var(--deep-alpha-15), var(--deep-alpha-52));
    }

    .test-card-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--text-main);
      margin: 0;
      flex: 1 1 auto;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .test-card-title-wrap {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      flex: 1 1 auto;
    }

    .test-card-access-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 20px;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.01em;
      white-space: nowrap;
      border: 1px solid transparent;
      flex-shrink: 0;
    }

    .test-card-access-badge--restricted {
      color: #d32f2f;
      background: rgba(211, 47, 47, 0.12);
      border-color: rgba(211, 47, 47, 0.22);
    }

    .test-card-access-badge--open {
      color: #2e7d32;
      background: rgba(46, 125, 50, 0.12);
      border-color: rgba(46, 125, 50, 0.24);
    }

    .test-card-meta-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin: 0 14px;
    }

    .test-card-meta-right {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
      position: relative;
    }

    .test-card-access-lock {
      display: inline-flex;
      align-items: center;
      color: var(--blue-dark);
      flex-shrink: 0;
    }

    .test-card-access-lock--restricted {
      color: #d32f2f;
    }

    .test-card-access-lock--open {
      color: #2e7d32;
    }

    .test-card-lock-icon {
      display: block;
    }

    .test-card-participants {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: var(--blue-dark);
      font-size: 13px;
      font-weight: 500;
    }

    .test-card-participants-icon {
      display: block;
      flex-shrink: 0;
    }

    .test-card-participants-count {
      line-height: 1;
      min-width: 1ch;
    }

    .test-card-date {
      font-size: 13px;
      color: var(--blue-dark);
      font-weight: 500;
      margin: 0;
    }

    .test-card-link-row {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border-color);
    }

    .test-card-link-label {
      display: block;
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 6px;
    }

    .test-card-link-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      align-items: center;
    }

    .test-card-link-input {
      flex: 1;
      min-width: 120px;
      padding: var(--space-2) 10px;
      font-size: 13px;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-field);
      background: var(--surface-input);
      color: var(--text-main);
    }

    .test-card-link-open {
      flex-shrink: 0;
      text-decoration: none;
      white-space: nowrap;
    }

    .tests-actions-row {
      margin-top: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      flex-wrap: nowrap;
      margin-left: 14px;
      margin-right: 14px;
    }

    .tests-actions-row-student {
      justify-content: stretch;
    }

    .tests-actions-row-student .btn-run-test {
      flex: 1;
      min-width: 0;
    }

    .tests-actions-row .btn-run-test {
      flex: 1 1 auto;
      min-width: 0;
    }

    @media (max-width: 720px) {
      .tests-actions-row {
        margin-left: 10px;
        margin-right: 10px;
      }
      .test-card-meta-row {
        margin-left: 10px;
        margin-right: 10px;
      }
    }

    .tests-icon-buttons {
      display: flex;
      gap: 4px;
    }

    .test-card-cover .test-card-menu-wrap {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 3;
    }

    .test-card-menu-trigger {
      min-width: 38px;
      min-height: 38px;
      padding: 0 8px;
      border-radius: 10px;
      background: rgba(7, 52, 91, 0.62);
      border: 1px solid rgba(255, 255, 255, 0.34);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      color: #fff;
    }

    .test-card-menu-trigger:hover {
      background: rgba(7, 52, 91, 0.78);
    }

    .test-card-menu {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      min-width: 196px;
      padding: 6px;
      border-radius: 10px;
      border: 1px solid var(--border-color);
      background: var(--surface-card);
      box-shadow: var(--shadow-elevated);
      display: flex;
      flex-direction: column;
      gap: 2px;
      z-index: 20;
      transform-origin: top right;
      animation: testCardMenuIn 0.24s var(--ease-ui) both;
    }

    .test-card-menu[hidden] {
      display: none !important;
      animation: none !important;
    }

    .test-card-menu-wrap:not(.menu-open) .test-card-menu {
      pointer-events: none;
    }

    .test-card-menu-wrap.menu-open .test-card-menu-trigger {
      background: rgba(7, 52, 91, 0.84);
      transform: translateY(-1px);
    }

    @keyframes testCardMenuIn {
      from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
        filter: blur(1px);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    .tests-actions-row .btnTestEdit {
      flex-shrink: 0;
    }

    .test-card-menu-item {
      appearance: none;
      width: 100%;
      border: none;
      background: transparent;
      color: var(--text-main);
      text-align: left;
      padding: 8px 10px;
      border-radius: 8px;
      font: inherit;
      font-size: 14px;
      cursor: pointer;
      transition: background var(--dur-ui-fast) var(--ease-ui), color var(--dur-ui-fast) var(--ease-ui);
    }

    .test-card-menu-item:hover {
      background: var(--accent-alpha-08);
    }

    .test-card-menu-item-danger {
      color: var(--accent-error);
    }

    .test-card-menu-item-danger:hover {
      background: color-mix(in srgb, var(--accent-error) 10%, transparent);
    }

    .test-icon-btn {
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      padding: 0;
      line-height: 1;
      font-size: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 44px;
    }

    @media (max-width: 520px) {
      .btn-icon-only,
      .btn-invitations-export,
      .btn-invitations-more {
        min-width: 44px;
        min-height: 44px;
      }

      .test-icon-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        flex: 0 0 44px;
      }
    }

    .report-question-icon {
      display: inline-block;
      font-weight: 700;
      font-size: 16px;
      line-height: 1;
    }

    .save-toast {
      position: fixed;
      right: calc(16px + env(safe-area-inset-right, 0px));
      top: calc(88px + env(safe-area-inset-top, 0px));
      background: var(--blue-main);
      color: #fff;
      padding: 14px 22px;
      border-radius: var(--ui-radius-lg);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: var(--shadow-elevated);
      font-size: 15px;
      line-height: 1.4;
      opacity: 0;
      transform: translateY(-10px);
      pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease;
      z-index: 9999;
      max-width: min(360px, calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    }

    .save-toast-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .answer-row {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) auto var(--control-height) var(--control-height) auto;
      column-gap: var(--space-2);
      align-items: center;
    }

    @media (max-width: 768px) {
      .matching-columns {
        grid-template-columns: 1fr;
        row-gap: var(--space-4);
      }

      .answer-row {
        grid-template-columns: minmax(0, 1fr) auto var(--control-height) var(--control-height);
        row-gap: var(--space-2);
      }

      .answer-score-wrapper {
        grid-column: 1 / -1;
      }
    }

    .answer-text {
      width: 100%;
    }

    .answer-correct {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: var(--text-muted);
    }

    .answer-score-wrapper {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: var(--text-muted);
      min-width: 110px;
      justify-content: flex-end;
    }

    .answer-score {
      max-width: 70px;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      padding: 6px 8px;
      font-size: 13px;
      background: var(--surface-input);
      outline: none;
      text-align: center;
    }

    .question-add-btn::before,
    .question-remove-btn::before,
    .answer-add::before,
    .answer-remove::before,
    .matching-add-left::before,
    .matching-remove-left::before,
    .matching-add-right::before,
    .matching-remove-right::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 14px;
      height: 2px;
      background: currentColor;
      transform: translate(-50%, -50%);
      border-radius: 2px;
      pointer-events: none;
    }

    .question-add-btn::after,
    .answer-add::after,
    .matching-add-left::after,
    .matching-add-right::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 2px;
      height: 14px;
      background: currentColor;
      transform: translate(-50%, -50%);
      border-radius: 2px;
      pointer-events: none;
    }

    .answers-run-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-top: 4px;
    }

    .answer-option {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      color: var(--text-main);
    }

    .save-test-block {
      margin-top: var(--editor-gap-md);
      padding-top: var(--editor-gap-md);
      border-top: 1px solid var(--border-color);
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: var(--editor-gap-sm);
      flex-wrap: wrap;
    }

    @media (prefers-reduced-motion: reduce) {
      .test-editor-page > .card {
        animation: none !important;
      }

      .test-section-active,
      .question-section-active {
        animation: none !important;
      }

      .test-card {
        transition: none !important;
      }

      .tests-grid .test-card:hover {
        transform: none !important;
        box-shadow: var(--shadow-test-card) !important;
        border-color: var(--border-color) !important;
      }

      .editor-subcard {
        transition: none !important;
      }

      .test-editor-questions-host > .questions-card-spacing.question-card-entering,
      .test-editor-questions-host > .questions-card-spacing.question-card-entering-active {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
      }

      .test-editor-questions-host > .questions-card-spacing.question-card-leaving,
      .test-editor-questions-host > .questions-card-spacing.question-card-leaving-active {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
      }

      .ip-modal:not([hidden]) .ip-modal-backdrop,
      .ip-modal:not([hidden]) .ip-modal-card {
        animation: none !important;
      }
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --blue-main: #4d9eff;
        --blue-light: rgba(77, 158, 255, 0.14);
        --blue-dark: #1e3a5f;
        --text-main: #e8eaed;
        --text-muted: #c1cada;
        --text-label: #d5dde7;
        --placeholder-fg: #8b96a8;
        --border-color: #3d4d63;
        --surface-page: #0f141c;
        --surface-card: #1a2433;
        --surface-header: rgba(15, 20, 28, 0.92);
        --surface-intro: #0f141c;
        --surface-footer: rgba(15, 20, 28, 0.94);
        --surface-modal: #1a2433;
        --surface-elevated: #242f42;
        --surface-input: #151c28;
        --input-autofill-bg: #151c28;
        --shadow-card: 0 12px 36px rgba(0, 0, 0, 0.35);
        --shadow-elevated: 0 18px 50px rgba(0, 0, 0, 0.45);
        --shadow-modal: 0 20px 56px rgba(0, 0, 0, 0.55);
        --shadow-header: 0 4px 28px rgba(0, 0, 0, 0.45);
        --shadow-test-card: 0 4px 18px rgba(0, 0, 0, 0.28);
        --shadow-test-card-hover: 0 14px 40px rgba(0, 0, 0, 0.42);
        --backdrop-overlay: rgba(0, 0, 0, 0.55);
        --accent-error: #f87171;
        --surface-invalid: rgba(248, 113, 113, 0.14);
        --surface-muted: rgba(255, 255, 255, 0.04);
        --surface-panel: rgba(255, 255, 255, 0.06);
        --surface-table-head: #242f42;
        --surface-table-wrap: #151c22;
        --surface-question-tab: #242f42;
        --surface-test-card: #1c2636;
        --surface-test-cover: #1a2332;
        --surface-cover-preview: #151c28;
        --table-row-hover: rgba(77, 158, 255, 0.1);
        --muted-fg: #9aa6b5;
        --focus-invalid-ring: rgba(248, 113, 113, 0.2);
        --surface-explanation: rgba(220, 38, 38, 0.22);
        --accent-danger-strong: #fca5a5;
        --surface-run-soft: rgba(255, 255, 255, 0.045);
        --surface-success-soft: rgba(34, 197, 94, 0.14);
        --accent-success: #4ade80;
        --accent-success-muted: #86efac;
        --surface-audio-wrap: rgba(77, 158, 255, 0.08);
        --surface-tab-track: rgba(255, 255, 255, 0.06);
        --gauge-rest: rgba(255, 255, 255, 0.12);
        --gradient-image-1: rgba(77, 158, 255, 0.1);
        --gradient-image-2: rgba(26, 36, 51, 0.95);
        --chart-bar-fill: #4d9eff;
        --stats-grid-line: rgba(255, 255, 255, 0.1);
        --page-blob-1: rgba(77, 158, 255, 0.12);
        --page-blob-2: rgba(26, 36, 51, 0.85);
        --page-blob-3: rgba(77, 158, 255, 0.06);
        --accent-alpha-04: rgba(77, 158, 255, 0.08);
        --accent-alpha-06: rgba(77, 158, 255, 0.1);
        --accent-alpha-08: rgba(77, 158, 255, 0.12);
        --accent-alpha-10: rgba(77, 158, 255, 0.14);
        --accent-alpha-12: rgba(77, 158, 255, 0.2);
        --accent-alpha-14: rgba(77, 158, 255, 0.18);
        --accent-alpha-15: rgba(77, 158, 255, 0.2);
        --accent-alpha-16: rgba(77, 158, 255, 0.22);
        --accent-alpha-18: rgba(77, 158, 255, 0.22);
        --accent-alpha-35: rgba(77, 158, 255, 0.38);
        --accent-alpha-40: rgba(77, 158, 255, 0.45);
        --accent-alpha-45: rgba(125, 180, 255, 0.72);
        --accent-alpha-55: rgba(125, 200, 255, 0.78);
        --accent-spinner-track: rgba(77, 158, 255, 0.35);
        --deep-alpha-06: rgba(77, 158, 255, 0.12);
        --deep-alpha-08: rgba(77, 158, 255, 0.14);
        --deep-alpha-15: rgba(0, 0, 0, 0.35);
        --deep-alpha-26: rgba(77, 158, 255, 0.24);
        --deep-alpha-52: rgba(0, 0, 0, 0.72);
        --deep-alpha-10: rgba(77, 158, 255, 0.16);
        --overlay-press: rgba(255, 255, 255, 0.06);
        --pill-border-accent: rgba(77, 158, 255, 0.22);
        --slider-focus-glow: rgba(77, 158, 255, 0.28);
        --accent-navy-soft: rgba(77, 158, 255, 0.08);
      }

      select:focus {
        border-color: var(--blue-main);
        box-shadow: 0 0 0 2px rgba(77, 158, 255, 0.22);
      }

      .field input:focus {
        border-color: var(--blue-main);
        box-shadow: 0 0 0 3px rgba(77, 158, 255, 0.18);
      }

      body {
        background-color: var(--surface-page);
        background-image:
          radial-gradient(ellipse 130% 90% at 50% -18%, var(--page-blob-1), transparent 58%),
          radial-gradient(ellipse 85% 55% at 100% 0%, var(--page-blob-2), transparent 52%),
          radial-gradient(ellipse 70% 50% at 0% 100%, var(--page-blob-3), transparent 48%);
      }

      .intro-subtitle {
        color: var(--text-muted);
      }

      .intro-brand {
        color: var(--blue-main);
      }

      .question-card-theme {
        color: var(--blue-main);
      }

      .test-nav-sub-btn--active:hover {
        background: color-mix(in srgb, var(--blue-main) 78%, #000);
        border-color: color-mix(in srgb, var(--blue-main) 78%, #000);
        color: #fff;
      }

      .btn-tab-active {
        color: var(--blue-main);
      }

      .btn-reset:hover {
        background: color-mix(in srgb, var(--blue-main) 78%, #000);
        border-color: color-mix(in srgb, var(--blue-main) 78%, #000);
      }

      .logo-mark {
        color: var(--blue-main);
        background: var(--accent-alpha-08);
        border-color: var(--accent-alpha-16);
      }

      .save-toast {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.14);
      }

      .ip-modal-header {
        color: #fff;
      }

      .ip-modal-input,
      .report-error-text {
        background: var(--surface-input);
        color: var(--text-main);
        border-color: var(--border-color);
      }

      .answer-score {
        background: var(--surface-input);
        color: var(--text-main);
      }

      .answer-correct,
      .answer-score-wrapper,
      .answer-option {
        color: var(--text-muted);
      }

      .logo-home-btn:focus-visible {
        outline-color: rgba(125, 180, 255, 0.75);
      }

      .header-role-switch,
      .auth-tab-track {
        background: rgba(255, 255, 255, 0.06);
        border-color: var(--border-color);
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
      }

      .card:has(.auth-panel) {
        background: var(--surface-card);
      }

      #authCard.card:not(:has(.test-editor-page)):not(:has(.auth-panel)) {
        background: var(--surface-card);
      }

      .auth-tab-slider {
        background: var(--surface-elevated);
        box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35);
      }

      .header-role-btn-active {
        background: var(--surface-card);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
      }

      .auth-form .auth-input,
      .auth-form .field input[type="text"],
      .auth-form .field input[type="email"],
      .auth-form .field input[type="password"],
      .auth-form .field input[type="tel"] {
        border-color: var(--border-color);
      }

      .auth-form .auth-input:focus,
      .auth-form .field input:focus {
        border-color: rgba(77, 158, 255, 0.55);
        box-shadow: 0 0 0 4px rgba(77, 158, 255, 0.12);
      }

      .btn-ghost:hover {
        background: rgba(255, 255, 255, 0.06);
        color: var(--text-main);
      }

      .rating-table th {
        background: var(--surface-table-head);
        color: var(--text-main);
      }

      .rating-table td {
        color: var(--text-main);
      }

      .invitations-table th {
        background: var(--surface-table-head);
        color: var(--text-main);
      }

      .invitations-table tbody tr:hover {
        background: var(--table-row-hover);
      }

      .rating-row-current {
        background: rgba(77, 158, 255, 0.12);
      }

      .test-card-participants,
      .test-card-date {
        color: var(--blue-main);
      }

      .test-card-access-lock--restricted {
        color: #ff6b6b;
      }

      .test-card-access-lock--open {
        color: #5ad89a;
      }

      .test-card-access-badge--restricted {
        color: #ff8f8f;
        background: rgba(255, 107, 107, 0.16);
        border-color: rgba(255, 107, 107, 0.3);
      }

      .test-card-access-badge--open {
        color: #8fe8bc;
        background: rgba(90, 216, 154, 0.16);
        border-color: rgba(90, 216, 154, 0.32);
      }

      #testCoverScaleValue {
        color: var(--blue-main);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .auth-tab-slider,
      .auth-view,
      .auth-lead-stack .auth-lead,
      .auth-footer-stack .auth-footer-hint {
        transition: none !important;
      }

      .card-enter {
        animation: none !important;
        filter: none !important;
        will-change: auto !important;
      }

      #authShellRoot.auth-mode-switching[data-active="login"] .auth-view-login,
      #authShellRoot.auth-mode-switching[data-active="login"] .auth-lead-login,
      #authShellRoot.auth-mode-switching[data-active="login"] .auth-footer-login,
      #authShellRoot.auth-mode-switching[data-active="register"] .auth-view-register,
      #authShellRoot.auth-mode-switching[data-active="register"] .auth-lead-register,
      #authShellRoot.auth-mode-switching[data-active="register"] .auth-footer-register {
        animation: none !important;
        filter: none !important;
        will-change: auto !important;
      }

      #authShellRoot.auth-mode-switching[data-active="register"] .auth-view-register .auth-register-extra,
      #authShellRoot.auth-mode-switching[data-active="register"] .auth-view-register .auth-shared-field,
      #authShellRoot.auth-mode-switching[data-active="login"] .auth-view-login .auth-shared-field,
      .test-section-entering {
        animation: none !important;
        filter: none !important;
        will-change: auto !important;
      }

      .auth-submit-spinner {
        animation: none !important;
      }

      .page,
      .intro-overlay,
      .intro-content,
      .intro-brand,
      .intro-subtitle,
      .intro-start-btn {
        transition: none !important;
      }

      .intro-start-btn {
        animation: none !important;
      }

      .save-toast {
        transition: none !important;
      }

      .btn-icon-only.btn-busy::after,
      .btn-invitations-export.btn-busy::after,
      .btn-invitations-more.btn-busy::after,
      .test-icon-btn.btn-busy::after {
        animation: none !important;
      }
    }