.apps-page {
      min-height: 100vh;
      padding:
        30px 22px
        80px;
      background:
        radial-gradient(
          circle at 8% 8%,
          rgba(255, 35, 90, .11),
          transparent 32%
        ),
        radial-gradient(
          circle at 92% 15%,
          rgba(24, 91, 255, .11),
          transparent 38%
        ),
        #07090e;
      color: #fff;
    }


    .apps-shell {
      width:
        min(1380px, 100%);
      margin:
        0 auto;
    }


    .apps-topbar {
      display:
        flex;
      align-items:
        center;
      justify-content:
        space-between;
      gap:
        20px;
      margin-bottom:
        64px;
    }


    .apps-brand {
      display:
        flex;
      align-items:
        center;
      gap:
        12px;
      color:
        #fff;
      text-decoration:
        none;
    }


    .apps-brand img {
      width:
        48px;
      height:
        48px;
      border-radius:
        14px;
    }


    .apps-brand strong {
      display:
        block;
      font-size:
        18px;
    }


    .apps-brand span {
      display:
        block;
      margin-top:
        3px;
      color:
        #7f899a;
      font-size:
        11px;
    }


    .apps-top-actions {
      display:
        flex;
      gap:
        10px;
    }


    .apps-secondary-btn {
      height:
        42px;
      padding:
        0 15px;
      border:
        1px solid #252d3a;
      border-radius:
        11px;
      background:
        rgba(17, 22, 31, .9);
      color:
        #fff;
      cursor:
        pointer;
      font-weight:
        700;
    }


    .apps-secondary-btn:hover {
      background:
        #19202c;
    }


    .apps-heading-section {
      display:
        flex;
      align-items:
        flex-end;
      justify-content:
        space-between;
      gap:
        24px;
      margin-bottom:
        34px;
    }


    .apps-eyebrow {
      margin-bottom:
        10px;
      color:
        #ff2d67;
      font-size:
        11px;
      font-weight:
        900;
      letter-spacing:
        .13em;
    }


    .apps-heading-section h1 {
      margin:
        0 0 10px;
      font-size:
        clamp(
          40px,
          5vw,
          62px
        );
      line-height:
        1;
    }


    .apps-heading-section p {
      max-width:
        650px;
      margin:
        0;
      color:
        #8d97aa;
      font-size:
        15px;
      line-height:
        1.7;
    }


    .apps-access-pill {
      padding:
        9px 13px;
      border-radius:
        999px;
      font-size:
        11px;
      font-weight:
        800;
      white-space:
        nowrap;
    }


    .apps-access-pill.active {
      color:
        #45e3a0;
      border:
        1px solid
        rgba(69, 227, 160, .22);
      background:
        rgba(34, 197, 134, .10);
    }


    .apps-access-pill.inactive {
      color:
        #ff738a;
      border:
        1px solid
        rgba(255, 91, 119, .22);
      background:
        rgba(255, 76, 107, .08);
    }


    .apps-content {
      border-top:
        1px solid #1e2530;
      padding-top:
        30px;
    }


    .apps-section-heading {
      margin-bottom:
        22px;
    }


    .apps-section-heading h2 {
      margin:
        0 0 5px;
      font-size:
        25px;
    }


    .apps-section-heading p {
      margin:
        0;
      color:
        #818b9d;
      font-size:
        13px;
    }


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


    .app-card {
      min-height:
        285px;
      display:
        flex;
      flex-direction:
        column;
      justify-content:
        space-between;
      padding:
        22px;
      border:
        1px solid #202735;
      border-radius:
        20px;
      background:
        linear-gradient(
          160deg,
          rgba(18, 23, 32, .98),
          rgba(11, 14, 20, .96)
        );
      transition:
        transform .18s ease,
        border-color .18s ease;
    }


    .app-card:hover {
      transform:
        translateY(-3px);
      border-color:
        #343e50;
    }


    .app-card-top {
      display:
        flex;
      align-items:
        center;
      justify-content:
        space-between;
      gap:
        15px;
      margin-bottom:
        24px;
    }


    .app-icon {
      width:
        48px;
      height:
        48px;
      display:
        grid;
      place-items:
        center;
      border-radius:
        14px;
      background:
        linear-gradient(
          135deg,
          rgba(255, 35, 90, .18),
          rgba(82, 70, 255, .17)
        );
      font-size:
        23px;
    }


    .app-status {
      padding:
        6px 9px;
      border-radius:
        999px;
      color:
        #45e3a0;
      background:
        rgba(34, 197, 134, .10);
      font-size:
        10px;
      font-weight:
        800;
    }


    .app-status.muted {
      color:
        #8e98aa;
      background:
        rgba(130, 143, 164, .08);
    }


    .app-card-body h3 {
      margin:
        0 0 10px;
      font-size:
        21px;
    }


    .app-card-body p {
      margin:
        0;
      color:
        #8d97a9;
      font-size:
        13px;
      line-height:
        1.7;
    }


    .app-card-footer {
      margin-top:
        28px;
    }


    .app-open-btn {
      width:
        100%;
      height:
        44px;
      border:
        0;
      border-radius:
        11px;
      background:
        linear-gradient(
          90deg,
          #ff1853,
          #ff2b6a
        );
      color:
        #fff;
      font-weight:
        800;
      cursor:
        pointer;
      box-shadow:
        0 8px 30px
        rgba(255, 29, 89, .18);
    }


    .app-open-btn:hover {
      filter:
        brightness(1.06);
    }


    .app-open-btn.disabled {
      background:
        #151b25;
      color:
        #697488;
      box-shadow:
        none;
      cursor:
        default;
    }


    .coming-soon {
      opacity:
        .72;
    }


    .apps-locked-layout {
      display:
        grid;
      grid-template-columns:
        1.15fr .85fr;
      gap:
        22px;
      align-items:
        stretch;
    }


    .apps-locked-card {
      padding:
        42px;
      border:
        1px solid #232b38;
      border-radius:
        24px;
      background:
        linear-gradient(
          160deg,
          rgba(17, 21, 30, .98),
          rgba(9, 12, 18, .98)
        );
    }


    .locked-icon {
      width:
        60px;
      height:
        60px;
      display:
        grid;
      place-items:
        center;
      margin-bottom:
        22px;
      border-radius:
        18px;
      background:
        rgba(255, 37, 92, .10);
      font-size:
        28px;
    }


    .apps-locked-card h2 {
      max-width:
        560px;
      margin:
        0 0 14px;
      font-size:
        34px;
      line-height:
        1.15;
    }


    .apps-locked-card p {
      max-width:
        650px;
      margin:
        0 0 25px;
      color:
        #8f98aa;
      line-height:
        1.75;
    }


    .apps-primary-btn {
      min-width:
        160px;
      height:
        46px;
      padding:
        0 20px;
      border:
        0;
      border-radius:
        12px;
      background:
        linear-gradient(
          90deg,
          #ff1752,
          #ff2f72
        );
      color:
        #fff;
      font-weight:
        800;
      cursor:
        pointer;
    }


    .locked-note {
      display:
        inline-block;
      padding:
        11px 13px;
      border:
        1px solid
        rgba(255, 90, 115, .18);
      border-radius:
        10px;
      color:
        #ff7a8f;
      background:
        rgba(255, 67, 98, .06);
      font-size:
        12px;
    }


    .apps-preview-grid {
      display:
        grid;
      gap:
        12px;
    }


    .preview-app {
      display:
        grid;
      grid-template-columns:
        48px 1fr auto;
      align-items:
        center;
      gap:
        14px;
      padding:
        18px;
      border:
        1px solid #202735;
      border-radius:
        16px;
      background:
        #0d1118;
    }


    .preview-icon {
      width:
        42px;
      height:
        42px;
      display:
        grid;
      place-items:
        center;
      border-radius:
        12px;
      background:
        #151b25;
    }


    .preview-app strong {
      font-size:
        13px;
    }


    .preview-app span {
      color:
        #667185;
      font-size:
        11px;
    }


    @media(
      max-width: 1000px
    ) {

      .apps-grid {
        grid-template-columns:
          repeat(
            2,
            minmax(0, 1fr)
          );
      }


      .apps-locked-layout {
        grid-template-columns:
          1fr;
      }
    }


    @media(
      max-width: 650px
    ) {

      .apps-page {
        padding:
          20px 12px
          60px;
      }


      .apps-topbar {
        align-items:
          flex-start;
        margin-bottom:
          45px;
      }


      .apps-top-actions {
        flex-direction:
          column;
      }


      .apps-heading-section {
        align-items:
          flex-start;
        flex-direction:
          column;
      }


      .apps-grid {
        grid-template-columns:
          1fr;
      }


      .apps-locked-card {
        padding:
          26px;
      }
    }