/* ==========================================================
   NOYTRIX MOBILE V1

   ONE mobile CSS owner.
   Only <= 820px.
   Desktop is untouched.
   ========================================================== */


@media (max-width: 820px), (hover: none) and (pointer: coarse) {

  :root {
    --nxm-bg: #020711;
    --nxm-panel: #0b111d;
    --nxm-panel-2: #111827;
    --nxm-line: rgba(255,255,255,.10);
    --nxm-line-soft: rgba(255,255,255,.065);
    --nxm-text: #f7f8fb;
    --nxm-muted: #929cad;
    --nxm-gold: #ffb522;

    --nxm-header: 64px;
  }


  /* ========================================================
     GLOBAL
     ======================================================== */

  html {
    width: 100% !important;
    min-width: 0 !important;

    font-size: 16px !important;

    overflow-x: hidden !important;
  }


  body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    background:
      radial-gradient(
        circle at 50% -160px,
        rgba(26, 61, 117, .18),
        transparent 480px
      ),
      var(--nxm-bg) !important;

    color: var(--nxm-text) !important;

    -webkit-text-size-adjust: 100%;
  }


  body.nxm-menu-open {
    overflow: hidden !important;
  }


  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }


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


  /* ========================================================
     HIDE DESKTOP NAVIGATION / HEADER
     ======================================================== */

  body.nxm-ready .sidebar {
    display: none !important;
  }


  body.nxm-ready .workspace-header {
    display: none !important;
  }


  /* ========================================================
     APP
     ======================================================== */

  body.nxm-ready .app-shell {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 100dvh !important;

    display: block !important;
  }


  body.nxm-ready .workspace {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 100dvh !important;

    margin: 0 !important;

    padding:
      calc(var(--nxm-header) + 18px)
      18px
      110px !important;

    overflow: visible !important;
  }


  body.nxm-ready .screen {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    overflow: visible !important;
  }


  /* ========================================================
     MOBILE HEADER
     ======================================================== */

  .nxm-topbar {
    position: fixed;

    z-index: 10000;

    top: 0;
    left: 0;
    right: 0;

    height:
      calc(
        var(--nxm-header) +
        env(safe-area-inset-top)
      );

    padding:
      env(safe-area-inset-top)
      12px
      0;

    display: grid;

    grid-template-columns:
      42px
      minmax(0, 1fr)
      auto;

    align-items: center;

    gap: 8px;

    border-bottom:
      1px solid
      var(--nxm-line-soft);

    background:
      rgba(2, 7, 17, .92);

    backdrop-filter:
      blur(20px);

    -webkit-backdrop-filter:
      blur(20px);
  }


  .nxm-menu-button {
    width: 42px;
    height: 42px;

    padding: 0;

    display: grid;

    place-items: center;

    border: 0;

    border-radius: 12px;

    background: transparent;

    color: #fff;

    cursor: pointer;
  }


  .nxm-menu-icon {
    width: 23px;

    display: grid;

    gap: 5px;
  }


  .nxm-menu-icon span {
    width: 23px;
    height: 2px;

    display: block;

    border-radius: 20px;

    background: #e9edf5;
  }


  .nxm-brand {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 8px;

    color: #fff;

    text-decoration: none;
  }


  .nxm-brand-mark {
    width: 26px;
    height: 26px;

    flex: 0 0 26px;

    display: grid;

    place-items: center;

    border:
      1px solid
      rgba(255,181,34,.38);

    border-radius: 9px;

    color: var(--nxm-gold);

    font-size: 12px;
    font-weight: 900;

    background:
      rgba(255,181,34,.07);
  }


  .nxm-brand-text {
    overflow: hidden;

    color: #fff;

    font-size: 14px;
    font-weight: 900;

    letter-spacing: .12em;

    white-space: nowrap;

    text-overflow: ellipsis;
  }


  .nxm-header-actions {
    display: flex;

    align-items: center;

    gap: 6px;
  }


  .nxm-language {
    height: 38px;

    padding: 3px;

    display: flex;

    align-items: center;

    gap: 1px;

    border:
      1px solid
      var(--nxm-line);

    border-radius: 12px;

    background:
      rgba(255,255,255,.035);
  }


  .nxm-language button {
    min-width: 30px;
    height: 30px;

    padding: 0 5px;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: #8994a7;

    font-size: 10px;
    font-weight: 800;

    cursor: pointer;
  }


  .nxm-language button.active {
    background:
      rgba(255,181,34,.13);

    color: var(--nxm-gold);
  }


  .nxm-auth {
    height: 38px;

    padding: 0 13px;

    border:
      1px solid
      rgba(255,255,255,.14);

    border-radius: 12px;

    background:
      rgba(255,255,255,.035);

    color: #fff;

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;

    cursor: pointer;
  }


  /* ========================================================
     CHECK HOME
     ======================================================== */

  body.nxm-ready #screen-check {
    min-height:
      calc(
        100dvh -
        var(--nxm-header) -
        116px
      ) !important;
  }


  body.nxm-ready
  #screen-check:not(.conversation-mode)
  .check-v2-layout,

  body.nxm-ready
  #screen-check:not(.conversation-mode)
  .check-v2-main {
    width: 100% !important;
    max-width: 100% !important;
  }


  body.nxm-ready
  #screen-check:not(.conversation-mode)
  .check-v2-main {
    min-height:
      calc(
        100dvh -
        var(--nxm-header) -
        126px
      ) !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;
  }


  /* ========================================================
     HERO
     ======================================================== */

  body.nxm-ready
  #screen-check:not(.conversation-mode)
  .check-v2-hero {
    width: 100% !important;
    max-width: 560px !important;

    margin:
      -42px
      auto
      150px !important;

    padding: 0 !important;

    text-align: center !important;
  }


  body.nxm-ready
  #screen-check:not(.conversation-mode)
  .check-v2-hero::before {
    width: 420px !important;
    height: 260px !important;

    top: 44% !important;
    left: 50% !important;

    transform:
      translate(-50%, -50%) !important;

    opacity: .7 !important;
  }


  body.nxm-ready
  #screen-check:not(.conversation-mode)
  .check-v2-hero .eyebrow {
    width: max-content !important;
    max-width: 100% !important;

    margin:
      0
      auto
      18px !important;

    padding:
      7px
      11px !important;

    border-radius: 999px !important;

    font-size: 9px !important;
    line-height: 1.2 !important;

    letter-spacing: .12em !important;

    white-space: normal !important;
  }


  body.nxm-ready
  #screen-check:not(.conversation-mode)
  .check-v2-hero h2 {
    width: 100% !important;
    max-width: 520px !important;

    margin:
      0
      auto !important;

    color: #f5f7fb !important;

    font-size:
      clamp(
        38px,
        10.5vw,
        54px
      ) !important;

    font-weight: 850 !important;

    line-height: .98 !important;

    letter-spacing:
      -.045em !important;

    text-align: center !important;

    text-wrap: balance;
  }


  body.nxm-ready
  #screen-check:not(.conversation-mode)
  .check-v2-hero h2 strong {
    color: var(--nxm-gold) !important;
  }


  body.nxm-ready
  #screen-check:not(.conversation-mode)
  .check-v2-hero > p:last-child {
    width: 100% !important;
    max-width: 460px !important;

    margin:
      22px
      auto
      0 !important;

    color: var(--nxm-muted) !important;

    font-size: 15px !important;

    line-height: 1.55 !important;

    letter-spacing: 0 !important;

    text-align: center !important;
  }


  /* ========================================================
     CHATGPT-LIKE BOTTOM COMPOSER
     ======================================================== */

  body.nxm-ready
  #screen-check.active:not(.conversation-mode)
  .scan-box-v2 {
    position: fixed !important;

    z-index: 8000 !important;

    left: 12px !important;
    right: 12px !important;

    bottom:
      calc(
        12px +
        env(safe-area-inset-bottom)
      ) !important;

    width: auto !important;
    max-width: 680px !important;

    margin:
      0
      auto !important;

    padding: 0 !important;

    background: transparent !important;
  }


  body.nxm-ready
  #screen-check.active:not(.conversation-mode)
  .scan-input-row {
    width: 100% !important;

    min-height: 68px !important;

    padding:
      7px
      7px
      7px
      17px !important;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      54px !important;

    align-items: center !important;

    gap: 7px !important;

    border:
      1px solid
      rgba(255,255,255,.12) !important;

    border-radius: 24px !important;

    background:
      #171b21 !important;

    box-shadow:
      0 22px 60px
      rgba(0,0,0,.42) !important;
  }


  body.nxm-ready
  #screen-check.active:not(.conversation-mode)
  .scan-composer {
    min-width: 0 !important;
  }


  body.nxm-ready
  #screen-check.active:not(.conversation-mode)
  .scan-composer input {
    width: 100% !important;
    height: 54px !important;

    padding: 0 !important;

    border: 0 !important;

    outline: 0 !important;

    background: transparent !important;

    color: #fff !important;

    font-size: 16px !important;

    letter-spacing: 0 !important;
  }


  body.nxm-ready
  #screen-check.active:not(.conversation-mode)
  .scan-composer input::placeholder {
    color:
      #8a8f98 !important;

    opacity: 1 !important;
  }


  body.nxm-ready
  #screen-check.active:not(.conversation-mode)
  .submit-scan {
    width: 54px !important;
    height: 54px !important;

    min-width: 54px !important;
    min-height: 54px !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 18px !important;

    background:
      var(--nxm-gold) !important;

    color: #07101e !important;

    box-shadow: none !important;
  }


  body.nxm-ready
  #screen-check.active:not(.conversation-mode)
  .examples,

  body.nxm-ready
  #screen-check.active:not(.conversation-mode)
  .auto-detect-pill {
    display: none !important;
  }


  /* ========================================================
     DRAWER BACKDROP
     ======================================================== */

  .nxm-backdrop {
    position: fixed;

    z-index: 11000;

    inset: 0;

    visibility: hidden;

    opacity: 0;

    background:
      rgba(0,0,0,.58);

    transition:
      opacity .2s ease,
      visibility .2s ease;
  }


  body.nxm-menu-open
  .nxm-backdrop {
    visibility: visible;

    opacity: 1;
  }


  /* ========================================================
     DRAWER
     ======================================================== */

  .nxm-drawer {
    position: fixed;

    z-index: 12000;

    top: 0;
    bottom: 0;
    left: 0;

    width:
      min(
        88vw,
        370px
      );

    min-height: 100dvh;

    padding:
      calc(
        18px +
        env(safe-area-inset-top)
      )
      12px
      calc(
        14px +
        env(safe-area-inset-bottom)
      );

    display: flex;

    flex-direction: column;

    transform:
      translateX(-102%);

    border-right:
      1px solid
      var(--nxm-line-soft);

    background:
      #05080d;

    box-shadow:
      28px 0 70px
      rgba(0,0,0,.42);

    transition:
      transform
      .23s
      cubic-bezier(.22,.75,.25,1);
  }


  body.nxm-menu-open
  .nxm-drawer {
    transform:
      translateX(0);
  }


  .nxm-drawer-head {
    height: 48px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
      0
      8px
      6px;
  }


  .nxm-drawer-brand {
    display: flex;

    align-items: center;

    gap: 9px;

    color: #fff;

    font-size: 15px;
    font-weight: 900;

    letter-spacing: .10em;
  }


  .nxm-close {
    width: 40px;
    height: 40px;

    padding: 0;

    display: grid;

    place-items: center;

    border: 0;

    border-radius: 12px;

    background: transparent;

    color: #aeb6c4;

    font-size: 29px;
    font-weight: 300;

    cursor: pointer;
  }


  .nxm-drawer-nav {
    flex: 1;

    min-height: 0;

    padding:
      12px
      0;

    display: flex;

    flex-direction: column;

    gap: 4px;

    overflow-y: auto;

    scrollbar-width: none;
  }


  .nxm-drawer-nav::-webkit-scrollbar {
    display: none;
  }


  .nxm-drawer-item {
    width: 100%;
    min-height: 48px;

    padding:
      0
      14px;

    display: flex;

    align-items: center;

    gap: 12px;

    border: 0;

    border-radius: 12px;

    background: transparent;

    color: #e8ebf0;

    font-size: 15px;
    font-weight: 500;

    text-align: left;

    cursor: pointer;
  }


  .nxm-drawer-item:hover,
  .nxm-drawer-item.active {
    background:
      rgba(255,255,255,.07);
  }


  .nxm-drawer-item-icon {
    width: 25px;

    flex: 0 0 25px;

    display: grid;

    place-items: center;

    color: #a9b2c0;

    font-size: 17px;
  }


  .nxm-drawer-account {
    padding:
      10px
      4px
      2px;

    border-top:
      1px solid
      var(--nxm-line-soft);
  }


  .nxm-account-button {
    width: 100%;
    min-height: 56px;

    padding:
      8px
      10px;

    display: flex;

    align-items: center;

    gap: 11px;

    border: 0;

    border-radius: 13px;

    background: transparent;

    color: #fff;

    text-align: left;

    cursor: pointer;
  }


  .nxm-account-avatar {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
      linear-gradient(
        135deg,
        #ffb522,
        #dd7b00
      );

    color: #101010;

    font-size: 13px;
    font-weight: 900;
  }


  .nxm-account-copy {
    min-width: 0;

    display: grid;

    gap: 2px;
  }


  .nxm-account-copy strong {
    overflow: hidden;

    color: #f5f6f8;

    font-size: 14px;

    white-space: nowrap;

    text-overflow: ellipsis;
  }


  .nxm-account-copy small {
    color: #858e9e;

    font-size: 12px;
  }


  /* ========================================================
     OTHER SCREENS — FIRST SAFE MOBILE BASE
     ======================================================== */

  body.nxm-ready
  .screen:not(#screen-check) {
    padding-bottom:
      calc(
        30px +
        env(safe-area-inset-bottom)
      ) !important;
  }


  body.nxm-ready
  .screen:not(#screen-check)
  h1,

  body.nxm-ready
  .screen:not(#screen-check)
  h2 {
    max-width: 100% !important;

    font-size:
      clamp(
        28px,
        8vw,
        40px
      ) !important;

    line-height: 1.05 !important;
  }


  body.nxm-ready
  .screen:not(#screen-check)
  img,

  body.nxm-ready
  .screen:not(#screen-check)
  table {
    max-width: 100% !important;
  }


}


/* ==========================================================
   DESKTOP
   Mobile shell never appears.
   ========================================================== */

@media (min-width: 821px) {

  .nxm-topbar,
  .nxm-drawer,
  .nxm-backdrop {
    display: none !important;
  }

}


/* ==========================================================
   MOBILE V1.1
   HEADER + LANGUAGE + FREE STATUS
   ========================================================== */

@media (max-width: 820px), (hover: none) and (pointer: coarse) {


  /* ========================================================
     REMOVE NX BADGE + NOYTRIX NAME FROM TOP HEADER
     Hamburger stays.
     ======================================================== */

  .nxm-topbar .nxm-brand {
    display: none !important;
  }


  /*
   * Keep right controls at the right edge even though
   * the center brand has been removed.
   */

  .nxm-header-actions {
    grid-column: 3 !important;

    justify-self: end !important;

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;
  }


  /* ========================================================
     LANGUAGE DROPDOWN
     ======================================================== */

  .nxm-language-select {
    appearance: none;
    -webkit-appearance: none;

    width: 66px;
    height: 40px;

    margin: 0;

    padding:
      0
      28px
      0
      13px;

    border:
      1px solid
      rgba(255,255,255,.13);

    border-radius: 12px;

    outline: none;

    background:
      linear-gradient(
        45deg,
        transparent 50%,
        #8994a7 50%
      )
      calc(100% - 14px)
      17px
      / 5px 5px
      no-repeat,

      linear-gradient(
        135deg,
        #8994a7 50%,
        transparent 50%
      )
      calc(100% - 10px)
      17px
      / 5px 5px
      no-repeat,

      rgba(255,255,255,.035);

    color:
      #ffb522;

    font-size:
      12px;

    font-weight:
      850;

    cursor:
      pointer;

    box-shadow:
      none;
  }


  .nxm-language-select:focus {
    border-color:
      rgba(255,181,34,.45);

    box-shadow:
      0 0 0 3px
      rgba(255,181,34,.08);
  }


  .nxm-language-select option {
    background:
      #111722;

    color:
      #f5f7fb;
  }


  /* ========================================================
     SIGN IN — keep clean after removing logo
     ======================================================== */

  .nxm-auth {
    height:
      40px !important;

    padding:
      0
      15px !important;

    border-radius:
      12px !important;
  }


  /* ========================================================
     FREE CHECK STATUS UNDER COMPOSER

     The real guest system already creates:
       .guest-free-dot-v18

     We keep exactly ONE real dot.
     ======================================================== */

  body.nxm-ready
  #screen-check.active:not(.conversation-mode)
  .scan-box-v2
  :has(> .guest-free-dot-v18) {

    width:
      max-content !important;

    max-width:
      calc(100vw - 40px) !important;

    min-height:
      38px !important;

    margin:
      12px
      auto
      0 !important;

    padding:
      7px
      14px !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    gap:
      8px !important;

    border-radius:
      999px !important;

    text-align:
      center !important;
  }


  /*
   * Remove any legacy decorative bullet.
   * This is what can produce the second dot.
   */

  body.nxm-ready
  #screen-check.active:not(.conversation-mode)
  .scan-box-v2
  :has(> .guest-free-dot-v18)::before,

  body.nxm-ready
  #screen-check.active:not(.conversation-mode)
  .scan-box-v2
  :has(> .guest-free-dot-v18)::after {

    content:
      none !important;

    display:
      none !important;
  }


  /*
   * Exactly one real status dot.
   * DO NOT change its background color:
   * existing guest logic may make it orange/green
   * depending on status.
   */

  body.nxm-ready
  #screen-check.active:not(.conversation-mode)
  .guest-free-dot-v18 {

    width:
      8px !important;

    height:
      8px !important;

    min-width:
      8px !important;

    flex:
      0 0 8px !important;

    margin:
      0 !important;

    padding:
      0 !important;

    display:
      block !important;

    border-radius:
      50% !important;
  }


}


/* ==========================================================
   MOBILE V1.2
   COMPACT ONE-SCREEN AUTH
   ========================================================== */

@media (max-width: 820px), (hover: none) and (pointer: coarse) {

  #authModal[hidden] {
    display: none !important;
  }


  /* FULLSCREEN OVERLAY */

  #authModal:not([hidden]) {
    position: fixed !important;

    z-index: 50000 !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    margin: 0 !important;

    padding:
      calc(6px + env(safe-area-inset-top))
      10px
      calc(6px + env(safe-area-inset-bottom)) !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;

    background:
      rgba(0, 4, 10, .94) !important;

    backdrop-filter:
      blur(18px) !important;

    -webkit-backdrop-filter:
      blur(18px) !important;

    isolation: isolate !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
  }


  /* COMPACT CARD — NO SCROLL */

  #authModal:not([hidden])
  > .auth-modal {
    position: relative !important;

    z-index: 50001 !important;

    width:
      min(
        100%,
        520px
      ) !important;

    max-width:
      520px !important;

    height:
      auto !important;

    max-height:
      calc(
        100dvh -
        12px -
        env(safe-area-inset-top) -
        env(safe-area-inset-bottom)
      ) !important;

    margin: 0 !important;

    padding:
      18px
      16px
      16px !important;

    overflow:
      hidden !important;

    border:
      1px solid
      rgba(108,144,205,.28) !important;

    border-radius:
      20px !important;

    background:
      #081126 !important;

    box-shadow:
      0 24px 80px
      rgba(0,0,0,.65) !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
  }


  /* CLOSE */

  #authModal
  .modal-close {
    position: absolute !important;

    z-index: 10 !important;

    top: 12px !important;
    right: 12px !important;

    width: 34px !important;
    height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;

    place-items: center !important;

    border:
      1px solid
      rgba(255,255,255,.09) !important;

    border-radius:
      10px !important;

    background:
      rgba(4,10,22,.88) !important;

    color:
      #aeb8c8 !important;

    font-size:
      23px !important;

    line-height:
      1 !important;
  }


  /* TOP COPY */

  #authModal
  #authEyebrow {
    margin:
      0
      42px
      5px
      0 !important;

    color:
      #ffb522 !important;

    font-size:
      9px !important;

    line-height:
      1.2 !important;

    letter-spacing:
      .12em !important;
  }


  #authModal
  #authTitle {
    margin:
      0
      44px
      6px
      0 !important;

    max-width:
      none !important;

    color:
      #f7f8fb !important;

    font-size:
      27px !important;

    line-height:
      1.02 !important;

    letter-spacing:
      -.025em !important;
  }


  #authModal
  #authDescription {
    margin:
      0
      0
      11px !important;

    color:
      #94a0b5 !important;

    font-size:
      12px !important;

    line-height:
      1.35 !important;
  }


  /* TABS */

  #authModal
  .auth-tabs {
    width:
      100% !important;

    margin:
      0
      0
      11px !important;

    display:
      flex !important;

    gap:
      2px !important;

    overflow:
      hidden !important;

    border-bottom:
      1px solid
      rgba(255,255,255,.09) !important;
  }


  #authModal
  .auth-tabs button {
    flex:
      1 1 0 !important;

    min-width:
      0 !important;

    min-height:
      34px !important;

    padding:
      0
      4px !important;

    font-size:
      12px !important;

    line-height:
      1.1 !important;

    white-space:
      nowrap !important;
  }


  /* FORM */

  #authModal
  #authForm {
    width:
      100% !important;

    display:
      grid !important;

    gap:
      8px !important;
  }


  #authModal
  #authForm label {
    width:
      100% !important;

    display:
      grid !important;

    gap:
      4px !important;

    margin:
      0 !important;

    color:
      #d8deea !important;

    font-size:
      11px !important;

    font-weight:
      700 !important;

    line-height:
      1.2 !important;
  }


  #authModal
  #authForm input {
    width:
      100% !important;

    min-width:
      0 !important;

    height:
      43px !important;

    margin:
      0 !important;

    padding:
      0
      13px !important;

    border:
      1px solid
      rgba(112,147,206,.27) !important;

    border-radius:
      11px !important;

    outline:
      none !important;

    background:
      #0e1c36 !important;

    color:
      #fff !important;

    font-size:
      14px !important;
  }


  #authModal
  #authForm input:focus {
    border-color:
      rgba(71,127,226,.9) !important;

    box-shadow:
      0 0 0 2px
      rgba(64,113,204,.14) !important;
  }


  #authModal
  #authSubmit {
    width:
      100% !important;

    min-height:
      44px !important;

    margin:
      2px
      0
      0 !important;

    padding:
      0
      12px !important;

    border-radius:
      11px !important;

    font-size:
      14px !important;
  }


  /* DIVIDER */

  #authModal
  .auth-divider {
    margin:
      11px
      0 !important;

    font-size:
      11px !important;
  }


  /* GOOGLE */

  #authModal
  .google-button {
    width:
      100% !important;

    min-height:
      44px !important;

    padding:
      0
      12px !important;

    border-radius:
      11px !important;

    font-size:
      14px !important;
  }


  /* STATUS */

  #authModal
  .auth-status {
    margin:
      6px
      0
      0 !important;

    font-size:
      11px !important;

    line-height:
      1.25 !important;
  }


  #authModal
  .auth-footnote {
    margin:
      7px
      0
      0 !important;

    font-size:
      10px !important;

    line-height:
      1.25 !important;
  }


  /* MAIN PAGE CANNOT COVER AUTH */

  body:has(#authModal:not([hidden]))
  #screen-check
  .scan-box-v2 {
    visibility:
      hidden !important;

    opacity:
      0 !important;

    pointer-events:
      none !important;
  }


  body:has(#authModal:not([hidden]))
  .nxm-topbar,

  body:has(#authModal:not([hidden]))
  .nxm-drawer,

  body:has(#authModal:not([hidden]))
  .nxm-backdrop {
    pointer-events:
      none !important;
  }


  html:has(#authModal:not([hidden])),

  body:has(#authModal:not([hidden])) {
    overflow:
      hidden !important;

    overscroll-behavior:
      none !important;
  }

}


/* EXTRA COMPACT FOR SHORT PHONE SCREENS */

@media (max-width: 820px) and (max-height: 720px) {

  #authModal:not([hidden])
  > .auth-modal {
    padding:
      13px
      14px
      12px !important;

    border-radius:
      17px !important;
  }


  #authModal
  #authEyebrow {
    display:
      none !important;
  }


  #authModal
  #authTitle {
    margin-bottom:
      4px !important;

    font-size:
      23px !important;
  }


  #authModal
  #authDescription {
    margin-bottom:
      7px !important;

    font-size:
      11px !important;
  }


  #authModal
  .auth-tabs {
    margin-bottom:
      7px !important;
  }


  #authModal
  .auth-tabs button {
    min-height:
      30px !important;

    font-size:
      11px !important;
  }


  #authModal
  #authForm {
    gap:
      6px !important;
  }


  #authModal
  #authForm label {
    gap:
      3px !important;

    font-size:
      10px !important;
  }


  #authModal
  #authForm input {
    height:
      39px !important;

    font-size:
      13px !important;
  }


  #authModal
  #authSubmit,

  #authModal
  .google-button {
    min-height:
      40px !important;
  }


  #authModal
  .auth-divider {
    margin:
      7px
      0 !important;
  }


  #authModal
  .auth-footnote {
    display:
      none !important;
  }

}


/* ==========================================================
   END MOBILE V1.2
   ========================================================== */


















/* NOYTRIX MOBILE BILLING V1.7 CSS START */

@media (max-width: 820px), (hover: none) and (pointer: coarse) {


  /* ================================================
     BILLING SCREEN
     ================================================ */

  body.nxm-ready:has(#screen-billing)
  .workspace {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;

    margin: 0 !important;

    padding:
      calc(var(--nxm-header) + 8px)
      0
      calc(28px + env(safe-area-inset-bottom))
      !important;

    overflow-x: hidden !important;
  }


  body.nxm-ready
  #screen-billing {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;

    margin: 0 !important;

    padding:
      14px
      16px
      28px !important;

    overflow-x: hidden !important;
  }


  body.nxm-ready
  #screen-billing
  #billingApp {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* ================================================
     REMOVE SIGN IN ON BILLING
     ================================================ */

  body:has(#screen-billing)
  .nxm-topbar-signin-v17,

  #screen-billing
  [data-b52-signin],

  #screen-billing
  .nxm-hide-signin-v17 {
    display: none !important;
  }


  /* ================================================
     MAIN MOBILE LAYOUT
     ================================================ */

  #screen-billing
  .b52-body,

  #screen-billing
  .b52-personal,

  #screen-billing
  .b52-plans,

  #screen-billing
  .b52-plan-grid {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }


  #screen-billing
  .b52-personal {
    display: block !important;
  }


  #screen-billing
  .b52-plan-grid {
    display: block !important;
  }


  /* no giant FREE card */

  #screen-billing
  .b52-plan-grid
  > .b52-plan:not(.b52-plan-pro) {
    display: none !important;
  }


  /* ================================================
     COMPACT BILLING HEADER
     ================================================ */

  #screen-billing
  .b52-header {
    margin: 0 0 12px !important;
    padding: 0 !important;
  }


  #screen-billing
  .b52-eyebrow {
    margin: 0 0 4px !important;

    font-size: 9px !important;
    line-height: 1.1 !important;

    letter-spacing: .12em !important;
  }


  #screen-billing
  .b52-header h1 {
    margin: 0 0 5px !important;

    font-size: 28px !important;
    line-height: 1 !important;

    letter-spacing: -.035em !important;
  }


  #screen-billing
  .b52-header p {
    max-width: 330px !important;

    margin: 0 !important;

    font-size: 12px !important;
    line-height: 1.3 !important;
  }


  /* ================================================
     PRO / API SWITCH
     ================================================ */

  #screen-billing
  .b52-tabs {
    width: 100% !important;

    margin: 8px 0 13px !important;
    padding: 3px !important;

    display: grid !important;

    grid-template-columns:
      1fr 1fr !important;

    border-radius: 13px !important;
  }


  #screen-billing
  .b52-tabs button {
    width: 100% !important;

    min-width: 0 !important;
    min-height: 38px !important;

    padding: 0 8px !important;

    font-size: 12px !important;

    border-radius: 10px !important;
  }


  /* ================================================
     SECTION COPY
     ================================================ */

  #screen-billing
  .b52-section-head {
    margin: 0 0 10px !important;
    padding: 0 !important;
  }


  #screen-billing
  .b52-section-head h2 {
    margin: 0 0 4px !important;

    font-size: 24px !important;
    line-height: 1 !important;

    letter-spacing: -.03em !important;
  }


  #screen-billing
  .b52-section-head p {
    margin: 0 !important;

    font-size: 11px !important;
    line-height: 1.3 !important;
  }


  /* ================================================
     REMOVE DESKTOP PRO SHELL
     ================================================ */

  #screen-billing
  .b52-plan-pro {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    overflow: visible !important;
  }


  #screen-billing
  .b52-plan-pro
  > .b52-recommended,

  #screen-billing
  .b52-plan-pro
  > .b52-plan-head {
    display: none !important;
  }


  /* ================================================
     TRUE HORIZONTAL CAROUSEL
     ================================================ */

  #screen-billing
  .b52-pro-terms {
    position: relative !important;

    width:
      calc(100vw - 16px)
      !important;

    max-width: none !important;

    margin:
      4px
      -16px
      12px
      0 !important;

    padding:
      3px
      48px
      12px
      0 !important;

    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    grid-template-columns: none !important;
    grid-auto-flow: initial !important;

    align-items: stretch !important;

    gap: 12px !important;

    overflow-x: scroll !important;
    overflow-y: hidden !important;

    scroll-snap-type:
      x mandatory !important;

    scroll-padding-left:
      0 !important;

    overscroll-behavior-x:
      contain !important;

    -webkit-overflow-scrolling:
      touch !important;

    touch-action:
      pan-x !important;

    scrollbar-width:
      none !important;

    box-sizing:
      border-box !important;
  }


  #screen-billing
  .b52-pro-terms::-webkit-scrollbar {
    display: none !important;

    width: 0 !important;
    height: 0 !important;
  }


  /* ================================================
     ONE REAL TERM = ONE CARD
     ================================================ */

  #screen-billing
  .b52-pro-terms
  > button {
    position: relative !important;

    flex:
      0 0
      calc(100vw - 70px)
      !important;

    width:
      calc(100vw - 70px)
      !important;

    min-width:
      calc(100vw - 70px)
      !important;

    max-width:
      calc(100vw - 70px)
      !important;

    min-height:
      185px !important;

    height: 185px !important;

    margin: 0 !important;

    padding:
      20px
      18px !important;

    display: flex !important;

    flex-direction:
      column !important;

    align-items:
      flex-start !important;

    justify-content:
      center !important;

    gap: 5px !important;

    scroll-snap-align:
      start !important;

    scroll-snap-stop:
      always !important;

    border:
      1px solid
      rgba(72,121,174,.45)
      !important;

    border-radius:
      20px !important;

    background:
      linear-gradient(
        145deg,
        #102c46,
        #071521
      ) !important;

    box-shadow:
      0 14px 32px
      rgba(0,0,0,.27)
      !important;

    color: #fff !important;

    text-align: left !important;

    white-space: normal !important;

    box-sizing:
      border-box !important;

    transform: none !important;
  }


  /* ACTIVE */

  #screen-billing
  .b52-pro-terms
  > button.active {
    border-color:
      rgba(255,181,34,.9)
      !important;

    background:
      linear-gradient(
        145deg,
        #293943,
        #0b1a27
      ) !important;

    box-shadow:
      0
      0
      0
      1px
      rgba(255,181,34,.12),
      0
      15px
      34px
      rgba(0,0,0,.30)
      !important;
  }


  #screen-billing
  .b52-pro-terms
  > button.active::after {
    display: none !important;

    content: none !important;
  }


  /* PLAN NAME */

  #screen-billing
  .b52-pro-terms
  > button
  > span {
    margin: 0 !important;

    color: #f8f9fc !important;

    font-size: 25px !important;
    font-weight: 800 !important;

    line-height: 1 !important;

    letter-spacing: -.03em !important;
  }


  /* PRICE */

  #screen-billing
  .b52-pro-terms
  > button
  > strong {
    margin:
      6px
      0
      2px !important;

    color: #fff !important;

    font-size: 42px !important;
    font-weight: 850 !important;

    line-height: .94 !important;

    letter-spacing: -.045em !important;
  }


  #screen-billing
  .b52-pro-terms
  > button.active
  > strong {
    color:
      #ffbd32 !important;
  }


  /* SUBTEXT */

  #screen-billing
  .b52-pro-terms
  > button
  > small {
    margin: 2px 0 0 !important;

    color: #9bacc0 !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    line-height: 1.2 !important;
  }


  /* ================================================
     FEATURES
     ================================================ */

  #screen-billing
  .b52-plan-pro
  > ul {
    width: 100% !important;

    margin:
      3px
      0
      10px !important;

    padding:
      13px
      14px !important;

    display:
      grid !important;

    gap: 7px !important;

    border:
      1px solid
      rgba(255,255,255,.07)
      !important;

    border-radius:
      14px !important;

    background:
      rgba(255,255,255,.025)
      !important;
  }


  #screen-billing
  .b52-plan-pro
  > ul
  > li {
    padding-left:
      22px !important;

    font-size:
      11px !important;

    line-height:
      1.25 !important;
  }


  /* ================================================
     REAL PAYMENT CTA
     ================================================ */

  #screen-billing
  .b52-plan-pro
  > .b52-btn {
    width: 100% !important;

    min-height:
      44px !important;

    margin: 0 !important;

    padding:
      0
      12px !important;

    border-radius:
      12px !important;

    font-size:
      12px !important;
  }


  #screen-billing
  .b52-pay-note {
    margin-top:
      5px !important;

    font-size:
      9px !important;

    text-align:
      center !important;
  }


  /* ================================================
     SIDE CONTENT BELOW
     ================================================ */

  #screen-billing
  .b52-personal-side {
    width: 100% !important;
    max-width: 100% !important;

    margin-top:
      12px !important;

    display:
      grid !important;

    grid-template-columns:
      1fr !important;

    gap:
      9px !important;
  }

}


/* SMALL PHONE */

@media (max-width: 390px) {

  #screen-billing
  .b52-pro-terms
  > button {
    flex-basis:
      calc(100vw - 60px)
      !important;

    width:
      calc(100vw - 60px)
      !important;

    min-width:
      calc(100vw - 60px)
      !important;

    max-width:
      calc(100vw - 60px)
      !important;

    height:
      175px !important;

    min-height:
      175px !important;

    padding:
      18px
      16px !important;
  }


  #screen-billing
  .b52-pro-terms
  > button
  > strong {
    font-size:
      38px !important;
  }

}

/* NOYTRIX MOBILE BILLING V1.7 CSS END */


/* ==========================================================
   NOYTRIX MOBILE V1.8
   HARD RUNTIME BILLING GUARANTEE
   ========================================================== */

@media (max-width: 820px), (hover: none) and (pointer: coarse) {


  /*
   * This intentionally targets the REAL Billing controls
   * without relying on #screen-billing.active.
   */

  #screen-billing .b52-pro-terms {

    display:
      flex !important;

    flex-direction:
      row !important;

    flex-wrap:
      nowrap !important;

    grid-template-columns:
      none !important;

    width:
      calc(100vw - 16px) !important;

    max-width:
      none !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    gap:
      12px !important;

    padding-right:
      48px !important;

    scroll-snap-type:
      x mandatory !important;

    -webkit-overflow-scrolling:
      touch !important;

    scrollbar-width:
      none !important;

    touch-action:
      pan-x !important;
  }


  #screen-billing
  .b52-pro-terms::-webkit-scrollbar {

    display:
      none !important;
  }


  #screen-billing
  .b52-pro-terms
  > button {

    flex:
      0 0
      calc(100vw - 70px) !important;

    width:
      calc(100vw - 70px) !important;

    min-width:
      calc(100vw - 70px) !important;

    max-width:
      calc(100vw - 70px) !important;

    height:
      185px !important;

    min-height:
      185px !important;

    scroll-snap-align:
      start !important;

    scroll-snap-stop:
      always !important;

    margin:
      0 !important;
  }


  /*
   * Sign in never shown inside Billing.
   */

  #screen-billing
  [data-b52-signin] {

    display:
      none !important;
  }


  /*
   * Force page to PHONE width.
   */

  html,
  body {

    min-width:
      0 !important;

    max-width:
      100vw !important;

    overflow-x:
      hidden !important;
  }


  body.nxm-ready
  #screen-billing {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100vw !important;
  }

}


/* ==========================================================
   END NOYTRIX MOBILE V1.8
   ========================================================== */


/* NOYTRIX MOBILE BILLING V1.9 CSS START */


/*
 * ==========================================================
 * MOBILE ONLY.
 * DESKTOP IS NOT TOUCHED.
 * ==========================================================
 */

@media (max-width: 820px) {


  /*
   * ------------------------------------------
   * REMOVE REDUNDANT BILLING SIGN IN
   * ------------------------------------------
   */

  #screen-billing
  [data-b52-signin] {

    display:
      none !important;

  }


  body:has(#screen-billing.active)
  .nxm-auth {

    display:
      none !important;

  }


  /*
   * ------------------------------------------
   * REAL BILLING CAROUSEL
   * ------------------------------------------
   */

  #screen-billing
  .b52-pro-terms {

    width:
      calc(100vw - 16px)
      !important;

    max-width:
      none !important;

    margin:
      6px
      -16px
      0
      0 !important;

    padding:
      4px
      48px
      14px
      0 !important;

    display:
      flex !important;

    flex-direction:
      row !important;

    flex-wrap:
      nowrap !important;

    grid-template-columns:
      none !important;

    grid-auto-flow:
      initial !important;

    align-items:
      stretch !important;

    gap:
      12px !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    scroll-snap-type:
      x mandatory !important;

    scroll-padding-left:
      0 !important;

    overscroll-behavior-x:
      contain !important;

    -webkit-overflow-scrolling:
      touch !important;

    touch-action:
      pan-x !important;

    scrollbar-width:
      none !important;

    box-sizing:
      border-box !important;

  }


  #screen-billing
  .b52-pro-terms::-webkit-scrollbar {

    display:
      none !important;

  }


  /*
   * ------------------------------------------
   * EACH REAL PLAN = ONE CARD
   * ------------------------------------------
   */

  #screen-billing
  .b52-pro-terms
  > [data-b52-pro-select] {

    position:
      relative !important;

    flex:
      0 0
      calc(100vw - 70px)
      !important;

    width:
      calc(100vw - 70px)
      !important;

    min-width:
      calc(100vw - 70px)
      !important;

    max-width:
      calc(100vw - 70px)
      !important;

    min-height:
      190px !important;

    height:
      190px !important;

    margin:
      0 !important;

    padding:
      21px
      19px !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      flex-start !important;

    justify-content:
      center !important;

    gap:
      6px !important;

    scroll-snap-align:
      start !important;

    scroll-snap-stop:
      always !important;

    border:
      1px solid
      rgba(
        75,
        124,
        180,
        .42
      )
      !important;

    border-radius:
      20px !important;

    background:
      linear-gradient(
        145deg,
        #102c46,
        #071521
      )
      !important;

    box-shadow:
      0
      14px
      32px
      rgba(
        0,
        0,
        0,
        .27
      )
      !important;

    color:
      #ffffff !important;

    text-align:
      left !important;

    white-space:
      normal !important;

    box-sizing:
      border-box !important;

    transform:
      none !important;

  }


  /*
   * Visible / selected slide.
   */

  #screen-billing
  .b52-pro-terms
  > [data-b52-pro-select].active,

  #screen-billing
  .b52-pro-terms
  > .nxm-visible-plan-v19 {

    border-color:
      rgba(
        255,
        181,
        34,
        .90
      )
      !important;

    box-shadow:
      0
      0
      0
      1px
      rgba(
        255,
        181,
        34,
        .12
      ),
      0
      16px
      34px
      rgba(
        0,
        0,
        0,
        .30
      )
      !important;

  }


  #screen-billing
  .b52-pro-terms
  > [data-b52-pro-select].active::after {

    display:
      none !important;

    content:
      none !important;

  }


  /* TITLE */

  #screen-billing
  .b52-pro-terms
  > [data-b52-pro-select]
  > span {

    margin:
      0 !important;

    color:
      #f7f9fc !important;

    font-size:
      25px !important;

    font-weight:
      800 !important;

    line-height:
      1 !important;

    letter-spacing:
      -.03em !important;

  }


  /* PRICE */

  #screen-billing
  .b52-pro-terms
  > [data-b52-pro-select]
  > strong {

    margin:
      7px
      0
      2px !important;

    color:
      #ffffff !important;

    font-size:
      43px !important;

    font-weight:
      850 !important;

    line-height:
      .94 !important;

    letter-spacing:
      -.045em !important;

  }


  #screen-billing
  .b52-pro-terms
  > [data-b52-pro-select].active
  > strong {

    color:
      #ffbd32 !important;

  }


  /* DESCRIPTION */

  #screen-billing
  .b52-pro-terms
  > [data-b52-pro-select]
  > small {

    margin:
      3px
      0
      0 !important;

    color:
      #9eafc4 !important;

    font-size:
      12px !important;

    font-weight:
      600 !important;

    line-height:
      1.2 !important;

  }


  /*
   * ------------------------------------------
   * BUY BUTTON AREA UNDER CARD
   * ------------------------------------------
   */

  #screen-billing
  .nxm-buy-actions-v19 {

    width:
      100% !important;

    margin:
      7px
      0
      13px !important;

    padding:
      0 !important;

    display:
      block !important;

  }


  #screen-billing
  .nxm-buy-plan-v19 {

    width:
      100% !important;

    min-height:
      48px !important;

    margin:
      0 !important;

    padding:
      0
      16px !important;

    display:
      none !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    border:
      1px solid
      rgba(
        255,
        181,
        34,
        .82
      )
      !important;

    border-radius:
      13px !important;

    background:
      linear-gradient(
        135deg,
        #ffc044,
        #f2a900
      )
      !important;

    color:
      #081321 !important;

    box-shadow:
      0
      10px
      24px
      rgba(
        255,
        181,
        34,
        .14
      )
      !important;

    font-family:
      inherit !important;

    font-size:
      13px !important;

    font-weight:
      800 !important;

    line-height:
      1 !important;

    cursor:
      pointer !important;

    -webkit-tap-highlight-color:
      transparent !important;

  }


  /*
   * Only button belonging to the
   * currently visible card is shown.
   */

  #screen-billing
  .nxm-buy-plan-v19[
    data-active="1"
  ] {

    display:
      flex !important;

  }


  #screen-billing
  .nxm-buy-plan-v19:active {

    transform:
      translateY(
        1px
      ) !important;

  }


  /*
   * ------------------------------------------
   * HIDE ORIGINAL DUPLICATE CTA.
   *
   * Its real JS functionality remains in DOM
   * and V1.9 invokes it programmatically.
   * ------------------------------------------
   */

  #screen-billing
  .b52-plan-pro
  > .b52-btn {

    position:
      absolute !important;

    width:
      1px !important;

    height:
      1px !important;

    min-width:
      1px !important;

    min-height:
      1px !important;

    padding:
      0 !important;

    margin:
      -1px !important;

    overflow:
      hidden !important;

    clip:
      rect(
        0,
        0,
        0,
        0
      )
      !important;

    white-space:
      nowrap !important;

    opacity:
      0 !important;

    pointer-events:
      none !important;

  }


  /*
   * Keep secure-payment note underneath
   * our real purchase button.
   */

  #screen-billing
  .b52-pay-note {

    margin:
      0
      0
      8px !important;

    font-size:
      9px !important;

    line-height:
      1.2 !important;

    text-align:
      center !important;

  }

}


/*
 * SMALL MOBILE ONLY.
 */

@media (max-width: 390px) {

  #screen-billing
  .b52-pro-terms
  > [data-b52-pro-select] {

    flex-basis:
      calc(100vw - 60px)
      !important;

    width:
      calc(100vw - 60px)
      !important;

    min-width:
      calc(100vw - 60px)
      !important;

    max-width:
      calc(100vw - 60px)
      !important;

    height:
      178px !important;

    min-height:
      178px !important;

    padding:
      19px
      16px !important;

  }


  #screen-billing
  .b52-pro-terms
  > [data-b52-pro-select]
  > strong {

    font-size:
      39px !important;

  }

}


/* NOYTRIX MOBILE BILLING V1.9 CSS END */


/* NOYTRIX MOBILE REAL PLANS V2 CSS START */


/*
 * ЛИШЕ МОБІЛЬНА ВЕРСІЯ.
 */

@media (max-width: 820px) {


  /*
   * Сторінка ніколи не розширюється
   * через горизонтальні картки.
   */

  html,
  body {

    max-width:
      100vw !important;

    overflow-x:
      hidden !important;

  }


  #screen-billing {

    width:
      100% !important;

    max-width:
      100vw !important;

    overflow-x:
      hidden !important;

  }


  /*
   * ========================================================
   * СПРАВЖНІ ВЕЛИКІ КАРТКИ
   * ========================================================
   */

  #screen-billing
  .nxm-real-plan-track-v2 {

    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      8px
      0
      16px !important;

    padding:
      2px
      44px
      14px
      0 !important;

    display:
      flex !important;

    flex-direction:
      row !important;

    flex-wrap:
      nowrap !important;

    align-items:
      stretch !important;

    gap:
      12px !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    scroll-snap-type:
      x mandatory !important;

    scroll-padding-left:
      0 !important;

    overscroll-behavior-x:
      contain !important;

    -webkit-overflow-scrolling:
      touch !important;

    touch-action:
      pan-x pan-y !important;

    scrollbar-width:
      none !important;

    box-sizing:
      border-box !important;

  }


  #screen-billing
  .nxm-real-plan-track-v2::-webkit-scrollbar {

    display:
      none !important;

    width:
      0 !important;

    height:
      0 !important;

  }


  /*
   * ОДНА КАРТКА НА ЕКРАНІ,
   * НАСТУПНУ ТРОХИ ВИДНО СПРАВА.
   */

  #screen-billing
  .nxm-real-plan-track-v2
  > .nxm-real-plan-card-v2 {

    flex:
      0 0
      calc(100vw - 76px)
      !important;

    width:
      calc(100vw - 76px)
      !important;

    min-width:
      calc(100vw - 76px)
      !important;

    max-width:
      calc(100vw - 76px)
      !important;

    height:
      auto !important;

    min-height:
      0 !important;

    margin:
      0 !important;

    scroll-snap-align:
      start !important;

    scroll-snap-stop:
      always !important;

    align-self:
      stretch !important;

    box-sizing:
      border-box !important;

    transform:
      none !important;

  }


  /*
   * Якщо старий CSS задав grid-column
   * або іншу desktop-геометрію —
   * скидаємо її.
   */

  #screen-billing
  .nxm-real-plan-card-v2 {

    grid-column:
      auto !important;

    grid-row:
      auto !important;

    position:
      relative !important;

  }


  /*
   * ========================================================
   * КНОПКА КУПІВЛІ ВНИЗУ КОЖНОЇ КАРТКИ
   * ========================================================
   */

  #screen-billing
  .nxm-real-buy-v2 {

    width:
      100% !important;

    min-height:
      50px !important;

    margin:
      22px
      0
      0 !important;

    padding:
      0
      16px !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    flex:
      0
      0
      auto !important;

    border:
      1px solid
      rgba(
        255,
        190,
        55,
        .92
      )
      !important;

    border-radius:
      14px !important;

    background:
      linear-gradient(
        135deg,
        #ffc348,
        #efa500
      )
      !important;

    color:
      #071321 !important;

    box-shadow:
      0
      12px
      28px
      rgba(
        255,
        181,
        34,
        .18
      )
      !important;

    font-family:
      inherit !important;

    font-size:
      14px !important;

    font-weight:
      850 !important;

    line-height:
      1 !important;

    text-align:
      center !important;

    cursor:
      pointer !important;

    opacity:
      1 !important;

    visibility:
      visible !important;

    pointer-events:
      auto !important;

    -webkit-appearance:
      none !important;

    appearance:
      none !important;

    -webkit-tap-highlight-color:
      transparent !important;

  }


  #screen-billing
  .nxm-real-buy-v2:active {

    transform:
      translateY(
        1px
      ) !important;

  }


  #screen-billing
  .nxm-real-buy-v2:disabled {

    opacity:
      .65 !important;

    pointer-events:
      none !important;

  }


  /*
   * Технічні старі маленькі перемикачі
   * залишаємо в DOM для справжньої логіки покупки,
   * але користувачеві вони не потрібні.
   */

  #screen-billing
  .b52-pro-terms {

    position:
      absolute !important;

    width:
      1px !important;

    height:
      1px !important;

    margin:
      -1px !important;

    padding:
      0 !important;

    overflow:
      hidden !important;

    clip:
      rect(
        0,
        0,
        0,
        0
      )
      !important;

    white-space:
      nowrap !important;

    opacity:
      0 !important;

    pointer-events:
      none !important;

  }

}


/*
 * ВУЗЬКІ ТЕЛЕФОНИ.
 */

@media (max-width: 390px) {

  #screen-billing
  .nxm-real-plan-track-v2
  > .nxm-real-plan-card-v2 {

    flex-basis:
      calc(100vw - 66px)
      !important;

    width:
      calc(100vw - 66px)
      !important;

    min-width:
      calc(100vw - 66px)
      !important;

    max-width:
      calc(100vw - 66px)
      !important;

  }


  #screen-billing
  .nxm-real-buy-v2 {

    min-height:
      48px !important;

    font-size:
      13px !important;

  }

}


/* NOYTRIX MOBILE REAL PLANS V2 CSS END */


/* NOYTRIX MOBILE POLISH V3 CSS START */


/*
 * ==========================================================
 * MOBILE ONLY
 * ==========================================================
 */

@media (max-width: 820px) {


  /*
   * --------------------------------------------------------
   * WHOLE MOBILE WORKSPACE +0.5 CM WIDER
   *
   * Old common gutter was about 16px.
   * New gutter = 7px.
   *
   * Gain:
   * 9px left + 9px right = 18px ≈ 0.48cm.
   * --------------------------------------------------------
   */

  :root {

    --nxm-page-gutter-v3:
      7px;

  }


  html,
  body {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100vw !important;

    overflow-x:
      hidden !important;

  }


  body.nxm-ready
  .workspace {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100vw !important;

    padding-left:
      var(--nxm-page-gutter-v3)
      !important;

    padding-right:
      var(--nxm-page-gutter-v3)
      !important;

    box-sizing:
      border-box !important;

  }


  body.nxm-ready
  .workspace
  > .screen,

  body.nxm-ready
  [data-screen-panel] {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    padding-left:
      0 !important;

    padding-right:
      0 !important;

    box-sizing:
      border-box !important;

  }


  /*
   * Remove old max-width restrictions from
   * main mobile page roots.
   */

  body.nxm-ready
  .api-page-v38,

  body.nxm-ready
  #billingApp,

  body.nxm-ready
  .billing-v52,

  body.nxm-ready
  .product-page-v23,

  body.nxm-ready
  .tracking-v14,

  body.nxm-ready
  .signals-v19 {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    margin-left:
      0 !important;

    margin-right:
      0 !important;

    box-sizing:
      border-box !important;

  }


  /*
   * --------------------------------------------------------
   * CENTER MOBILE COPY
   * --------------------------------------------------------
   */

  body.nxm-ready
  .screen,

  body.nxm-ready
  [data-screen-panel] {

    text-align:
      center !important;

  }


  body.nxm-ready
  .screen h1,

  body.nxm-ready
  .screen h2,

  body.nxm-ready
  .screen h3,

  body.nxm-ready
  .screen h4,

  body.nxm-ready
  .screen p,

  body.nxm-ready
  .screen small,

  body.nxm-ready
  .screen .eyebrow,

  body.nxm-ready
  .screen [class*="eyebrow"],

  body.nxm-ready
  .screen [class*="kicker"] {

    text-align:
      center !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

  }


  /*
   * Center common flex/grid headers.
   */

  body.nxm-ready
  .page-intro,

  body.nxm-ready
  .panel-heading,

  body.nxm-ready
  .api-section-head-v38,

  body.nxm-ready
  .b52-section-head,

  body.nxm-ready
  .b52-header {

    text-align:
      center !important;

    justify-content:
      center !important;

    align-items:
      center !important;

  }


  /*
   * Lists look better centered on general pages.
   */

  body.nxm-ready
  .screen
  ul:not(
    [class*="code"]
  ),

  body.nxm-ready
  .screen
  ol:not(
    [class*="code"]
  ) {

    width:
      fit-content;

    max-width:
      100%;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

  }


  /*
   * Inputs / code / technical tables stay left aligned.
   */

  body.nxm-ready
  input,

  body.nxm-ready
  textarea,

  body.nxm-ready
  select,

  body.nxm-ready
  pre,

  body.nxm-ready
  code,

  body.nxm-ready
  table,

  body.nxm-ready
  th,

  body.nxm-ready
  td {

    text-align:
      left !important;

  }


  /*
   * --------------------------------------------------------
   * API PAGE
   * --------------------------------------------------------
   */

  #screen-api
  .api-page-v38 {

    padding-left:
      0 !important;

    padding-right:
      0 !important;

  }


  #screen-api
  .api-hero-grid-v38,

  #screen-api
  .api-hero-v38 {

    width:
      100% !important;

    max-width:
      100% !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    text-align:
      center !important;

  }


  #screen-api
  .api-hero-v38
  h1 {

    max-width:
      620px !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    text-align:
      center !important;

  }


  #screen-api
  .api-hero-v38
  p {

    max-width:
      560px !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    text-align:
      center !important;

  }


  /*
   * --------------------------------------------------------
   * API DOCUMENTATION BUTTON
   * --------------------------------------------------------
   */

  #screen-api
  .nxm-api-docs-wrap-v3 {

    width:
      100% !important;

    margin:
      16px
      auto
      20px !important;

    display:
      flex !important;

    justify-content:
      center !important;

    align-items:
      center !important;

  }


  #screen-api
  .nxm-api-docs-button-v3 {

    width:
      auto !important;

    min-width:
      190px !important;

    max-width:
      calc(
        100vw -
        32px
      ) !important;

    min-height:
      48px !important;

    margin:
      16px
      auto !important;

    padding:
      0
      22px !important;

    display:
      inline-flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    border:
      1px solid
      rgba(
        255,
        183,
        32,
        .70
      )
      !important;

    border-radius:
      14px !important;

    background:
      linear-gradient(
        145deg,
        rgba(
          255,
          183,
          32,
          .16
        ),
        rgba(
          10,
          28,
          50,
          .95
        )
      )
      !important;

    color:
      #ffd167 !important;

    box-shadow:
      0
      10px
      30px
      rgba(
        0,
        0,
        0,
        .22
      )
      !important;

    font-family:
      inherit !important;

    font-size:
      14px !important;

    font-weight:
      800 !important;

    line-height:
      1 !important;

    letter-spacing:
      .01em !important;

    text-align:
      center !important;

    text-decoration:
      none !important;

    cursor:
      pointer !important;

    -webkit-tap-highlight-color:
      transparent !important;

  }


  #screen-api
  .nxm-api-docs-button-v3:active {

    transform:
      translateY(
        1px
      ) !important;

  }


  /*
   * ========================================================
   * REAL API DOCUMENTATION MOBILE
   *
   * Exact root generated by api-docs-v41.js:
   * [aria-label="Noytrix API documentation"]
   * ========================================================
   */

  [aria-label="Noytrix API documentation"] {

    position:
      fixed !important;

    inset:
      0 !important;

    width:
      100vw !important;

    min-width:
      0 !important;

    max-width:
      100vw !important;

    height:
      100dvh !important;

    max-height:
      100dvh !important;

    margin:
      0 !important;

    padding:
      0 !important;

    display:
      block !important;

    overflow-x:
      hidden !important;

    overflow-y:
      auto !important;

    overscroll-behavior:
      contain !important;

    -webkit-overflow-scrolling:
      touch !important;

    background:
      #06111f !important;

    border:
      0 !important;

    border-radius:
      0 !important;

    box-shadow:
      none !important;

    z-index:
      70000 !important;

    box-sizing:
      border-box !important;

    color-scheme:
      dark;

  }


  /*
   * Every docs child must fit phone width.
   */

  [aria-label="Noytrix API documentation"]
  * {

    min-width:
      0;

    max-width:
      100%;

    box-sizing:
      border-box;

  }


  /*
   * --------------------------------------------------------
   * DOCS HEADER
   * --------------------------------------------------------
   */

  [aria-label="Noytrix API documentation"]
  .nxd-top {

    position:
      sticky !important;

    top:
      0 !important;

    left:
      0 !important;

    right:
      0 !important;

    width:
      100% !important;

    min-height:
      62px !important;

    margin:
      0 !important;

    padding:
      calc(
        10px +
        env(
          safe-area-inset-top
        )
      )
      12px
      10px !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      space-between !important;

    gap:
      8px !important;

    background:
      rgba(
        5,
        16,
        30,
        .97
      )
      !important;

    border-bottom:
      1px solid
      rgba(
        112,
        143,
        183,
        .18
      )
      !important;

    backdrop-filter:
      blur(
        16px
      ) !important;

    z-index:
      20 !important;

  }


  [aria-label="Noytrix API documentation"]
  .nxd-brand {

    flex:
      1
      1
      auto !important;

    min-width:
      0 !important;

    display:
      flex !important;

    justify-content:
      center !important;

    align-items:
      center !important;

    gap:
      7px !important;

    text-align:
      center !important;

  }


  [aria-label="Noytrix API documentation"]
  .nxd-brand
  .name {

    font-size:
      15px !important;

    font-weight:
      800 !important;

    white-space:
      nowrap !important;

  }


  /*
   * --------------------------------------------------------
   * DOCS CONTENT
   * --------------------------------------------------------
   */

  [aria-label="Noytrix API documentation"]
  main,

  [aria-label="Noytrix API documentation"]
  [role="main"] {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    margin:
      0 !important;

    padding:
      16px
      10px
      calc(
        34px +
        env(
          safe-area-inset-bottom
        )
      )
      !important;

    overflow:
      visible !important;

  }


  /*
   * Any desktop side navigation becomes
   * a normal mobile block instead of stealing width.
   */

  [aria-label="Noytrix API documentation"]
  aside {

    position:
      static !important;

    inset:
      auto !important;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    height:
      auto !important;

    max-height:
      none !important;

    margin:
      0
      0
      12px !important;

    padding:
      8px !important;

    overflow-x:
      auto !important;

    overflow-y:
      visible !important;

  }


  /*
   * Navigation can scroll sideways as compact chips.
   */

  [aria-label="Noytrix API documentation"]
  nav {

    max-width:
      100% !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    -webkit-overflow-scrolling:
      touch !important;

    scrollbar-width:
      none !important;

  }


  [aria-label="Noytrix API documentation"]
  nav::-webkit-scrollbar {

    display:
      none !important;

  }


  /*
   * --------------------------------------------------------
   * DOCS TYPOGRAPHY
   * --------------------------------------------------------
   */

  [aria-label="Noytrix API documentation"]
  h1 {

    margin:
      10px
      auto
      12px !important;

    font-size:
      28px !important;

    line-height:
      1.08 !important;

    letter-spacing:
      -.025em !important;

    text-align:
      center !important;

  }


  [aria-label="Noytrix API documentation"]
  h2 {

    margin-top:
      25px !important;

    margin-bottom:
      10px !important;

    font-size:
      22px !important;

    line-height:
      1.15 !important;

  }


  [aria-label="Noytrix API documentation"]
  h3 {

    margin-top:
      20px !important;

    margin-bottom:
      8px !important;

    font-size:
      17px !important;

    line-height:
      1.2 !important;

  }


  [aria-label="Noytrix API documentation"]
  h2,

  [aria-label="Noytrix API documentation"]
  h3,

  [aria-label="Noytrix API documentation"]
  h4 {

    text-align:
      left !important;

  }


  [aria-label="Noytrix API documentation"]
  p,

  [aria-label="Noytrix API documentation"]
  li {

    font-size:
      13px !important;

    line-height:
      1.55 !important;

    text-align:
      left !important;

  }


  [aria-label="Noytrix API documentation"]
  small {

    font-size:
      11px !important;

    line-height:
      1.4 !important;

  }


  /*
   * Cards / sections.
   */

  [aria-label="Noytrix API documentation"]
  section,

  [aria-label="Noytrix API documentation"]
  article {

    width:
      100% !important;

    max-width:
      100% !important;

    margin-left:
      0 !important;

    margin-right:
      0 !important;

  }


  /*
   * --------------------------------------------------------
   * CODE
   * --------------------------------------------------------
   */

  [aria-label="Noytrix API documentation"]
  pre {

    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      10px
      0
      14px !important;

    padding:
      12px !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    border-radius:
      12px !important;

    font-size:
      10.5px !important;

    line-height:
      1.55 !important;

    white-space:
      pre !important;

    tab-size:
      2 !important;

    -webkit-overflow-scrolling:
      touch !important;

    text-align:
      left !important;

  }


  [aria-label="Noytrix API documentation"]
  code {

    font-size:
      .92em !important;

    word-break:
      normal !important;

    overflow-wrap:
      normal !important;

    text-align:
      left !important;

  }


  /*
   * --------------------------------------------------------
   * TABLES
   * --------------------------------------------------------
   */

  [aria-label="Noytrix API documentation"]
  table {

    display:
      block !important;

    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      10px
      0
      16px !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    border-spacing:
      0 !important;

    font-size:
      11px !important;

    -webkit-overflow-scrolling:
      touch !important;

  }


  [aria-label="Noytrix API documentation"]
  th,

  [aria-label="Noytrix API documentation"]
  td {

    min-width:
      105px !important;

    padding:
      9px
      8px !important;

    font-size:
      11px !important;

    line-height:
      1.35 !important;

    white-space:
      normal !important;

    vertical-align:
      top !important;

    text-align:
      left !important;

  }


  /*
   * --------------------------------------------------------
   * DOC BUTTONS / INPUTS
   * --------------------------------------------------------
   */

  [aria-label="Noytrix API documentation"]
  button,

  [aria-label="Noytrix API documentation"]
  a {

    max-width:
      100% !important;

  }


  [aria-label="Noytrix API documentation"]
  input,

  [aria-label="Noytrix API documentation"]
  textarea,

  [aria-label="Noytrix API documentation"]
  select {

    width:
      100% !important;

    max-width:
      100% !important;

    font-size:
      16px !important;

    box-sizing:
      border-box !important;

  }


  /*
   * Wide grids collapse to one column.
   */

  [aria-label="Noytrix API documentation"]
  [class*="grid"] {

    grid-template-columns:
      minmax(
        0,
        1fr
      )
      !important;

  }

}


/*
 * EXTRA SMALL PHONE
 */

@media (max-width: 390px) {

  [aria-label="Noytrix API documentation"]
  main,

  [aria-label="Noytrix API documentation"]
  [role="main"] {

    padding-left:
      8px !important;

    padding-right:
      8px !important;

  }


  [aria-label="Noytrix API documentation"]
  h1 {

    font-size:
      25px !important;

  }


  [aria-label="Noytrix API documentation"]
  h2 {

    font-size:
      20px !important;

  }


  [aria-label="Noytrix API documentation"]
  p,

  [aria-label="Noytrix API documentation"]
  li {

    font-size:
      12.5px !important;

  }

}


/* NOYTRIX MOBILE POLISH V3 CSS END */


/* NOYTRIX MOBILE BILLING API V4 CSS START */

@media (max-width: 820px) {


  /*
   * ========================================================
   * REAL BILLING -> API FOR BUSINESS
   * ========================================================
   */

  #screen-billing.nxm-api-business-active-v4 {

    width:
      100% !important;

    max-width:
      100vw !important;

    padding-left:
      7px !important;

    padding-right:
      7px !important;

    overflow-x:
      hidden !important;

    box-sizing:
      border-box !important;

  }


  #screen-billing
  .nxm-api-business-v4 {

    position:
      relative !important;

    width:
      100vw !important;

    max-width:
      100vw !important;

    margin-left:
      calc(
        50% -
        50vw
      )
      !important;

    margin-right:
      calc(
        50% -
        50vw
      )
      !important;

    padding:
      0
      7px
      34px !important;

    box-sizing:
      border-box !important;

    overflow-x:
      hidden !important;

    text-align:
      center !important;

  }


  /*
   * Kill desktop max-widths inside this
   * particular API billing page.
   */

  #screen-billing
  .nxm-api-business-v4
  > * {

    max-width:
      100% !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    box-sizing:
      border-box !important;

  }


  /*
   * ========================================================
   * CENTER EVERYTHING USER-FACING
   * ========================================================
   */

  #screen-billing
  .nxm-api-business-v4
  h1,

  #screen-billing
  .nxm-api-business-v4
  h2,

  #screen-billing
  .nxm-api-business-v4
  h3,

  #screen-billing
  .nxm-api-business-v4
  h4,

  #screen-billing
  .nxm-api-business-v4
  p,

  #screen-billing
  .nxm-api-business-v4
  span,

  #screen-billing
  .nxm-api-business-v4
  strong,

  #screen-billing
  .nxm-api-business-v4
  small,

  #screen-billing
  .nxm-api-business-v4
  li {

    text-align:
      center !important;

  }


  #screen-billing
  .nxm-api-business-v4
  [class*="hero"] {

    grid-template-columns:
      minmax(
        0,
        1fr
      )
      !important;

    justify-items:
      center !important;

    align-items:
      center !important;

    text-align:
      center !important;

  }


  /*
   * Current giant hero title was too wide.
   */

  #screen-billing
  .nxm-api-business-v4
  h1 {

    max-width:
      620px !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    font-size:
      clamp(
        38px,
        11vw,
        52px
      )
      !important;

    line-height:
      1.04 !important;

    letter-spacing:
      -.035em !important;

  }


  /*
   * ========================================================
   * API DOCUMENTATION = REAL CENTER BUTTON
   * ========================================================
   */

  #screen-billing
  .nxm-billing-api-docs-v4 {

    width:
      auto !important;

    min-width:
      210px !important;

    max-width:
      calc(
        100vw -
        42px
      )
      !important;

    min-height:
      50px !important;

    margin:
      18px
      auto
      24px !important;

    padding:
      0
      22px !important;

    display:
      inline-flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    gap:
      8px !important;

    border:
      1px solid
      rgba(
        255,
        188,
        48,
        .78
      )
      !important;

    border-radius:
      14px !important;

    background:
      linear-gradient(
        145deg,
        rgba(
          255,
          186,
          45,
          .17
        ),
        rgba(
          10,
          31,
          55,
          .98
        )
      )
      !important;

    color:
      #ffd066 !important;

    box-shadow:
      0
      10px
      28px
      rgba(
        0,
        0,
        0,
        .24
      )
      !important;

    font-size:
      14px !important;

    font-weight:
      850 !important;

    line-height:
      1 !important;

    text-align:
      center !important;

    text-decoration:
      none !important;

    cursor:
      pointer !important;

    box-sizing:
      border-box !important;

    -webkit-tap-highlight-color:
      transparent !important;

  }


  #screen-billing
  .nxm-billing-api-docs-v4:active {

    transform:
      translateY(
        1px
      ) !important;

  }


  /*
   * ========================================================
   * API PLAN CAROUSEL
   *
   * Starter -> Growth -> Scale
   * horizontal only on mobile.
   * ========================================================
   */

  #screen-billing
  .nxm-api-plan-track-v4 {

    width:
      100vw !important;

    max-width:
      100vw !important;

    margin:
      8px
      0
      14px !important;

    padding:
      2px
      44px
      18px
      7px !important;

    display:
      flex !important;

    flex-direction:
      row !important;

    flex-wrap:
      nowrap !important;

    align-items:
      stretch !important;

    gap:
      12px !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    scroll-snap-type:
      x mandatory !important;

    scroll-padding-left:
      7px !important;

    scrollbar-width:
      none !important;

    overscroll-behavior-x:
      contain !important;

    -webkit-overflow-scrolling:
      touch !important;

    touch-action:
      pan-x pan-y !important;

    box-sizing:
      border-box !important;

  }


  #screen-billing
  .nxm-api-plan-track-v4::-webkit-scrollbar {

    display:
      none !important;

    width:
      0 !important;

    height:
      0 !important;

  }


  /*
   * Current screenshot:
   * card is about 596px on a 690px viewport.
   *
   * New:
   * 690 - 76 = 614px
   *
   * Exactly ~18px wider total,
   * approximately requested +0.5cm.
   */

  #screen-billing
  .nxm-api-plan-card-v4 {

    flex:
      0 0
      calc(
        100vw -
        76px
      )
      !important;

    width:
      calc(
        100vw -
        76px
      )
      !important;

    min-width:
      calc(
        100vw -
        76px
      )
      !important;

    max-width:
      calc(
        100vw -
        76px
      )
      !important;

    height:
      auto !important;

    min-height:
      0 !important;

    margin:
      0 !important;

    padding-left:
      22px !important;

    padding-right:
      22px !important;

    scroll-snap-align:
      start !important;

    scroll-snap-stop:
      always !important;

    align-self:
      stretch !important;

    position:
      relative !important;

    grid-column:
      auto !important;

    grid-row:
      auto !important;

    transform:
      none !important;

    box-sizing:
      border-box !important;

  }


  /*
   * More polished card scale.
   */

  #screen-billing
  .nxm-api-plan-card-v4
  h2,

  #screen-billing
  .nxm-api-plan-card-v4
  h3 {

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    font-size:
      clamp(
        34px,
        9vw,
        44px
      )
      !important;

    line-height:
      1.05 !important;

    letter-spacing:
      -.025em !important;

  }


  #screen-billing
  .nxm-api-plan-card-v4
  p {

    max-width:
      520px !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    line-height:
      1.48 !important;

  }


  #screen-billing
  .nxm-api-plan-card-v4
  ul {

    width:
      100% !important;

    max-width:
      100% !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    padding-left:
      4px !important;

    padding-right:
      4px !important;

  }


  #screen-billing
  .nxm-api-plan-card-v4
  li {

    justify-content:
      center !important;

    align-items:
      center !important;

    text-align:
      center !important;

  }


  /*
   * ========================================================
   * BUY / CHOOSE BUTTON
   * ========================================================
   */

  #screen-billing
  .nxm-api-buy-v4 {

    width:
      100% !important;

    min-height:
      50px !important;

    margin:
      22px
      auto
      0 !important;

    padding:
      0
      16px !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    border:
      1px solid
      rgba(
        255,
        188,
        48,
        .92
      )
      !important;

    border-radius:
      14px !important;

    background:
      linear-gradient(
        135deg,
        #ffc449,
        #eda600
      )
      !important;

    color:
      #071321 !important;

    box-shadow:
      0
      12px
      28px
      rgba(
        255,
        181,
        34,
        .16
      )
      !important;

    font-family:
      inherit !important;

    font-size:
      14px !important;

    font-weight:
      900 !important;

    line-height:
      1 !important;

    text-align:
      center !important;

    text-decoration:
      none !important;

    cursor:
      pointer !important;

    opacity:
      1 !important;

    visibility:
      visible !important;

    pointer-events:
      auto !important;

    -webkit-appearance:
      none !important;

    appearance:
      none !important;

  }


  #screen-billing
  .nxm-api-buy-v4:active {

    transform:
      translateY(
        1px
      ) !important;

  }


  /*
   * ========================================================
   * REAL API DOCUMENTATION MOBILE
   * ========================================================
   */

  [aria-label="Noytrix API documentation"].nxm-api-docs-v4 {

    position:
      fixed !important;

    inset:
      0 !important;

    width:
      100vw !important;

    min-width:
      0 !important;

    max-width:
      100vw !important;

    height:
      100dvh !important;

    max-height:
      100dvh !important;

    margin:
      0 !important;

    padding:
      0 !important;

    overflow-x:
      hidden !important;

    overflow-y:
      auto !important;

    overscroll-behavior:
      contain !important;

    -webkit-overflow-scrolling:
      touch !important;

    background:
      #06111f !important;

    border:
      0 !important;

    border-radius:
      0 !important;

    box-shadow:
      none !important;

    z-index:
      999999 !important;

  }


  [aria-label="Noytrix API documentation"].nxm-api-docs-v4
  * {

    box-sizing:
      border-box !important;

  }


  /*
   * Header
   */

  [aria-label="Noytrix API documentation"]
  .nxd-top {

    position:
      sticky !important;

    top:
      0 !important;

    width:
      100% !important;

    min-height:
      62px !important;

    margin:
      0 !important;

    padding:
      calc(
        10px +
        env(
          safe-area-inset-top
        )
      )
      10px
      10px !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    gap:
      8px !important;

    background:
      rgba(
        5,
        16,
        30,
        .97
      )
      !important;

    border-bottom:
      1px solid
      rgba(
        121,
        151,
        190,
        .18
      )
      !important;

    backdrop-filter:
      blur(
        16px
      ) !important;

    z-index:
      50 !important;

  }


  [aria-label="Noytrix API documentation"]
  .nxd-brand {

    min-width:
      0 !important;

    justify-content:
      center !important;

    text-align:
      center !important;

  }


  [aria-label="Noytrix API documentation"]
  .nxd-brand
  .name {

    font-size:
      15px !important;

    font-weight:
      850 !important;

  }


  /*
   * Desktop docs layouts become
   * one readable mobile column.
   */

  [aria-label="Noytrix API documentation"]
  [class*="layout"],

  [aria-label="Noytrix API documentation"]
  [class*="shell"],

  [aria-label="Noytrix API documentation"]
  [class*="body"],

  [aria-label="Noytrix API documentation"]
  [class*="content"],

  [aria-label="Noytrix API documentation"]
  main {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    height:
      auto !important;

    max-height:
      none !important;

    margin-left:
      0 !important;

    margin-right:
      0 !important;

    grid-template-columns:
      minmax(
        0,
        1fr
      )
      !important;

  }


  /*
   * Side navigation does not eat
   * half of the phone width.
   */

  [aria-label="Noytrix API documentation"]
  aside {

    position:
      static !important;

    inset:
      auto !important;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    height:
      auto !important;

    max-height:
      none !important;

    margin:
      0
      0
      12px !important;

    padding:
      8px !important;

    overflow-x:
      auto !important;

    overflow-y:
      visible !important;

  }


  /*
   * Main docs content.
   */

  [aria-label="Noytrix API documentation"]
  main,

  [aria-label="Noytrix API documentation"]
  [role="main"] {

    padding:
      16px
      10px
      calc(
        40px +
        env(
          safe-area-inset-bottom
        )
      )
      !important;

    overflow:
      visible !important;

  }


  /*
   * Documentation is technical content:
   * body copy stays LEFT aligned for readability.
   */

  [aria-label="Noytrix API documentation"]
  h1 {

    margin:
      8px
      auto
      14px !important;

    font-size:
      28px !important;

    line-height:
      1.08 !important;

    text-align:
      center !important;

  }


  [aria-label="Noytrix API documentation"]
  h2 {

    margin:
      24px
      0
      9px !important;

    font-size:
      21px !important;

    line-height:
      1.18 !important;

    text-align:
      left !important;

  }


  [aria-label="Noytrix API documentation"]
  h3 {

    margin:
      18px
      0
      8px !important;

    font-size:
      17px !important;

    line-height:
      1.2 !important;

    text-align:
      left !important;

  }


  [aria-label="Noytrix API documentation"]
  p,

  [aria-label="Noytrix API documentation"]
  li {

    font-size:
      13px !important;

    line-height:
      1.55 !important;

    text-align:
      left !important;

  }


  /*
   * CODE: horizontal scroll INSIDE block,
   * never the whole page.
   */

  [aria-label="Noytrix API documentation"]
  pre {

    display:
      block !important;

    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      10px
      0
      14px !important;

    padding:
      12px !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    white-space:
      pre !important;

    font-size:
      10.5px !important;

    line-height:
      1.55 !important;

    border-radius:
      12px !important;

    -webkit-overflow-scrolling:
      touch !important;

    text-align:
      left !important;

  }


  [aria-label="Noytrix API documentation"]
  code {

    text-align:
      left !important;

    word-break:
      normal !important;

    overflow-wrap:
      normal !important;

  }


  /*
   * TABLES: scroll inside themselves.
   */

  [aria-label="Noytrix API documentation"]
  table {

    display:
      block !important;

    width:
      100% !important;

    max-width:
      100% !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    margin:
      10px
      0
      16px !important;

    font-size:
      11px !important;

    -webkit-overflow-scrolling:
      touch !important;

  }


  [aria-label="Noytrix API documentation"]
  th,

  [aria-label="Noytrix API documentation"]
  td {

    min-width:
      105px !important;

    padding:
      8px !important;

    font-size:
      11px !important;

    line-height:
      1.4 !important;

    text-align:
      left !important;

    vertical-align:
      top !important;

  }


  [aria-label="Noytrix API documentation"]
  input,

  [aria-label="Noytrix API documentation"]
  textarea,

  [aria-label="Noytrix API documentation"]
  select {

    width:
      100% !important;

    max-width:
      100% !important;

    font-size:
      16px !important;

  }

}


@media (max-width: 390px) {

  #screen-billing
  .nxm-api-plan-card-v4 {

    flex-basis:
      calc(
        100vw -
        66px
      )
      !important;

    width:
      calc(
        100vw -
        66px
      )
      !important;

    min-width:
      calc(
        100vw -
        66px
      )
      !important;

    max-width:
      calc(
        100vw -
        66px
      )
      !important;

  }


  [aria-label="Noytrix API documentation"]
  h1 {

    font-size:
      25px !important;

  }

}


/* NOYTRIX MOBILE BILLING API V4 CSS END */


/* NOYTRIX MOBILE API UI V5 CSS START */

@media (max-width: 820px) {


  /*
   * ========================================================
   * BILLING -> API FOR BUSINESS HERO
   *
   * TITLE
   * then
   * API DOCUMENTATION BUTTON
   * ========================================================
   */

  #screen-billing
  .nxm-api-billing-hero-v5 {

    width:
      100% !important;

    max-width:
      100% !important;

    display:
      grid !important;

    grid-template-columns:
      minmax(
        0,
        1fr
      )
      !important;

    grid-template-rows:
      auto
      auto !important;

    justify-items:
      center !important;

    align-items:
      center !important;

    gap:
      16px !important;

    text-align:
      center !important;

  }


  #screen-billing
  .nxm-api-billing-title-v5 {

    width:
      100% !important;

    max-width:
      100% !important;

    grid-column:
      1 !important;

    grid-row:
      1 !important;

    margin:
      0
      auto !important;

    text-align:
      center !important;

    justify-self:
      center !important;

  }


  #screen-billing
  .nxm-api-billing-title-v5
  * {

    text-align:
      center !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

  }


  #screen-billing
  .nxm-api-billing-docs-slot-v5 {

    width:
      100% !important;

    max-width:
      100% !important;

    grid-column:
      1 !important;

    grid-row:
      2 !important;

    display:
      flex !important;

    justify-content:
      center !important;

    align-items:
      center !important;

    margin:
      0
      auto !important;

    padding:
      0 !important;

  }


  #screen-billing
  .nxm-api-billing-docs-button-v5 {

    width:
      min(
        320px,
        calc(
          100vw -
          46px
        )
      )
      !important;

    min-width:
      0 !important;

    max-width:
      320px !important;

    min-height:
      52px !important;

    height:
      52px !important;

    margin:
      0
      auto
      22px !important;

    padding:
      0
      20px !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    position:
      static !important;

    inset:
      auto !important;

    transform:
      none !important;

    text-align:
      center !important;

    border-radius:
      14px !important;

    white-space:
      nowrap !important;

  }


  /*
   * ========================================================
   * DEVELOPER PAGE:
   *
   * GET API KEY | API DOCUMENTATION
   *
   * SAME RECTANGLE
   * SAME HEIGHT
   * SAME WIDTH
   * ONE LINE
   * ========================================================
   */

  #screen-api
  .nxm-dev-actions-row-v5 {

    width:
      100% !important;

    max-width:
      590px !important;

    margin:
      22px
      auto
      18px !important;

    display:
      grid !important;

    grid-template-columns:
      minmax(
        0,
        1fr
      )
      minmax(
        0,
        1fr
      )
      !important;

    gap:
      10px !important;

    align-items:
      stretch !important;

    justify-content:
      center !important;

  }


  #screen-api
  .nxm-dev-action-slot-v5 {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    height:
      64px !important;

    min-height:
      64px !important;

    margin:
      0 !important;

    padding:
      0 !important;

    display:
      flex !important;

    align-items:
      stretch !important;

  }


  #screen-api
  .nxm-dev-main-action-v5 {

    position:
      static !important;

    inset:
      auto !important;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    height:
      64px !important;

    min-height:
      64px !important;

    max-height:
      64px !important;

    margin:
      0 !important;

    padding:
      0
      12px !important;

    display:
      flex !important;

    flex:
      1
      1
      auto !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    gap:
      8px !important;

    border-radius:
      14px !important;

    font-size:
      13px !important;

    font-weight:
      850 !important;

    line-height:
      1.05 !important;

    text-align:
      center !important;

    white-space:
      nowrap !important;

    transform:
      none !important;

    box-sizing:
      border-box !important;

  }


  /*
   * Yellow API key button.
   */

  #screen-api
  .nxm-dev-key-action-v5 {

    border:
      1px solid
      rgba(
        255,
        196,
        73,
        .92
      )
      !important;

    background:
      linear-gradient(
        135deg,
        #ffc94d,
        #f2a900
      )
      !important;

    color:
      #071321 !important;

  }


  /*
   * Dark documentation button.
   */

  #screen-api
  .nxm-dev-docs-action-v5 {

    border:
      1px solid
      rgba(
        255,
        190,
        50,
        .75
      )
      !important;

    background:
      linear-gradient(
        145deg,
        rgba(
          255,
          186,
          45,
          .12
        ),
        rgba(
          11,
          31,
          53,
          .98
        )
      )
      !important;

    color:
      #ffd068 !important;

  }


  /*
   * Existing SVG/icon must not change button width.
   */

  #screen-api
  .nxm-dev-main-action-v5
  svg {

    width:
      20px !important;

    height:
      20px !important;

    flex:
      0
      0
      20px !important;

  }


  /*
   * ========================================================
   * WHAT YOU CAN CHECK
   *
   * NO CLIPPED CONTRACTS.
   * LEFT-ALIGNED 2 COLUMN GRID.
   * ========================================================
   */

  #screen-api
  .nxm-check-section-v5 {

    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      16px
      0
      20px !important;

    padding:
      16px
      18px
      18px !important;

    overflow:
      hidden !important;

    text-align:
      left !important;

    box-sizing:
      border-box !important;

  }


  #screen-api
  .nxm-check-title-v5 {

    width:
      100% !important;

    margin:
      0
      0
      13px !important;

    padding:
      0 !important;

    display:
      block !important;

    text-align:
      left !important;

    justify-self:
      start !important;

    align-self:
      start !important;

  }


  #screen-api
  .nxm-check-grid-v5 {

    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      0 !important;

    padding:
      0 !important;

    display:
      grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      )
      !important;

    grid-auto-flow:
      row !important;

    gap:
      10px !important;

    overflow:
      visible !important;

    transform:
      none !important;

  }


  #screen-api
  .nxm-check-item-v5 {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    min-height:
      58px !important;

    margin:
      0 !important;

    padding:
      9px
      11px !important;

    display:
      flex !important;

    flex-direction:
      row !important;

    align-items:
      center !important;

    justify-content:
      flex-start !important;

    gap:
      9px !important;

    text-align:
      left !important;

    border:
      1px solid
      rgba(
        85,
        125,
        172,
        .16
      )
      !important;

    border-radius:
      13px !important;

    background:
      rgba(
        11,
        34,
        60,
        .50
      )
      !important;

    box-sizing:
      border-box !important;

  }


  #screen-api
  .nxm-check-item-v5
  * {

    text-align:
      left !important;

  }


  /*
   * Small icon blocks.
   */

  #screen-api
  .nxm-check-item-v5
  svg {

    width:
      25px !important;

    height:
      25px !important;

    flex:
      0
      0
      25px !important;

  }


  /*
   * Kill horizontal carousel behavior
   * from this particular capability block.
   */

  #screen-api
  .nxm-check-grid-v5 {

    overflow-x:
      visible !important;

    scroll-snap-type:
      none !important;

    touch-action:
      pan-y !important;

  }

}


/*
 * VERY SMALL PHONE
 */

@media (max-width: 390px) {


  #screen-api
  .nxm-dev-actions-row-v5 {

    gap:
      8px !important;

  }


  #screen-api
  .nxm-dev-main-action-v5 {

    height:
      60px !important;

    min-height:
      60px !important;

    max-height:
      60px !important;

    padding-left:
      8px !important;

    padding-right:
      8px !important;

    font-size:
      12px !important;

  }


  #screen-api
  .nxm-check-section-v5 {

    padding-left:
      12px !important;

    padding-right:
      12px !important;

  }


  #screen-api
  .nxm-check-item-v5 {

    padding-left:
      8px !important;

    padding-right:
      8px !important;

    font-size:
      12px !important;

  }

}


/* NOYTRIX MOBILE API UI V5 CSS END */


/* NOYTRIX DEV MOBILE V6 CSS START */

@media (max-width: 820px) {


  /*
   * ========================================================
   * WHAT YOU CAN CHECK
   * ========================================================
   */

  #screen-api
  .nxm-check-section-v6 {

    width:
      calc(
        100% -
        14px
      )
      !important;

    max-width:
      none !important;

    margin:
      18px
      7px
      20px !important;

    padding:
      15px
      14px
      16px !important;

    display:
      block !important;

    overflow:
      hidden !important;

    border-radius:
      18px !important;

    text-align:
      left !important;

    box-sizing:
      border-box !important;

  }


  /*
   * Heading moves LEFT.
   */

  #screen-api
  .nxm-check-heading-v6 {

    width:
      100% !important;

    max-width:
      none !important;

    margin:
      0
      0
      12px !important;

    padding:
      0
      2px !important;

    display:
      block !important;

    position:
      static !important;

    inset:
      auto !important;

    transform:
      none !important;

    text-align:
      left !important;

    justify-self:
      start !important;

    font-size:
      11px !important;

    font-weight:
      800 !important;

    line-height:
      1 !important;

    letter-spacing:
      .10em !important;

  }


  /*
   * Real 2-column mobile grid.
   */

  #screen-api
  .nxm-check-grid-v6 {

    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      0 !important;

    padding:
      0 !important;

    display:
      grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      )
      !important;

    grid-auto-flow:
      row !important;

    gap:
      9px !important;

    overflow:
      visible !important;

    scroll-snap-type:
      none !important;

    transform:
      none !important;

    box-sizing:
      border-box !important;

  }


  /*
   * Individual item.
   */

  #screen-api
  .nxm-check-item-v6 {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    height:
      58px !important;

    min-height:
      58px !important;

    max-height:
      58px !important;

    margin:
      0 !important;

    padding:
      8px
      10px !important;

    display:
      flex !important;

    flex-direction:
      row !important;

    align-items:
      center !important;

    justify-content:
      flex-start !important;

    gap:
      9px !important;

    position:
      relative !important;

    inset:
      auto !important;

    transform:
      none !important;

    border:
      1px solid
      rgba(
        84,
        124,
        170,
        .18
      )
      !important;

    border-radius:
      13px !important;

    background:
      rgba(
        10,
        33,
        59,
        .58
      )
      !important;

    text-align:
      left !important;

    white-space:
      nowrap !important;

    overflow:
      hidden !important;

    box-sizing:
      border-box !important;

  }


  /*
   * Everything inside aligns left.
   */

  #screen-api
  .nxm-check-item-v6
  * {

    text-align:
      left !important;

  }


  /*
   * Icons.
   */

  #screen-api
  .nxm-check-item-v6
  svg {

    width:
      24px !important;

    height:
      24px !important;

    min-width:
      24px !important;

    flex:
      0
      0
      24px !important;

  }


  #screen-api
  .nxm-check-item-v6
  img {

    width:
      24px !important;

    height:
      24px !important;

    min-width:
      24px !important;

    object-fit:
      contain !important;

  }


  /*
   * Labels.
   */

  #screen-api
  .nxm-check-item-v6
  span,

  #screen-api
  .nxm-check-item-v6
  strong,

  #screen-api
  .nxm-check-item-v6
  p,

  #screen-api
  .nxm-check-item-v6
  b {

    min-width:
      0 !important;

    max-width:
      100% !important;

    margin:
      0 !important;

    font-size:
      13px !important;

    line-height:
      1.05 !important;

    text-align:
      left !important;

    overflow:
      hidden !important;

    text-overflow:
      ellipsis !important;

  }


  /*
   * Old horizontal-track leftovers.
   */

  #screen-api
  .nxm-check-empty-v6 {

    display:
      none !important;

  }

}


/*
 * Very narrow phone:
 * slightly smaller spacing but still 2 columns.
 */

@media (max-width: 390px) {


  #screen-api
  .nxm-check-section-v6 {

    margin-left:
      5px !important;

    margin-right:
      5px !important;

    width:
      calc(
        100% -
        10px
      )
      !important;

    padding-left:
      10px !important;

    padding-right:
      10px !important;

  }


  #screen-api
  .nxm-check-grid-v6 {

    gap:
      7px !important;

  }


  #screen-api
  .nxm-check-item-v6 {

    padding-left:
      8px !important;

    padding-right:
      8px !important;

    gap:
      7px !important;

  }


  #screen-api
  .nxm-check-item-v6
  span,

  #screen-api
  .nxm-check-item-v6
  strong,

  #screen-api
  .nxm-check-item-v6
  p,

  #screen-api
  .nxm-check-item-v6
  b {

    font-size:
      12px !important;

  }

}


/* NOYTRIX DEV MOBILE V6 CSS END */


/* NOYTRIX PRODUCTS MOBILE V10 CSS START */


@media (max-width: 820px) {


  /*
   * ========================================================
   * PRODUCTS SCREEN = NO VERTICAL PAGE SCROLL
   * ========================================================
   */

  body:has(
    #screen-products.active
  ) {

    overflow-y:
      hidden !important;

    overscroll-behavior-y:
      none !important;

  }


  #screen-products.nxm-products-fit-v10 {

    width:
      100% !important;

    min-width:
      0 !important;

    height:
      var(
        --nxm-products-height-v10
      )
      !important;

    min-height:
      0 !important;

    max-height:
      var(
        --nxm-products-height-v10
      )
      !important;

    margin:
      0 !important;

    padding:
      0
      6px
      4px !important;

    overflow:
      hidden !important;

    box-sizing:
      border-box !important;

  }


  /*
   * ========================================================
   * ENTIRE CAROUSEL = EXACT SCREEN HEIGHT
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .products-v23 {

    width:
      100% !important;

    height:
      100% !important;

    min-height:
      0 !important;

    max-height:
      100% !important;

    margin:
      0 !important;

    padding:
      0 !important;

    overflow:
      hidden !important;

  }


  #screen-products.nxm-products-fit-v10
  .products-stage-v23 {

    position:
      relative !important;

    width:
      100% !important;

    height:
      100% !important;

    min-height:
      0 !important;

    max-height:
      100% !important;

    margin:
      0 !important;

    overflow:
      hidden !important;

    box-sizing:
      border-box !important;

  }


  #screen-products.nxm-products-fit-v10
  .products-slides-v23 {

    width:
      100% !important;

    height:
      100% !important;

    min-height:
      0 !important;

    max-height:
      100% !important;

    overflow:
      hidden !important;

  }


  /*
   * ========================================================
   * EACH SLIDE = EXACTLY ONE PHONE SCREEN
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23 {

    width:
      100% !important;

    height:
      100% !important;

    min-height:
      0 !important;

    max-height:
      100% !important;

    margin:
      0 !important;

    padding:
      clamp(
        12px,
        1.8dvh,
        20px
      )
      14px
      58px
      !important;

    display:
      grid !important;

    grid-template-columns:
      minmax(
        0,
        1fr
      )
      !important;

    grid-template-rows:
      auto
      minmax(
        0,
        1fr
      )
      !important;

    align-items:
      start !important;

    justify-items:
      center !important;

    overflow:
      hidden !important;

    box-sizing:
      border-box !important;

  }


  /*
   * ========================================================
   * COPY — COMPACT + PERFECTLY CENTERED
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-copy-v23 {

    grid-column:
      1 !important;

    grid-row:
      1 !important;

    position:
      relative !important;

    inset:
      auto !important;

    transform:
      none !important;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    height:
      auto !important;

    margin:
      0
      auto !important;

    padding:
      0
      14px !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      center !important;

    justify-content:
      flex-start !important;

    gap:
      clamp(
        4px,
        .8dvh,
        8px
      )
      !important;

    text-align:
      center !important;

    box-sizing:
      border-box !important;

    z-index:
      5 !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-number-v23 {

    margin:
      0
      auto
      2px !important;

    font-size:
      11px !important;

    line-height:
      1 !important;

    text-align:
      center !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-eyebrow-v23 {

    width:
      auto !important;

    max-width:
      calc(
        100% -
        12px
      )
      !important;

    margin:
      0
      auto
      4px !important;

    padding:
      8px
      15px !important;

    font-size:
      clamp(
        10px,
        2.7vw,
        13px
      )
      !important;

    line-height:
      1 !important;

    white-space:
      nowrap !important;

    text-align:
      center !important;

  }


  /*
   * Main headline.
   */

  #screen-products.nxm-products-fit-v10
  .product-copy-v23
  h1,

  #screen-products.nxm-products-fit-v10
  .product-copy-v23
  h2,

  #screen-products.nxm-products-fit-v10
  .product-copy-v23
  h3 {

    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      5px
      auto
      5px !important;

    padding:
      0 !important;

    font-size:
      clamp(
        29px,
        8.8vw,
        42px
      )
      !important;

    line-height:
      .98 !important;

    letter-spacing:
      -.04em !important;

    text-align:
      center !important;

    white-space:
      normal !important;

    overflow:
      visible !important;

  }


  /*
   * Description.
   *
   * THIS fixes the Telegram sentence
   * that was running out of the right side.
   */

  #screen-products.nxm-products-fit-v10
  .product-copy-v23
  p {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    margin:
      4px
      auto
      2px !important;

    padding:
      0
      3px !important;

    font-size:
      clamp(
        12px,
        3.25vw,
        15px
      )
      !important;

    line-height:
      1.32 !important;

    text-align:
      center !important;

    white-space:
      normal !important;

    overflow:
      visible !important;

    text-overflow:
      clip !important;

    overflow-wrap:
      anywhere !important;

    word-break:
      normal !important;

    box-sizing:
      border-box !important;

  }


  /*
   * ========================================================
   * CTA + NOTE
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-actions-v23 {

    width:
      100% !important;

    max-width:
      360px !important;

    margin:
      8px
      auto
      0 !important;

    padding:
      0 !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    gap:
      6px !important;

    text-align:
      center !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-cta-v23 {

    width:
      min(
        100%,
        350px
      )
      !important;

    min-width:
      0 !important;

    max-width:
      350px !important;

    height:
      50px !important;

    min-height:
      50px !important;

    max-height:
      50px !important;

    margin:
      0
      auto !important;

    padding:
      0
      15px !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    text-align:
      center !important;

    box-sizing:
      border-box !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-actions-v23
  small,

  #screen-products.nxm-products-fit-v10
  .product-actions-v23
  p,

  #screen-products.nxm-products-fit-v10
  .product-actions-v23
  span {

    max-width:
      100% !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    text-align:
      center !important;

  }


  /*
   * ========================================================
   * VISUAL — USE ALL REMAINING SPACE, NEVER MAKE PAGE TALLER
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-visual-v23 {

    grid-column:
      1 !important;

    grid-row:
      2 !important;

    position:
      relative !important;

    inset:
      auto !important;

    transform:
      none !important;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    height:
      100% !important;

    min-height:
      0 !important;

    max-height:
      100% !important;

    margin:
      3px
      auto
      0 !important;

    padding:
      0 !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    overflow:
      hidden !important;

    box-sizing:
      border-box !important;

  }


  /*
   * Any large laptop / Telegram image / antivirus mockup
   * must stay inside the visual zone.
   */

  #screen-products.nxm-products-fit-v10
  .product-visual-v23
  > * {

    max-width:
      100% !important;

    max-height:
      100% !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    box-sizing:
      border-box !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-visual-v23
  img,

  #screen-products.nxm-products-fit-v10
  .product-visual-v23
  picture,

  #screen-products.nxm-products-fit-v10
  .product-visual-v23
  video {

    display:
      block !important;

    width:
      auto !important;

    height:
      auto !important;

    max-width:
      100% !important;

    max-height:
      100% !important;

    margin:
      auto !important;

    object-fit:
      contain !important;

  }


  /*
   * ========================================================
   * TELEGRAM — HARD FIX
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-copy-v23 {

    width:
      100% !important;

    max-width:
      100% !important;

    padding-left:
      12px !important;

    padding-right:
      12px !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-copy-v23
  p {

    width:
      100% !important;

    max-width:
      100% !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    padding:
      0
      2px !important;

    transform:
      none !important;

    left:
      auto !important;

    right:
      auto !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-visual-v23 {

    width:
      100% !important;

    max-width:
      100% !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    transform:
      none !important;

  }


  /*
   * ========================================================
   * ARROWS
   *
   * Stay at the sides and never create extra height.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .products-arrow-v23 {

    position:
      absolute !important;

    top:
      64% !important;

    bottom:
      auto !important;

    width:
      48px !important;

    height:
      48px !important;

    min-width:
      48px !important;

    min-height:
      48px !important;

    transform:
      translateY(
        -50%
      )
      !important;

    z-index:
      30 !important;

  }


  #screen-products.nxm-products-fit-v10
  .products-arrow-v23.previous {

    left:
      14px !important;

    right:
      auto !important;

  }


  #screen-products.nxm-products-fit-v10
  .products-arrow-v23.next {

    right:
      14px !important;

    left:
      auto !important;

  }


  /*
   * ========================================================
   * DOTS
   *
   * Always visible at bottom of SAME screen.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .products-dots-v23 {

    position:
      absolute !important;

    left:
      50% !important;

    right:
      auto !important;

    top:
      auto !important;

    bottom:
      12px !important;

    transform:
      translateX(
        -50%
      )
      !important;

    margin:
      0 !important;

    z-index:
      40 !important;

  }


  /*
   * Old counter/swipe hint consumes vertical space.
   * On phone dots already communicate carousel state.
   */

  #screen-products.nxm-products-fit-v10
  .products-counter-v23,

  #screen-products.nxm-products-fit-v10
  .products-swipe-v23 {

    display:
      none !important;

  }


  /*
   * Decorative massive background word
   * must never affect layout.
   */

  #screen-products.nxm-products-fit-v10
  .product-massive-word-v23 {

    position:
      absolute !important;

    pointer-events:
      none !important;

  }

}


/*
 * ==========================================================
 * SHORT PHONE
 * Compact further instead of introducing vertical scroll.
 * ==========================================================
 */

@media (
  max-width: 820px
)
and (
  max-height: 740px
) {


  #screen-products.nxm-products-fit-v10
  .product-slide-v23 {

    padding-top:
      9px !important;

    padding-left:
      10px !important;

    padding-right:
      10px !important;

    padding-bottom:
      50px !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-copy-v23 {

    gap:
      3px !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-number-v23 {

    display:
      none !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-eyebrow-v23 {

    padding:
      6px
      11px !important;

    margin-bottom:
      1px !important;

    font-size:
      9px !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-copy-v23
  h1,

  #screen-products.nxm-products-fit-v10
  .product-copy-v23
  h2,

  #screen-products.nxm-products-fit-v10
  .product-copy-v23
  h3 {

    margin:
      2px
      auto !important;

    font-size:
      clamp(
        25px,
        7.8vw,
        34px
      )
      !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-copy-v23
  p {

    margin:
      2px
      auto !important;

    font-size:
      11px !important;

    line-height:
      1.22 !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-actions-v23 {

    margin-top:
      4px !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-cta-v23 {

    height:
      44px !important;

    min-height:
      44px !important;

    max-height:
      44px !important;

  }


  #screen-products.nxm-products-fit-v10
  .products-arrow-v23 {

    width:
      44px !important;

    height:
      44px !important;

    min-width:
      44px !important;

    min-height:
      44px !important;

  }

}


/* NOYTRIX PRODUCTS MOBILE V10 CSS END */


/* NOYTRIX PRODUCTS MOBILE V10.1 START */

@media (max-width: 820px) {


  /*
   * ========================================================
   * FIX THE ACTUAL CAROUSEL
   *
   * V10 accidentally allowed slides to shrink.
   * The original JS moves the whole strip by slide width,
   * therefore every slide MUST remain exactly 100%.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .products-slides-v23 {

    display:
      flex !important;

    flex-direction:
      row !important;

    flex-wrap:
      nowrap !important;

    align-items:
      stretch !important;

    justify-content:
      flex-start !important;

    width:
      100% !important;

    min-width:
      100% !important;

    height:
      100% !important;

    min-height:
      0 !important;

    max-height:
      100% !important;

    overflow:
      visible !important;

    /*
     * DO NOT override transform.
     * products-v23.js owns translateX().
     */

    box-sizing:
      border-box !important;

  }


  /*
   * EVERY SLIDE MUST BE ONE FULL CAROUSEL WIDTH.
   *
   * This is the critical fix.
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23 {

    flex:
      0 0 100% !important;

    flex-grow:
      0 !important;

    flex-shrink:
      0 !important;

    flex-basis:
      100% !important;

    width:
      100% !important;

    min-width:
      100% !important;

    max-width:
      100% !important;

    height:
      100% !important;

    min-height:
      0 !important;

    max-height:
      100% !important;

    box-sizing:
      border-box !important;

  }


  /*
   * ========================================================
   * KEEP EACH SLIDE'S CONTENT VISIBLE
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23
  .product-copy-v23,

  #screen-products.nxm-products-fit-v10
  .product-slide-v23
  .product-visual-v23 {

    visibility:
      visible !important;

    opacity:
      1 !important;

  }


  /*
   * ========================================================
   * TELEGRAM
   * Keep everything centered and inside the card.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram {

    overflow:
      hidden !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-copy-v23 {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    padding-left:
      16px !important;

    padding-right:
      16px !important;

    align-items:
      center !important;

    text-align:
      center !important;

    transform:
      none !important;

    left:
      auto !important;

    right:
      auto !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-copy-v23
  h1,

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-copy-v23
  h2,

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-copy-v23
  h3,

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-copy-v23
  p {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    text-align:
      center !important;

    white-space:
      normal !important;

    overflow:
      visible !important;

    text-overflow:
      clip !important;

    overflow-wrap:
      break-word !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-actions-v23 {

    width:
      100% !important;

    max-width:
      350px !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    align-items:
      center !important;

    justify-content:
      center !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-visual-v23 {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    transform:
      none !important;

  }


  /*
   * Actual Telegram screenshot.
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-visual-v23
  img {

    display:
      block !important;

    width:
      auto !important;

    height:
      auto !important;

    max-width:
      100% !important;

    max-height:
      100% !important;

    margin:
      auto !important;

    object-fit:
      contain !important;

    object-position:
      center center !important;

  }


  /*
   * ========================================================
   * EXTENSION + ANTIVIRUS + MOBILE
   * Same full-width protection.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-extension,

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus,

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-mobile {

    flex:
      0 0 100% !important;

    width:
      100% !important;

    min-width:
      100% !important;

    max-width:
      100% !important;

  }


  /*
   * ========================================================
   * DOTS + ARROWS
   * Keep exactly where V10 put them.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .products-arrow-v23,

  #screen-products.nxm-products-fit-v10
  .products-dots-v23 {

    visibility:
      visible !important;

    opacity:
      1 !important;

  }

}


/* NOYTRIX PRODUCTS MOBILE V10.1 END */


/* NOYTRIX PRODUCTS MOBILE V10.3 CSS START */

@media (max-width: 820px) {


  /*
   * ========================================================
   * IMPORTANT:
   *
   * Carousel geometry from V10/V10.1 stays untouched.
   * We change ONLY the visual composition.
   * ========================================================
   */


  #screen-products.nxm-products-fit-v10
  .product-visual-v23 {

    overflow:
      visible !important;

    transform-origin:
      center center !important;

  }


  /*
   * ========================================================
   * 01 — MOBILE APP
   *
   * User request:
   * phone screenshot approximately 3x smaller.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-mobile
  .product-visual-v23 {

    width:
      100% !important;

    height:
      100% !important;

    margin:
      0
      auto !important;

    transform:
      translateY(-1%)
      scale(.36)
      !important;

    transform-origin:
      center top !important;

  }


  /*
   * Do NOT additionally shrink the children.
   * The whole original composition is already scaled.
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-mobile
  .product-visual-v23
  > * {

    max-width:
      none !important;

    max-height:
      none !important;

  }


  /*
   * ========================================================
   * 02 — BROWSER EXTENSION
   *
   * Laptop + its own labels are treated as ONE composition.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-extension
  .product-visual-v23 {

    width:
      100% !important;

    height:
      100% !important;

    margin:
      0
      auto !important;

    transform:
      translateY(-2%)
      scale(.72)
      !important;

    transform-origin:
      center top !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-extension
  .product-visual-v23
  > * {

    max-width:
      none !important;

    max-height:
      none !important;

  }


  /*
   * The NOYTRIX SHIELD • LIVE PROTECTION label
   * was drifting to the right.
   */

  #screen-products
  .nxm-extension-caption-v103 {

    position:
      relative !important;

    left:
      50% !important;

    right:
      auto !important;

    width:
      max-content !important;

    max-width:
      90% !important;

    margin-left:
      0 !important;

    margin-right:
      0 !important;

    text-align:
      center !important;

    transform:
      translateX(-50%)
      !important;

    white-space:
      nowrap !important;

  }


  /*
   * ========================================================
   * 03 — TELEGRAM
   *
   * Keep the original Telegram screenshot as one unit.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-visual-v23 {

    width:
      100% !important;

    height:
      100% !important;

    margin:
      0
      auto !important;

    transform:
      translateY(-1%)
      scale(.70)
      !important;

    transform-origin:
      center top !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-visual-v23
  > * {

    max-width:
      none !important;

    max-height:
      none !important;

  }


  /*
   * Telegram text above screenshot stays normal.
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-copy-v23 {

    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      0
      auto !important;

    padding-left:
      18px !important;

    padding-right:
      18px !important;

    transform:
      none !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-copy-v23
  p {

    width:
      100% !important;

    max-width:
      100% !important;

    text-align:
      center !important;

    white-space:
      normal !important;

    overflow:
      visible !important;

  }


  /*
   * ========================================================
   * 04 — ANTIVIRUS
   *
   * CRITICAL:
   * monitor + halo + Browser/Wallet/Downloads are scaled
   * TOGETHER instead of being resized independently.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .product-visual-v23 {

    width:
      100% !important;

    height:
      100% !important;

    margin:
      0
      auto !important;

    overflow:
      visible !important;

    transform:
      translateY(-2%)
      scale(.64)
      !important;

    transform-origin:
      center top !important;

  }


  /*
   * Undo the broad child size limits from the earlier
   * mobile visual experiment.
   *
   * We want the ORIGINAL desktop composition internally.
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .product-visual-v23
  > * {

    max-width:
      none !important;

    max-height:
      none !important;

  }


  /*
   * Do not convert antivirus children into mobile flex rows.
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .product-visual-v23
  [style] {

    max-width:
      none;

  }


  /*
   * ========================================================
   * GENERAL MEDIA:
   *
   * Do not crop assets.
   * We scale the parent visual instead.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23
  .product-visual-v23
  img,

  #screen-products.nxm-products-fit-v10
  .product-slide-v23
  .product-visual-v23
  video,

  #screen-products.nxm-products-fit-v10
  .product-slide-v23
  .product-visual-v23
  picture {

    object-fit:
      contain !important;

    object-position:
      center center !important;

  }


  /*
   * ========================================================
   * SAFETY:
   * slide itself clips anything beyond rounded card.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23 {

    overflow:
      hidden !important;

  }


  /*
   * Arrows and dots are NOT part of the scaled visual.
   */

  #screen-products.nxm-products-fit-v10
  .products-arrow-v23,

  #screen-products.nxm-products-fit-v10
  .products-dots-v23 {

    transform-origin:
      center center !important;

  }

}


/* NOYTRIX PRODUCTS MOBILE V10.3 CSS END */


/* NOYTRIX PHONE DOWN V10.3.1 START */

@media (max-width: 820px) {

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-mobile
  .product-visual-v23 {

    transform:
      translate3d(
        0,
        72px,
        0
      )
      scale(.36)
      !important;

    transform-origin:
      center top
      !important;

  }

}

/* NOYTRIX PHONE DOWN V10.3.1 END */


\n



\n\n



\n


/* NOYTRIX ANTIVIRUS V10.7 FINAL START */

@media (max-width: 820px) {


  /*
   * ========================================================
   * ROOT CAUSE FIX
   *
   * V10.3 scales entire antivirus visual to .64.
   * Kill that scaling ONLY for antivirus.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .product-visual-v23 {

    transform:
      none !important;

    transform-origin:
      center center !important;

    overflow:
      visible !important;

  }


  /*
   * ========================================================
   * ORIGINAL SCENE
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .antivirus-scene-v24 {

    width:
      100% !important;

    height:
      100% !important;

    min-width:
      0 !important;

    min-height:
      0 !important;

    position:
      relative !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    overflow:
      visible !important;

  }


  /*
   * ========================================================
   * WHOLE MACHINE
   *
   * Monitor + frame + stand now scale TOGETHER.
   *
   * Current effective monitor:
   * .64 × 1.29 ≈ .826
   *
   * New final:
   * .78
   *
   * So it becomes just slightly smaller,
   * exactly as requested.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .antivirus-machine-v24 {

    position:
      relative !important;

    left:
      auto !important;

    right:
      auto !important;

    top:
      auto !important;

    bottom:
      auto !important;

    width:
      auto !important;

    max-width:
      none !important;

    margin:
      0 auto !important;

    transform:
      translate3d(
        0,
        6px,
        0
      )
      scale(.78)
      !important;

    transform-origin:
      center center !important;

    overflow:
      visible !important;

    z-index:
      12 !important;

  }


  /*
   * ========================================================
   * MONITOR
   *
   * REMOVE custom fake V10.6 frame.
   * Let ORIGINAL products-v23.css render real monitor.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .antivirus-monitor-v24 {

    position:
      relative !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    max-width:
      none !important;

    overflow:
      visible !important;

    box-sizing:
      border-box !important;

  }


  /*
   * V10.6 created its own fake lower bezel.
   * Remove it completely.
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .antivirus-monitor-v24::after {

    content:
      none !important;

    display:
      none !important;

  }


  /*
   * ========================================================
   * ORIGINAL STAND
   *
   * Keep it directly connected to monitor.
   * No independent scaling.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .antivirus-monitor-stand-v24 {

    position:
      relative !important;

    margin:
      0 auto !important;

    transform:
      none !important;

    transform-origin:
      center top !important;

  }


  /*
   * ========================================================
   * DIAMOND
   *
   * Keep approximately same visible size
   * but move it clearly upward.
   *
   * Negative top margin physically changes layout,
   * unlike the previous visual-only translate.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .antivirus-shield-v24 {

    margin-top:
      -24px !important;

    margin-bottom:
      24px !important;

    transform:
      scale(1.10)
      !important;

    transform-origin:
      center center !important;

    z-index:
      20 !important;

  }


  /*
   * ========================================================
   * CONTENT
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .antivirus-monitor-content-v24 {

    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    text-align:
      center !important;

    overflow:
      visible !important;

  }


  /*
   * CRYPTO PROTECTED stays inside monitor.
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .antivirus-monitor-content-v24
  > strong {

    position:
      relative !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    text-align:
      center !important;

  }


  /*
   * Real-time protection text.
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .antivirus-monitor-content-v24
  > small {

    position:
      relative !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    text-align:
      center !important;

  }


  /*
   * ========================================================
   * BROWSER / WALLET / DOWNLOADS
   *
   * They belong INSIDE monitor-content in original DOM.
   * Keep them there.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .antivirus-live-row-v24 {

    position:
      relative !important;

    left:
      auto !important;

    right:
      auto !important;

    top:
      auto !important;

    bottom:
      auto !important;

    transform:
      none !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    justify-content:
      center !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .antivirus-live-row-v24
  > span {

    position:
      relative !important;

    top:
      auto !important;

    transform:
      none !important;

  }


}


/* NOYTRIX ANTIVIRUS V10.7 FINAL END */

/* NOYTRIX MOBILE MONITOR SIZE FORCE START */
@media screen and (max-width: 820px) {

  html body
  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .antivirus-machine-v24 {

    transform:
      translate3d(0, calc(6px - 3cm), 0)
      scale(.34)
      !important;

    transform-origin:
      center center
      !important;
  }

}
/* NOYTRIX MOBILE MONITOR SIZE FORCE END */

/* NOYTRIX MOBILE REAL MONITOR INSIDE START */
@media screen and (max-width: 820px) {

  html body
  #screen-products
  .product-slide-v23.theme-antivirus
  .antivirus-monitor-v24 {
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
  }

  /*
   * После JS нижняя часть уже является CHILD монитора.
   * Ставим её строго внутрь рамки.
   */
  html body
  #screen-products
  .product-slide-v23.theme-antivirus
  .antivirus-monitor-v24
  > .antivirus-monitor-stand-v24 {
    display: block !important;

    position: absolute !important;

    left: 50% !important;
    bottom: 0 !important;

    margin: 0 !important;

    transform:
      translateX(-50%)
      !important;

    transform-origin:
      center bottom
      !important;

    z-index: 50 !important;

    max-width:
      calc(100% - 12px)
      !important;

    box-sizing:
      border-box
      !important;
  }

}
/* NOYTRIX MOBILE REAL MONITOR INSIDE END */



/* NOYTRIX MOBILE SIGNALS CLEAN FILTERS START */
@media screen and (max-width: 820px) {

  /*
   * ==========================================================
   * SIGNALS TOOLBAR
   * ==========================================================
   */

  html body .signals-toolbar-v19 {
    position: relative !important;

    display: grid !important;

    grid-template-columns:
      56px
      minmax(0, 1fr)
      !important;

    gap:
      12px
      12px
      !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    padding:
      20px
      22px
      18px
      !important;

    box-sizing: border-box !important;

    align-items: center !important;

    overflow: visible !important;
  }


  /*
   * SEARCH
   */

  html body .signals-toolbar-v19
  .signals-search-v19 {
    grid-column:
      1 / -1
      !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;
  }


  html body .signals-toolbar-v19
  .signals-search-v19
  input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
  }


  /*
   * ==========================================================
   * REAL NATIVE SELECT
   *
   * НЕ УДАЛЯЕМ.
   * Он остаётся в DOM для signals-v19.js.
   *
   * Но после успешной инициализации custom dropdown
   * JS добавляет класс nx-signals-native-select-v4.
   * Тогда настоящий browser select полностью скрываем.
   * ==========================================================
   */

  html body .signals-toolbar-v19
  select.nx-signals-native-select-v4,

  html body .signals-toolbar-v19
  #signalsNetworkV19.nx-signals-native-select-v4,

  html body .signals-toolbar-v19
  #signalsSeverityV19.nx-signals-native-select-v4,

  html body .signals-toolbar-v19
  #signalsPeriodV19.nx-signals-native-select-v4 {
    display: none !important;

    position: absolute !important;

    width: 0 !important;
    height: 0 !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;

    appearance: none !important;
    -webkit-appearance: none !important;
  }


  /*
   * ==========================================================
   * CUSTOM SELECT WRAPPER
   * ==========================================================
   */

  html body .signals-toolbar-v19
  .nx-signals-select-v4 {
    position: relative !important;

    grid-column:
      1 / -1
      !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    overflow: visible !important;

    z-index: 20 !important;
  }


  html body .signals-toolbar-v19
  .nx-signals-select-v4.open {
    z-index: 5000 !important;
  }


  /*
   * ==========================================================
   * VISIBLE DARK BUTTON
   * ==========================================================
   */

  html body .signals-toolbar-v19
  .nx-signals-select-button-v4 {
    appearance: none !important;
    -webkit-appearance: none !important;

    position: relative !important;

    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 54px !important;
    min-height: 54px !important;

    margin: 0 !important;

    padding:
      0
      16px
      !important;

    box-sizing: border-box !important;

    border:
      1px solid
      rgba(72, 111, 158, .55)
      !important;

    border-radius:
      14px
      !important;

    background:
      linear-gradient(
        180deg,
        rgba(8, 27, 50, .98),
        rgba(5, 20, 39, .98)
      )
      !important;

    color:
      #e5edf7
      !important;

    font-family:
      inherit
      !important;

    font-size:
      16px
      !important;

    font-weight:
      700
      !important;

    line-height:
      1
      !important;

    text-align:
      left
      !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025)
      !important;

    cursor: pointer !important;
  }


  html body .signals-toolbar-v19
  .nx-signals-select-label-v4 {
    display: block !important;

    min-width: 0 !important;

    overflow: hidden !important;

    white-space: nowrap !important;

    text-overflow: ellipsis !important;

    color:
      #e5edf7
      !important;
  }


  html body .signals-toolbar-v19
  .nx-signals-select-arrow-v4 {
    flex: 0 0 auto !important;

    margin-left:
      12px
      !important;

    color:
      #9eb1c8
      !important;
  }


  /*
   * ==========================================================
   * CUSTOM MENU
   *
   * ЗАКРЫТО = вообще не видно
   * OPEN     = только тёмное меню
   * ==========================================================
   */

  html body .signals-toolbar-v19
  .nx-signals-select-menu-v4 {
    position: absolute !important;

    top:
      calc(100% + 7px)
      !important;

    left: 0 !important;
    right: auto !important;

    display: none !important;

    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    max-height:
      310px
      !important;

    margin: 0 !important;
    padding: 6px !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    visibility: hidden !important;
    opacity: 0 !important;

    pointer-events: none !important;

    border:
      1px solid
      rgba(72, 111, 158, .58)
      !important;

    border-radius:
      14px
      !important;

    background:
      rgba(5, 18, 34, .995)
      !important;

    box-shadow:
      0 20px 50px
      rgba(0, 0, 0, .48)
      !important;

    z-index:
      99999
      !important;
  }


  html body .signals-toolbar-v19
  .nx-signals-select-v4.open
  .nx-signals-select-menu-v4 {
    display: block !important;

    visibility: visible !important;
    opacity: 1 !important;

    pointer-events: auto !important;
  }


  /*
   * ==========================================================
   * DROPDOWN OPTIONS
   * ==========================================================
   */

  html body .signals-toolbar-v19
  .nx-signals-select-option-v4 {
    appearance: none !important;
    -webkit-appearance: none !important;

    position: relative !important;

    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    min-height:
      48px
      !important;

    margin: 0 !important;

    padding:
      0
      13px
      !important;

    box-sizing: border-box !important;

    border: 0 !important;

    border-radius:
      9px
      !important;

    background:
      transparent
      !important;

    color:
      #dce7f4
      !important;

    font-family:
      inherit
      !important;

    font-size:
      15px
      !important;

    font-weight:
      600
      !important;

    line-height:
      1.2
      !important;

    text-align:
      left
      !important;

    box-shadow:
      none
      !important;
  }


  html body .signals-toolbar-v19
  .nx-signals-select-option-v4:hover,

  html body .signals-toolbar-v19
  .nx-signals-select-option-v4:focus-visible {
    background:
      rgba(68, 111, 164, .16)
      !important;

    color:
      #ffffff
      !important;
  }


  html body .signals-toolbar-v19
  .nx-signals-select-option-v4.selected {
    background:
      rgba(219, 162, 37, .11)
      !important;

    color:
      #ffffff
      !important;
  }


  html body .signals-toolbar-v19
  .nx-signals-select-option-label-v4 {
    min-width: 0 !important;

    color: inherit !important;

    white-space: normal !important;
  }


  html body .signals-toolbar-v19
  .nx-signals-select-check-v4 {
    flex: 0 0 auto !important;

    margin-left:
      12px
      !important;

    color:
      #e6ad2f
      !important;
  }


  /*
   * ==========================================================
   * ONLY NEW
   * ==========================================================
   */

  html body .signals-toolbar-v19
  .signals-new-v19 {
    grid-column:
      1 / -1
      !important;

    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height:
      50px
      !important;

    margin:
      2px
      0
      0
      !important;

    box-sizing: border-box !important;
  }


  /*
   * ==========================================================
   * REFRESH + UPDATED TEXT
   * ==========================================================
   */

  html body .signals-toolbar-v19
  .signals-refresh-v19 {
    grid-column:
      1
      !important;

    grid-row:
      auto
      !important;

    justify-self:
      start
      !important;

    width: 52px !important;
    height: 52px !important;

    min-width: 52px !important;
    min-height: 52px !important;

    margin: 0 !important;

    box-sizing: border-box !important;
  }


  html body .signals-toolbar-v19
  .signals-updated-v19 {
    grid-column:
      2
      !important;

    align-self:
      center
      !important;

    justify-self:
      start
      !important;

    width: auto !important;

    margin: 0 !important;

    text-align: left !important;
  }

}
/* NOYTRIX MOBILE SIGNALS CLEAN FILTERS END */

/* ==========================================================
   NOYTRIX MOBILE SIGNALS — ALL FEEDS SCROLL
   DESKTOP UNTOUCHED
   ========================================================== */
@media screen and (max-width: 820px) {

  /*
   * Убираем нижние кнопки:
   * "Все сигналы сообщества"
   * "Открыть календарь"
   * и остальные footer-кнопки Signals.
   */
  html body
  .signals-grid-v19
  .signals-column-footer-v19 {
    display: none !important;
  }


  /*
   * Все три блока:
   * Критические угрозы
   * Сигналы сообщества
   * Важные события рынка
   */
  html body
  .signals-grid-v19
  .signals-column-v19 {
    display: flex !important;
    flex-direction: column !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: hidden !important;
  }


  /*
   * ВНУТРЕННИЙ СКРОЛ ДЛЯ КАЖДОГО FEED.
   * Включая КРИТИЧЕСКИЕ УГРОЗЫ.
   */
  html body
  .signals-grid-v19
  .signals-column-v19
  .signals-feed-v19 {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    max-height: 520px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;

    scrollbar-width: thin !important;

    box-sizing: border-box !important;
  }


  /*
   * КРИТИЧЕСКИЕ УГРОЗЫ —
   * принудительно такой же скрол как у остальных.
   */
  html body
  #signalsThreatColumnV19
  #signalsThreatFeedV19 {
    max-height: 520px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
  }


  /*
   * Нормальный отступ после списка,
   * раз footer-кнопок больше нет.
   */
  html body
  .signals-grid-v19
  .signals-column-v19
  .signals-feed-v19:last-child {
    padding-bottom: 12px !important;
  }


  /*
   * Chrome scrollbar — аккуратный и тёмный.
   */
  html body
  .signals-grid-v19
  .signals-feed-v19::-webkit-scrollbar {
    width: 4px !important;
  }

  html body
  .signals-grid-v19
  .signals-feed-v19::-webkit-scrollbar-track {
    background: transparent !important;
  }

  html body
  .signals-grid-v19
  .signals-feed-v19::-webkit-scrollbar-thumb {
    background: rgba(100, 139, 185, .42) !important;
    border-radius: 999px !important;
  }

}
/* NOYTRIX MOBILE SIGNALS — ALL FEEDS SCROLL END */



/* NOYTRIX TRACKING MOBILE FINAL START */
@media screen and (max-width: 820px) {

  /* ========================================================
     ROOT
     ======================================================== */

  html body #screen-tracking,
  html body #screen-tracking .tracking-v14 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
  }


  html body #screen-tracking * {
    box-sizing: border-box;
  }


  /* ========================================================
     HERO
     ======================================================== */

  html body #screen-tracking
  .tracking-v14-head {
    width: 100% !important;
    max-width: 100% !important;

    padding-left: 20px !important;
    padding-right: 20px !important;

    box-sizing: border-box !important;
  }


  html body #screen-tracking
  .tracking-v14-head h1,
  html body #screen-tracking
  .tracking-v14-head h2 {
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    overflow-wrap: anywhere !important;
  }


  /* ========================================================
     KPI — 2 x 2
     ======================================================== */

  html body #screen-tracking
  .tracking-v14-stats {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr))
      !important;

    gap: 12px !important;

    width: 100% !important;
    max-width: 100% !important;

    padding-left: 16px !important;
    padding-right: 16px !important;

    box-sizing: border-box !important;
  }


  html body #screen-tracking
  .tracking-v14-stats > article {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 118px !important;
    height: auto !important;

    margin: 0 !important;

    padding:
      18px
      14px
      !important;

    box-sizing: border-box !important;
  }


  html body #screen-tracking
  .tracking-v14-stats .stat-icon {
    flex-shrink: 0 !important;
  }


  html body #screen-tracking
  .tracking-v14-stats small {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }


  /* ========================================================
     FILTER TOOLBAR
     ======================================================== */

  html body #screen-tracking
  .tracking-v14-toolbar {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      !important;

    gap: 12px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;

    margin: 0 !important;

    padding:
      16px
      20px
      18px
      !important;

    box-sizing: border-box !important;

    overflow: visible !important;

    text-align: left !important;
  }


  /* SEARCH */

  html body #screen-tracking
  .tracking-v14-search {
    display: flex !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 54px !important;

    margin: 0 !important;
  }


  html body #screen-tracking
  .tracking-v14-search input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    font-size: 16px !important;

    text-align: left !important;
  }


  /* NATIVE SELECTS */

  html body #screen-tracking
  .tracking-v14-toolbar select {
    max-width: 100% !important;
    min-width: 0 !important;
  }


  /*
   * nx-tracking-dropdown-v19.js создаёт wrapper
   * с data-dropdown-index.
   */
  html body #screen-tracking
  .tracking-v14-toolbar
  [data-dropdown-index] {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;
  }


  html body #screen-tracking
  .tracking-v14-toolbar
  [data-dropdown-index] > button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 54px !important;

    box-sizing: border-box !important;
  }


  /* REFRESH */

  html body #screen-tracking
  .tracking-v14-refresh {
    justify-self: start !important;

    width: 54px !important;
    height: 54px !important;

    min-width: 54px !important;
    min-height: 54px !important;

    margin: 0 !important;
  }


  /* ========================================================
     MAIN BODY

     Был desktop: TABLE | LATEST CHANGES.
     На телефоне теперь строго сверху вниз.
     ======================================================== */

  html body #screen-tracking
  .tracking-v14-body {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      !important;

    gap: 16px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    padding:
      0
      20px
      18px
      !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    overflow: visible !important;

    text-align: left !important;
  }


  /* ========================================================
     OBJECTS TABLE
     ======================================================== */

  html body #screen-tracking
  .tracking-v14-table {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;

    box-sizing: border-box !important;
  }


  /*
   * Desktop header из 5 колонок на телефоне не нужен.
   * Сами данные остаются в rows.
   */
  html body #screen-tracking
  .tracking-v14-table-head {
    display: none !important;

    min-width: 0 !important;
    width: 0 !important;
    height: 0 !important;

    overflow: hidden !important;
  }


  html body #screen-tracking
  .tracking-v14-rows {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 220px !important;

    max-height: 520px !important;

    margin: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;

    box-sizing: border-box !important;
  }


  /*
   * Любой guest / empty / object блок внутри списка
   * занимает полную ширину.
   */
  html body #screen-tracking
  .tracking-v14-rows > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
  }


  html body #screen-tracking
  .tracking-v14-rows *
  {
    max-width: 100%;
  }


  /* ========================================================
     LATEST CHANGES
     ======================================================== */

  html body #screen-tracking
  .tracking-v14-changes {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 260px !important;
    max-height: 440px !important;

    margin: 0 !important;

    padding:
      18px
      16px
      !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;

    box-sizing: border-box !important;

    text-align: left !important;
  }


  html body #screen-tracking
  .tracking-v14-changes h3 {
    width: 100% !important;

    margin:
      0
      0
      16px
      !important;

    text-align: left !important;
  }


  html body #screen-tracking
  #trackingChangesV14 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }


  html body #screen-tracking
  #trackingChangesV14 > * {
    max-width: 100% !important;
    min-width: 0 !important;
  }


  /* ========================================================
     OLD FOOTER
     ======================================================== */

  html body #screen-tracking
  .tracking-v14-footer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;

    padding:
      14px
      18px
      !important;

    overflow: visible !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     NOTIFICATION BAR
     Причина нижнего обрезания:
     desktop grid minmax(300px,1fr) auto auto auto.
     ======================================================== */

  html body #screen-tracking
  .tracking-notify-v15 {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr))
      !important;

    gap: 10px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;

    padding:
      14px
      16px
      calc(14px + env(safe-area-inset-bottom))
      !important;

    overflow: visible !important;

    box-sizing: border-box !important;
  }


  html body #screen-tracking
  .tracking-notify-info-v15 {
    grid-column:
      1 / -1
      !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
  }


  html body #screen-tracking
  .tracking-notify-info-v15 strong,
  html body #screen-tracking
  .tracking-notify-info-v15 small {
    white-space: normal !important;

    overflow: visible !important;
    text-overflow: unset !important;

    overflow-wrap: anywhere !important;

    text-align: left !important;
  }


  html body #screen-tracking
  .tracking-channel-v15,

  html body #screen-tracking
  .tracking-frequency-v15 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;
  }


  html body #screen-tracking
  .tracking-notify-status-v15 {
    grid-column:
      1 / -1
      !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
  }


  html body #screen-tracking
  .tracking-notify-v15
  select,

  html body #screen-tracking
  .tracking-notify-v15
  [data-dropdown-index] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }


  /* ========================================================
     MODAL
     ======================================================== */

  html body #screen-tracking
  .tracking-v14-modal-card {
    width:
      calc(100vw - 32px)
      !important;

    max-width:
      calc(100vw - 32px)
      !important;

    min-width: 0 !important;

    max-height:
      calc(100dvh - 32px)
      !important;

    overflow-y: auto !important;

    margin: 16px !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     NEVER ALLOW TRACKING TO CREATE PAGE HORIZONTAL SCROLL
     ======================================================== */

  html body #screen-tracking
  .tracking-v14-head,

  html body #screen-tracking
  .tracking-v14-stats,

  html body #screen-tracking
  .tracking-v14-toolbar,

  html body #screen-tracking
  .tracking-v14-body,

  html body #screen-tracking
  .tracking-v14-table,

  html body #screen-tracking
  .tracking-v14-rows,

  html body #screen-tracking
  .tracking-v14-changes,

  html body #screen-tracking
  .tracking-v14-footer,

  html body #screen-tracking
  .tracking-notify-v15 {
    transform: none !important;

    left: auto !important;
    right: auto !important;

    max-width: 100% !important;
  }

}


/* Маленькие телефоны */
@media screen and (max-width: 430px) {

  html body #screen-tracking
  .tracking-v14-stats {
    grid-template-columns:
      minmax(0, 1fr)
      !important;
  }


  html body #screen-tracking
  .tracking-notify-v15 {
    grid-template-columns:
      minmax(0, 1fr)
      !important;
  }


  html body #screen-tracking
  .tracking-notify-info-v15,

  html body #screen-tracking
  .tracking-notify-status-v15 {
    grid-column:
      1
      !important;
  }

}

/* NOYTRIX TRACKING MOBILE FINAL END */



/* NOYTRIX MOBILE TRACKING POLISH START */
@media screen and (max-width: 820px) {

  /* ========================================================
     TOP KPI — LABEL + VALUE EXACTLY CENTERED
     Icon stays where it already is.
     ======================================================== */

  html body
  .nx-mobile-tracking-kpi {
    position: relative !important;
  }

  html body
  .nx-mobile-tracking-kpi-value {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    transform:
      translate(-50%, -50%)
      !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    width:
      min(58%, 280px)
      !important;

    margin: 0 !important;

    text-align: center !important;
  }

  html body
  .nx-mobile-tracking-kpi-value small,
  html body
  .nx-mobile-tracking-kpi-value span,
  html body
  .nx-mobile-tracking-kpi-value strong,
  html body
  .nx-mobile-tracking-kpi-value em {
    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
  }


  /* ========================================================
     TRACKING FOOTER
     ======================================================== */

  html body
  .tracking-v14-footer {
    display: flex !important;
    flex-direction: column !important;

    align-items: stretch !important;
    justify-content: flex-start !important;

    gap: 16px !important;

    width: 100% !important;

    padding:
      22px
      22px
      24px
      !important;

    box-sizing: border-box !important;

    overflow: visible !important;
  }

  html body
  .tracking-v14-footer > div:first-child {
    display: flex !important;

    align-items: flex-start !important;

    width: 100% !important;

    margin: 0 !important;
  }


  /* ========================================================
     PUSH / TELEGRAM / EMAIL + FREQUENCY
     Existing real controls are moved here by JS.
     They are NOT cloned, so their existing click handlers stay.
     ======================================================== */

  html body
  .nx-mobile-tracking-notifications {
    display: grid !important;

    grid-template-columns:
      repeat(3, minmax(0, 1fr))
      !important;

    gap:
      10px
      !important;

    width: 100% !important;

    margin:
      2px
      0
      0
      !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    overflow: visible !important;
  }


  /* Push / Telegram / Email */

  html body
  .nx-mobile-tracking-channel {
    appearance: none !important;
    -webkit-appearance: none !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 52px !important;
    min-height: 52px !important;

    margin: 0 !important;

    padding:
      0
      8px
      !important;

    box-sizing: border-box !important;

    border:
      1px solid
      rgba(69, 105, 148, .58)
      !important;

    border-radius:
      14px
      !important;

    background:
      linear-gradient(
        180deg,
        rgba(8, 28, 51, .98),
        rgba(5, 20, 39, .98)
      )
      !important;

    color:
      #aebed2
      !important;

    font-family:
      inherit
      !important;

    font-size:
      14px
      !important;

    font-weight:
      700
      !important;

    line-height:
      1
      !important;

    text-align:
      center
      !important;

    white-space:
      nowrap
      !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025)
      !important;

    cursor: pointer !important;
  }


  html body
  .nx-mobile-tracking-channel:not(:disabled) {
    pointer-events: auto !important;
  }


  html body
  .nx-mobile-tracking-channel.active,

  html body
  .nx-mobile-tracking-channel.is-active,

  html body
  .nx-mobile-tracking-channel[aria-pressed="true"],

  html body
  .nx-mobile-tracking-channel[data-active="true"] {
    border-color:
      rgba(255, 183, 44, .82)
      !important;

    background:
      linear-gradient(
        180deg,
        rgba(85, 57, 8, .56),
        rgba(46, 34, 10, .52)
      )
      !important;

    color:
      #ffc247
      !important;
  }


  html body
  .nx-mobile-tracking-channel:disabled {
    cursor: not-allowed !important;
  }


  /* ========================================================
     FREQUENCY
     ======================================================== */

  html body
  .nx-mobile-tracking-frequency {
    grid-column:
      1 / -1
      !important;

    display: grid !important;

    grid-template-columns:
      auto
      minmax(0, 1fr)
      !important;

    align-items: center !important;

    gap:
      12px
      !important;

    width: 100% !important;
    min-width: 0 !important;

    margin:
      2px
      0
      0
      !important;

    padding: 0 !important;

    box-sizing: border-box !important;
  }


  html body
  .nx-mobile-tracking-frequency > span:first-child,

  html body
  .nx-mobile-tracking-frequency > label:first-child {
    margin: 0 !important;

    color:
      #92a2b8
      !important;

    font-size:
      14px
      !important;

    font-weight:
      700
      !important;

    white-space:
      nowrap
      !important;
  }


  html body
  .nx-mobile-tracking-frequency select {
    appearance: none !important;
    -webkit-appearance: none !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 52px !important;
    min-height: 52px !important;

    margin: 0 !important;

    padding:
      0
      44px
      0
      16px
      !important;

    box-sizing: border-box !important;

    border:
      1px solid
      rgba(69, 105, 148, .62)
      !important;

    border-radius:
      14px
      !important;

    background-color:
      rgba(7, 25, 47, .98)
      !important;

    color:
      #dbe5f1
      !important;

    font-family:
      inherit
      !important;

    font-size:
      15px
      !important;

    font-weight:
      700
      !important;

    cursor: pointer !important;
  }


  html body
  .nx-mobile-tracking-frequency select option {
    background:
      #07192f
      !important;

    color:
      #e6edf7
      !important;
  }


  /* No horizontal overflow from footer controls */

  html body
  .tracking-v14-footer,
  html body
  .tracking-v14-footer * {
    max-width: 100% !important;

    box-sizing: border-box !important;
  }

}
/* NOYTRIX MOBILE TRACKING POLISH END */



/* NOYTRIX MOBILE TRACKING REAL TABLE START */
@media screen and (max-width: 820px) {

  /* ========================================================
     BODY
     ======================================================== */

  html body
  #screen-tracking
  .tracking-v14-body {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      !important;

    gap: 20px !important;

    width: 100% !important;
    max-width: 100% !important;

    overflow: visible !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     MAIN MONITORED OBJECTS BOX
     THIS IS THE SCROLL CONTAINER
     ======================================================== */

  html body
  #screen-tracking
  .tracking-v14-table {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;

    overflow-x: auto !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior: contain !important;

    touch-action: pan-x pan-y !important;

    scrollbar-width: thin !important;

    scrollbar-gutter: stable !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     RESTORE REAL DESKTOP TABLE HEADER
     
     Desktop columns:
     Object / Current risk / Change / Last check / Actions
     ======================================================== */

  html body
  #screen-tracking
  .tracking-v14-table-head {
    position: sticky !important;

    top: 0 !important;
    left: 0 !important;

    z-index: 20 !important;

    display: grid !important;

    grid-template-columns:
      minmax(230px, 1.45fr)
      150px
      145px
      115px
      105px
      !important;

    grid-template-areas: none !important;

    align-items: center !important;

    width: 790px !important;
    min-width: 790px !important;
    max-width: 790px !important;

    min-height: 45px !important;

    margin: 0 !important;

    padding:
      0
      13px
      !important;

    box-sizing: border-box !important;

    overflow: visible !important;

    background:
      #07172e
      !important;

    border-bottom:
      1px solid
      rgba(46, 70, 104, .92)
      !important;
  }


  html body
  #screen-tracking
  .tracking-v14-table-head > * {
    display: block !important;

    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: auto !important;

    min-width: 0 !important;

    visibility: visible !important;
    opacity: 1 !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     ROWS WRAPPER
     Parent table scrolls — rows wrapper must NOT clip.
     ======================================================== */

  html body
  #screen-tracking
  #trackingRowsV14,

  html body
  #screen-tracking
  .tracking-v14-rows {
    display: block !important;

    width: 790px !important;
    min-width: 790px !important;
    max-width: 790px !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     EVERY REAL MONITORING ROW
     FORCE THE SAME 5 COLUMNS AS DESKTOP
     ======================================================== */

  html body
  #screen-tracking
  #trackingRowsV14
  .tracking-v14-row {
    position: relative !important;

    display: grid !important;

    grid-template-columns:
      minmax(230px, 1.45fr)
      150px
      145px
      115px
      105px
      !important;

    grid-template-areas: none !important;

    grid-auto-flow: row !important;

    align-items: center !important;

    width: 790px !important;
    min-width: 790px !important;
    max-width: 790px !important;

    min-height: 68px !important;
    height: auto !important;
    max-height: none !important;

    margin: 0 !important;

    padding:
      7px
      13px
      !important;

    overflow: visible !important;

    box-sizing: border-box !important;
  }


  /*
   * Убираем мобильные grid-area/grid-column,
   * которые превращали строку в обрезанную карточку.
   */

  html body
  #screen-tracking
  #trackingRowsV14
  .tracking-v14-row > * {
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: auto !important;

    min-width: 0 !important;
    max-width: none !important;

    visibility: visible !important;
    opacity: 1 !important;

    box-sizing: border-box !important;
  }


  /* Object cell stays flex like desktop */

  html body
  #screen-tracking
  #trackingRowsV14
  .tracking-object-cell-v14 {
    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    min-width: 0 !important;

    overflow: visible !important;
  }


  /* Risk must stay INSIDE its own desktop column */

  html body
  #screen-tracking
  #trackingRowsV14
  .tracking-risk-v14 {
    position: relative !important;

    inset: auto !important;

    transform: none !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;

    overflow: visible !important;

    box-sizing: border-box !important;
  }


  /* Actions remain usable */

  html body
  #screen-tracking
  #trackingRowsV14
  .tracking-more-v14 {
    position: relative !important;

    inset: auto !important;

    transform: none !important;

    min-width: 0 !important;

    overflow: visible !important;
  }


  /* ========================================================
     TABLE SCROLLBAR
     ======================================================== */

  html body
  #screen-tracking
  .tracking-v14-table::-webkit-scrollbar {
    display: block !important;

    width: 5px !important;
    height: 5px !important;
  }


  html body
  #screen-tracking
  .tracking-v14-table::-webkit-scrollbar-track {
    display: block !important;

    background:
      transparent
      !important;
  }


  html body
  #screen-tracking
  .tracking-v14-table::-webkit-scrollbar-thumb {
    display: block !important;

    background:
      rgba(97, 139, 191, .52)
      !important;

    border-radius:
      999px
      !important;
  }


  /* ========================================================
     LATEST CHANGES BOX
     ======================================================== */

  html body
  #screen-tracking
  .tracking-v14-changes {
    position: relative !important;

    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;

    padding:
      15px
      14px
      !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
  }


  html body
  #screen-tracking
  .tracking-v14-changes > h3 {
    flex:
      0 0 auto
      !important;

    margin:
      0
      0
      14px
      !important;
  }


  /* Real scroll area inside Latest changes */

  html body
  #screen-tracking
  #trackingChangesV14 {
    flex:
      1 1 auto
      !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior-y: contain !important;

    touch-action: pan-y !important;

    scrollbar-width: thin !important;

    scrollbar-gutter: stable !important;

    box-sizing: border-box !important;
  }


  html body
  #screen-tracking
  #trackingChangesV14::-webkit-scrollbar {
    display: block !important;

    width: 5px !important;
  }


  html body
  #screen-tracking
  #trackingChangesV14::-webkit-scrollbar-track {
    display: block !important;

    background:
      transparent
      !important;
  }


  html body
  #screen-tracking
  #trackingChangesV14::-webkit-scrollbar-thumb {
    display: block !important;

    background:
      rgba(97, 139, 191, .52)
      !important;

    border-radius:
      999px
      !important;
  }


  /*
   * IMPORTANT:
   * Mobile page itself stays normal width.
   * Only the INSIDE of the table scrolls horizontally.
   */

  html body
  #screen-tracking {
    overflow-x: hidden !important;
  }

}
/* NOYTRIX MOBILE TRACKING REAL TABLE END */



/* NOYTRIX MOBILE SETTINGS REAL FIT START */
@media screen and (max-width: 820px) {

  /* ========================================================
     1. PROFILE ROOT
     ======================================================== */

  html body #screen-profile-v56,
  html body .p56-screen {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
  }


  /* ========================================================
     2. V105 REAL SETTINGS HOST

     Это настоящий контейнер, в который сейчас
     физически вложен #screen-settings.
     ======================================================== */

  html body
  #screen-profile-v56
  > .nx105-settings-only,

  html body
  .p56-screen
  > .nx105-settings-only {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: auto !important;

    /*
     * Убираем max-content из V105.
     */
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 auto !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;
  }


  /* ========================================================
     3. V104 SECTION / HOST
     ======================================================== */

  html body
  #screen-profile-v56
  .nx104-settings-section,

  html body
  #screen-profile-v56
  .nx104-real-settings-section,

  html body
  #screen-profile-v56
  .nx104-settings-host {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
  }


  /* ========================================================
     4. REAL ORIGINAL #screen-settings
     ======================================================== */

  html body
  #screen-profile-v56
  #screen-settings,

  html body
  #screen-profile-v56
  #screen-settings.nx104-embedded-settings,

  html body
  #screen-profile-v56
  #screen-settings.nx105-real-settings {
    position: relative !important;

    inset: auto !important;

    transform: none !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 auto !important;

    padding:
      8px
      0
      40px
      !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;
  }


  /* ========================================================
     5. OLD SETTINGS WORKSPACE / MAIN
     ======================================================== */

  html body
  #screen-profile-v56
  #screen-settings
  .settings-workspace,

  html body
  #screen-profile-v56
  #screen-settings
  .settings-main {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin:
      0
      auto
      !important;

    padding:
      0
      !important;

    box-sizing: border-box !important;

    overflow: visible !important;
  }


  /* ========================================================
     6. HEADER

     В workspace.css здесь стоял:
     min-width: max-content
     ======================================================== */

  html body
  #screen-profile-v56
  #screen-settings
  .settings-page-header {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
  }


  html body
  #screen-profile-v56
  #screen-settings
  .settings-page-tools {
    display: flex !important;

    flex-wrap: wrap !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    width: 100% !important;

    /*
     * ВАЖНО:
     * перебиваем старый min-width:max-content
     */
    min-width: 0 !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     7. SETTINGS NAV
     ======================================================== */

  html body
  #screen-profile-v56
  #screen-settings
  .settings-section-nav {
    position: static !important;

    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr))
      !important;

    gap: 6px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin:
      0
      auto
      16px
      !important;

    padding: 8px !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
  }


  html body
  #screen-profile-v56
  #screen-settings
  .settings-section-nav
  button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    padding:
      10px
      8px
      !important;

    justify-content: flex-start !important;

    white-space: normal !important;

    overflow-wrap: anywhere !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     8. OLD SETTINGS CARDS
     ======================================================== */

  html body
  #screen-profile-v56
  #screen-settings
  .settings-panel {
    position: relative !important;

    left: auto !important;
    right: auto !important;

    transform: none !important;

    width: calc(100% - 20px) !important;
    min-width: 0 !important;
    max-width: 620px !important;

    margin:
      0
      auto
      14px
      !important;

    padding:
      18px
      16px
      !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
  }


  /*
   * Никакой внутренний div не имеет права
   * растянуть карточку шире телефона.
   */

  html body
  #screen-profile-v56
  #screen-settings
  .settings-panel
  * {
    min-width: 0 !important;
    max-width: 100%;

    box-sizing: border-box !important;
  }


  /* ========================================================
     9. OLD SETTINGS TEXT / HEADINGS
     ======================================================== */

  html body
  #screen-profile-v56
  #screen-settings
  .settings-panel
  h2,

  html body
  #screen-profile-v56
  #screen-settings
  .settings-panel
  h3 {
    width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;

    white-space: normal !important;

    overflow-wrap: anywhere !important;
  }


  html body
  #screen-profile-v56
  #screen-settings
  .settings-panel
  p,

  html body
  #screen-profile-v56
  #screen-settings
  .settings-panel
  label,

  html body
  #screen-profile-v56
  #screen-settings
  .settings-panel
  span,

  html body
  #screen-profile-v56
  #screen-settings
  .settings-panel
  strong {
    white-space: normal !important;

    overflow-wrap: break-word !important;
  }


  /* ========================================================
     10. FORM CONTROLS
     ======================================================== */

  html body
  #screen-profile-v56
  #screen-settings
  select,

  html body
  #screen-profile-v56
  #screen-settings
  input:not([type="checkbox"]),

  html body
  #screen-profile-v56
  #screen-settings
  textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
  }


  /*
   * Switch stays on the right,
   * but cannot leave the card.
   */

  html body
  #screen-profile-v56
  #screen-settings
  input[type="checkbox"],

  html body
  #screen-profile-v56
  #screen-settings
  [role="switch"] {
    flex:
      0 0 auto
      !important;

    margin-left:
      auto
      !important;

    margin-right:
      0
      !important;
  }


  /* ========================================================
     11. V100 PAGE
     ======================================================== */

  html body
  #screen-profile-v56
  .nx100-page {
    width: calc(100% - 20px) !important;
    min-width: 0 !important;
    max-width: 620px !important;

    margin:
      0
      auto
      !important;

    padding:
      0
      !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
  }


  html body
  #screen-profile-v56
  .nx100-page
  * {
    min-width: 0 !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     12. V100 CARDS
     ======================================================== */

  html body
  #screen-profile-v56
  .nx100-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin:
      0
      auto
      14px
      !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
  }


  html body
  #screen-profile-v56
  .nx100-card-head {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    padding:
      14px
      14px
      !important;

    box-sizing: border-box !important;
  }


  html body
  #screen-profile-v56
  .nx100-card-head
  > div:last-child {
    min-width: 0 !important;
    max-width: 100% !important;
  }


  html body
  #screen-profile-v56
  .nx100-card-head
  h2,

  html body
  #screen-profile-v56
  .nx100-card-head
  p {
    white-space: normal !important;

    overflow-wrap: anywhere !important;
  }


  /* ========================================================
     13. V100 ROWS

     Desktop flex + 150px control was pushing the row.
     Mobile becomes real two-column grid:
       text | switch
     ======================================================== */

  html body
  #screen-profile-v56
  .nx100-row {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      auto
      !important;

    align-items: center !important;

    gap:
      12px
      !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    padding:
      14px
      14px
      !important;

    box-sizing: border-box !important;
  }


  html body
  #screen-profile-v56
  .nx100-row-copy {
    min-width: 0 !important;
    max-width: 100% !important;
  }


  html body
  #screen-profile-v56
  .nx100-row-copy
  strong,

  html body
  #screen-profile-v56
  .nx100-row-copy
  span {
    max-width: 100% !important;

    white-space: normal !important;

    overflow-wrap: anywhere !important;
  }


  /* ========================================================
     14. V100 SELECT ROW

     Select goes full width under label.
     ======================================================== */

  html body
  #screen-profile-v56
  .nx100-row
  .nx100-select-wrap,

  html body
  #screen-profile-v56
  .nx100-row
  .nx100-select-slot {
    grid-column:
      1 / -1
      !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    flex-basis:
      auto
      !important;

    margin:
      4px
      0
      0
      !important;
  }


  html body
  #screen-profile-v56
  .nx100-select-wrap,

  html body
  #screen-profile-v56
  .nx100-select-slot,

  html body
  #screen-profile-v56
  .nx100-select-wrap
  > *,

  html body
  #screen-profile-v56
  .nx100-select-slot
  > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     15. V100 SAVE STATE
     ======================================================== */

  html body
  #screen-profile-v56
  .nx100-save-state {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin:
      12px
      auto
      0
      !important;

    white-space: normal !important;

    text-align: center !important;
  }


  /* ========================================================
     16. ABSOLUTE FINAL SAFETY
     ======================================================== */

  html body
  #screen-profile-v56
  #screen-settings
  img,

  html body
  #screen-profile-v56
  #screen-settings
  svg {
    max-width: 100% !important;
  }

}
/* NOYTRIX MOBILE SETTINGS REAL FIT END */



/* NOYTRIX MOBILE TRACKING LAST POLISH START */
@media screen and (max-width: 820px) {

  /* ========================================================
     1. OBJECTS TABLE — REAL TOUCH SCROLL
     ======================================================== */

  html body
  #screen-tracking
  .tracking-v14-table {
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;

    overflow-x: auto !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior: contain !important;

    touch-action: pan-x pan-y !important;

    pointer-events: auto !important;

    scrollbar-width: thin !important;

    box-sizing: border-box !important;
  }


  html body
  #screen-tracking
  .tracking-v14-table
  * {
    touch-action: inherit !important;
  }


  /* visible scrollbar */

  html body
  #screen-tracking
  .tracking-v14-table::-webkit-scrollbar {
    display: block !important;

    width: 5px !important;
    height: 5px !important;
  }


  html body
  #screen-tracking
  .tracking-v14-table::-webkit-scrollbar-track {
    background: transparent !important;
  }


  html body
  #screen-tracking
  .tracking-v14-table::-webkit-scrollbar-thumb {
    background:
      rgba(104, 144, 190, .55)
      !important;

    border-radius: 999px !important;
  }


  /* ========================================================
     2. GUEST / EMPTY MESSAGE
     FULL TEXT MUST FIT
     ======================================================== */

  html body
  #screen-tracking
  #trackingRowsV14
  .tracking-login-required-v14,

  html body
  #screen-tracking
  #trackingRowsV14
  .tracking-empty-v14,

  html body
  #screen-tracking
  #trackingRowsV14
  .tracking-error-v14,

  html body
  #screen-tracking
  #trackingRowsV14
  .tracking-v14-loading {
    position: sticky !important;

    left: 0 !important;

    width:
      calc(100vw - 76px)
      !important;

    min-width: 0 !important;

    max-width:
      calc(100vw - 76px)
      !important;

    min-height: 300px !important;

    margin: 0 !important;

    padding:
      24px
      16px
      !important;

    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;

    overflow: visible !important;

    white-space: normal !important;
  }


  html body
  #screen-tracking
  .tracking-login-required-v14
  strong,

  html body
  #screen-tracking
  .tracking-empty-v14
  strong {
    display: block !important;

    width: 100% !important;
    max-width: 290px !important;

    margin:
      8px
      auto
      0
      !important;

    font-size: 16px !important;
    line-height: 1.35 !important;

    text-align: center !important;

    white-space: normal !important;

    overflow: visible !important;
    text-overflow: clip !important;

    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }


  html body
  #screen-tracking
  .tracking-login-required-v14
  p,

  html body
  #screen-tracking
  .tracking-empty-v14
  p {
    width: 100% !important;
    max-width: 280px !important;

    margin:
      8px
      auto
      0
      !important;

    font-size: 13px !important;
    line-height: 1.45 !important;

    text-align: center !important;

    white-space: normal !important;

    overflow-wrap: anywhere !important;
  }


  /* ========================================================
     3. LATEST CHANGES — TOUCH SCROLL
     ======================================================== */

  html body
  #screen-tracking
  .tracking-v14-changes {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
  }


  html body
  #screen-tracking
  .tracking-v14-changes
  > h3 {
    flex: 0 0 auto !important;

    margin:
      0
      0
      12px
      !important;
  }


  html body
  #screen-tracking
  #trackingChangesV14 {
    flex:
      1 1 auto
      !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 100% !important;
    min-height: 0 !important;

    overflow-x: auto !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior: contain !important;

    touch-action: pan-x pan-y !important;

    pointer-events: auto !important;

    scrollbar-width: thin !important;

    box-sizing: border-box !important;
  }


  html body
  #screen-tracking
  #trackingChangesV14
  * {
    touch-action: inherit !important;
  }


  html body
  #screen-tracking
  #trackingChangesV14::-webkit-scrollbar {
    display: block !important;

    width: 5px !important;
    height: 5px !important;
  }


  html body
  #screen-tracking
  #trackingChangesV14::-webkit-scrollbar-track {
    background: transparent !important;
  }


  html body
  #screen-tracking
  #trackingChangesV14::-webkit-scrollbar-thumb {
    background:
      rgba(104, 144, 190, .55)
      !important;

    border-radius: 999px !important;
  }


  /* Empty latest-changes message */

  html body
  #screen-tracking
  .tracking-change-empty-v14 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    min-height: 300px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    padding:
      20px
      14px
      !important;

    box-sizing: border-box !important;

    text-align: center !important;

    white-space: normal !important;

    overflow-wrap: anywhere !important;
  }


  /* ========================================================
     4. REAL CHANGE ITEMS MUST FIT
     ======================================================== */

  html body
  #screen-tracking
  #trackingChangesV14
  .tracking-change-item-v14 {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
  }


  html body
  #screen-tracking
  #trackingChangesV14
  .tracking-change-item-v14
  strong,

  html body
  #screen-tracking
  #trackingChangesV14
  .tracking-change-item-v14
  p,

  html body
  #screen-tracking
  #trackingChangesV14
  .tracking-change-item-v14
  small {
    max-width: 100% !important;

    white-space: normal !important;

    overflow-wrap: anywhere !important;
  }


  /* ========================================================
     5. BOTTOM FREQUENCY
     "Проверять   Каждые 4 часа"
     SMALL + ONE LINE
     ======================================================== */

  html body
  #screen-tracking
  .tracking-frequency-v15,

  html body
  #screen-tracking
  .nx-mobile-tracking-frequency {
    grid-column:
      1 / -1
      !important;

    display: grid !important;

    grid-template-columns:
      72px
      minmax(0, 160px)
      !important;

    align-items: center !important;

    justify-content: center !important;

    column-gap: 8px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    margin:
      0
      auto
      !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    overflow: visible !important;

    box-sizing: border-box !important;
  }


  /* "Проверять" */

  html body
  #screen-tracking
  .tracking-frequency-v15
  > span:first-child,

  html body
  #screen-tracking
  .tracking-frequency-v15
  > label:first-child,

  html body
  #screen-tracking
  .nx-mobile-tracking-frequency
  > span:first-child,

  html body
  #screen-tracking
  .nx-mobile-tracking-frequency
  > label:first-child {
    display: block !important;

    width: 72px !important;
    min-width: 0 !important;
    max-width: 72px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #9eacc0 !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    text-align: right !important;

    white-space: nowrap !important;

    box-sizing: border-box !important;
  }


  /* "Каждые 4 часа" */

  html body
  #screen-tracking
  .tracking-frequency-v15
  select,

  html body
  #screen-tracking
  .nx-mobile-tracking-frequency
  select {
    appearance: none !important;
    -webkit-appearance: none !important;

    display: block !important;

    width: 160px !important;
    min-width: 0 !important;
    max-width: 160px !important;

    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    margin: 0 !important;

    padding:
      0
      32px
      0
      12px
      !important;

    box-sizing: border-box !important;

    border:
      1px solid
      rgba(69, 105, 148, .72)
      !important;

    border-radius:
      11px
      !important;

    background-color:
      #071a32
      !important;

    color:
      #e0e8f4
      !important;

    font-family: inherit !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    line-height: 40px !important;

    white-space: nowrap !important;

    text-overflow: ellipsis !important;

    cursor: pointer !important;
  }


  /* if V15 itself is rendered as the visible control */

  html body
  #screen-tracking
  .tracking-frequency-v15
  button,

  html body
  #screen-tracking
  .tracking-frequency-v15
  [role="button"] {
    width: 160px !important;
    min-width: 0 !important;
    max-width: 160px !important;

    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    margin: 0 !important;

    padding:
      0
      12px
      !important;

    border-radius:
      11px
      !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    white-space: nowrap !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     6. FOOTER MUST NOT CLIP FREQUENCY ROW
     ======================================================== */

  html body
  #screen-tracking
  .tracking-v14-footer,

  html body
  #screen-tracking
  .tracking-notify-v15,

  html body
  #screen-tracking
  .nx-mobile-tracking-notifications {
    max-height: none !important;

    overflow: visible !important;

    box-sizing: border-box !important;
  }

}
/* NOYTRIX MOBILE TRACKING LAST POLISH END */



/* NOYTRIX TRACKING HARD TOUCH SCROLL START */
@media screen and (max-width: 820px) {

  /* ========================================================
     OBJECTS TABLE
     ======================================================== */

  html body
  #screen-tracking
  .tracking-v14-table {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;

    overflow-x: scroll !important;
    overflow-y: scroll !important;

    -webkit-overflow-scrolling: touch !important;

    /*
     * IMPORTANT:
     * JS below controls the gesture manually.
     */
    touch-action: none !important;

    overscroll-behavior: none !important;

    pointer-events: auto !important;

    scrollbar-width: thin !important;

    box-sizing: border-box !important;
  }


  html body
  #screen-tracking
  .tracking-v14-table
  * {
    pointer-events: auto !important;
  }


  /* ========================================================
     REAL TABLE CONTENT MUST ACTUALLY BE WIDER
     ======================================================== */

  html body
  #screen-tracking
  .tracking-v14-table-head,

  html body
  #screen-tracking
  #trackingRowsV14,

  html body
  #screen-tracking
  .tracking-v14-rows {
    width: 790px !important;
    min-width: 790px !important;
    max-width: none !important;
  }


  /* ========================================================
     GUEST MESSAGE — FULLY VISIBLE
     ======================================================== */

  html body
  #screen-tracking
  #trackingRowsV14
  .tracking-login-required-v14,

  html body
  #screen-tracking
  #trackingRowsV14
  .tracking-empty-v14,

  html body
  #screen-tracking
  #trackingRowsV14
  .tracking-error-v14,

  html body
  #screen-tracking
  #trackingRowsV14
  .tracking-v14-loading {
    width:
      calc(100vw - 74px)
      !important;

    min-width:
      calc(100vw - 74px)
      !important;

    max-width:
      calc(100vw - 74px)
      !important;

    min-height: 340px !important;

    padding:
      24px
      16px
      !important;

    box-sizing: border-box !important;

    white-space: normal !important;

    overflow: visible !important;

    text-align: center !important;
  }


  html body
  #screen-tracking
  .tracking-login-required-v14
  strong,

  html body
  #screen-tracking
  .tracking-login-required-v14
  p {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 290px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    white-space: normal !important;

    overflow: visible !important;

    text-overflow: clip !important;

    overflow-wrap: anywhere !important;

    text-align: center !important;
  }


  html body
  #screen-tracking
  .tracking-login-required-v14
  strong {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }


  html body
  #screen-tracking
  .tracking-login-required-v14
  p {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }


  /* ========================================================
     LATEST CHANGES
     WHOLE CARD CAN BE DRAGGED WITH FINGER
     ======================================================== */

  html body
  #screen-tracking
  .tracking-v14-changes {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;

    overflow: hidden !important;

    touch-action: none !important;

    overscroll-behavior: none !important;

    pointer-events: auto !important;

    box-sizing: border-box !important;
  }


  html body
  #screen-tracking
  #trackingChangesV14 {
    flex: 1 1 auto !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 100% !important;
    min-height: 0 !important;

    overflow-x: scroll !important;
    overflow-y: scroll !important;

    -webkit-overflow-scrolling: touch !important;

    touch-action: none !important;

    overscroll-behavior: none !important;

    pointer-events: auto !important;

    scrollbar-width: thin !important;

    box-sizing: border-box !important;
  }


  html body
  #screen-tracking
  #trackingChangesV14
  * {
    pointer-events: auto !important;
  }


  /* ========================================================
     VISIBLE SCROLLBARS
     ======================================================== */

  html body
  #screen-tracking
  .tracking-v14-table::-webkit-scrollbar,

  html body
  #screen-tracking
  #trackingChangesV14::-webkit-scrollbar {
    display: block !important;

    width: 5px !important;
    height: 5px !important;
  }


  html body
  #screen-tracking
  .tracking-v14-table::-webkit-scrollbar-track,

  html body
  #screen-tracking
  #trackingChangesV14::-webkit-scrollbar-track {
    background: transparent !important;
  }


  html body
  #screen-tracking
  .tracking-v14-table::-webkit-scrollbar-thumb,

  html body
  #screen-tracking
  #trackingChangesV14::-webkit-scrollbar-thumb {
    background:
      rgba(104, 145, 194, .62)
      !important;

    border-radius:
      999px
      !important;
  }

}
/* NOYTRIX TRACKING HARD TOUCH SCROLL END */



/* NOYTRIX MOBILE FAST SCROLL START */
@media screen and (max-width: 820px) {

  /* ========================================================
     TRACKING
     ======================================================== */

  html body
  #screen-tracking
  .tracking-v14-table,

  html body
  #screen-tracking
  #trackingChangesV14,

  html body
  #screen-tracking
  .tracking-v14-changes {
    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior: none !important;

    touch-action: none !important;

    pointer-events: auto !important;
  }


  html body
  #screen-tracking
  .tracking-v14-table,

  html body
  #screen-tracking
  #trackingChangesV14 {
    overflow: auto !important;

    scrollbar-width: thin !important;
  }


  /* ========================================================
     SIGNALS
     Critical / Community / Market
     ======================================================== */

  html body
  #screen-signals
  .signals-column-v19 {
    overflow: hidden !important;

    touch-action: none !important;

    pointer-events: auto !important;
  }


  html body
  #screen-signals
  .signals-feed-v19 {
    width: 100% !important;

    min-height: 0 !important;

    max-height: 520px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior: none !important;

    touch-action: none !important;

    pointer-events: auto !important;

    scrollbar-width: thin !important;

    box-sizing: border-box !important;
  }


  html body
  #screen-signals
  .signals-feed-v19::-webkit-scrollbar,

  html body
  #screen-tracking
  .tracking-v14-table::-webkit-scrollbar,

  html body
  #screen-tracking
  #trackingChangesV14::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
  }


  html body
  #screen-signals
  .signals-feed-v19::-webkit-scrollbar-track,

  html body
  #screen-tracking
  .tracking-v14-table::-webkit-scrollbar-track,

  html body
  #screen-tracking
  #trackingChangesV14::-webkit-scrollbar-track {
    background: transparent !important;
  }


  html body
  #screen-signals
  .signals-feed-v19::-webkit-scrollbar-thumb,

  html body
  #screen-tracking
  .tracking-v14-table::-webkit-scrollbar-thumb,

  html body
  #screen-tracking
  #trackingChangesV14::-webkit-scrollbar-thumb {
    background:
      rgba(105, 148, 200, .62)
      !important;

    border-radius: 999px !important;
  }

}
/* NOYTRIX MOBILE FAST SCROLL END */