.topbar {
  margin: 6px auto 0 auto !important;
}

.page {
  margin-top: 10px;

  .trainings-wrap {
    padding: 4px 16px 20px;

    .train-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;

      .train-item {
        box-shadow: 0 6px 22px rgba(0, 0, 0, .08);

        .train-card {
          display: flex;
          align-items: center;
          gap: 12px;
          border-radius: 14px;
          padding: 14px 12px 14px 12px;
          box-shadow: 0 4px 8px 0 rgba(107, 107, 107, 0.1), 0 15px 15px 0 rgba(107, 107, 107, 0.09), 0 33px 20px 0 rgba(107, 107, 107, 0.05), 0 59px 24px 0 rgba(107, 107, 107, 0.01), 0 92px 26px 0 rgba(107, 107, 107, 0);
          background: #fff;
          text-decoration: none;
          color: #0e0e0e;

          .train-icon {
            width: 25px;
            height: 25px;
            display: grid;
            place-items: center;
            border: none;
            background: none;
          }

          .train-name {
            font-size: calc(2vw + 5px);
            font-weight: 400;
            letter-spacing: .2px;
          }

          .train-spacer {
            flex: 1;
          }

          .train-edit {
            width: 24px;
            height: 24px;
            display: grid;
            place-items: center;
            border: none;
            background: transparent;
          }
        }
      }
    }
  }

  #proExpiryModal {
    .sheet-body {
      img {
        display: block;
        margin: 5vw auto;
        padding: 18px;
        border-radius: 100%;
        background-color: #D5F6E4;
      }

      .not-expire-to {
        text-align: center;
        color: #33D469;
        font-size: 5vw;
      }

      .after-expire {
        text-align: center;
        padding: 9px 6px;
        border-radius: 14px;
        color: #282828;
        background-color: #FFF;
        margin: 5vw 0;
        font-size: 3.5vw;

        span {
          color: #33D469;
          font-weight: 700;
        }
      }

      .save-from-expire {
        font-size: 3vw;
        text-align: center;
        color: #9e9e9e;
      }

      .sheet-controls {
        display: flex;
        justify-content: space-between;

        button {
          max-width: 45%;
        }

        a {
          display: block;
          max-width: 45%;
        }
      }
    }
  }
}

.create-btn {
  margin: 18px 0 8px;
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 26px;
  background: linear-gradient(180deg, #55DA97 0%, #27C06E 100%);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .2px;
  box-shadow: 0 6px 16px rgba(46, 203, 122, .35);
}


.base-btn {
  margin: 20px auto;
}

.fb-dark {
  .app {
    background: #262626;

    .topbar {
      background: #262626;
      color: #F0F0F0;
    }

    .page {
      .trainings-wrap {
        .train-list {
          .train-item {
            .train-card {
              box-shadow: unset;
              background: #323232;
              color: #F0F0F0;
            }
          }
        }
      }
    }
  }
}


/*я через гпт накидл*/
.start-btn:not(:disabled):active {
  box-shadow: 0 5px #429f63;
  transform: translateY(4px);
}

.start-btn.is-disabled,
.start-btn:disabled {
  background-color: #afafaf;
  box-shadow: 0 9px #727272;
  color: #282828;
  cursor: not-allowed;
  transform: none;
}

.fb-dark .start-btn.is-disabled,
.fb-dark .start-btn:disabled {
  box-shadow: none;
}

/* контейнер свайпа */
.page {
  .trainings-wrap {
    .train-list {
      .train-item.swipeable {
        position: relative;
        overflow: hidden;
        border-radius: 14px;
      }

      .train-item .swipe-bg {
        position: absolute;
        inset: 0;
        background: #ff4d4f;
        display: grid;
        align-items: center;
        justify-content: end;
        padding-right: 18px;
        z-index: 0;
        transform: translateX(100%);
        transition: transform 160ms ease;
      }

      .train-item .swipe-bg__label {
        color: #fff;
        font-weight: 700;
        letter-spacing: .2px;
        pointer-events: none;
      }

      .train-item .swipe-track {
        position: relative;
        z-index: 1;
        touch-action: pan-y;
      }

      .train-item .train-card {
        will-change: transform;
        transition: transform 160ms ease;
      }

      .train-item .kill-btn {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 4;
        border: none;
        border-radius: 10px;
        padding: 10px 14px;
        background: rgba(0, 0, 0, .25);
        color: #fff;
        display: none;
      }

      .train-item.show-kill .kill-btn {
        display: inline-block;
      }

      .train-item.swiped .train-card {
        pointer-events: none;
      }

      .train-item .swipe-bg {
        pointer-events: none;
      }

      .train-item .kill-btn {
        z-index: 3;
      }

      .train-item.deleting {
        transition: height 180ms ease, margin 180ms ease, padding 180ms ease, opacity 140ms ease;
        opacity: .0;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
      }
    }
  }

  .pub-wrap {
    padding-top: 8px;
    border-radius: 1.25rem 1.25rem 0 0;
    padding-bottom: 100px;
    background-color: #F8F8F8;

    .pub-section {
      margin: 16px 16px 10px;

      .pub-title {
        text-align: center;
        font-size: 16px;
        font-weight: 700;
        margin: 6px 4px 10px;
      }

      .pub-carousel {
        position: relative;
        overflow: hidden;
        touch-action: pan-y;
        border-radius: 16px;
        padding: 0 36px;
        background: transparent;

        .pub-track {
          display: grid;
          grid-auto-flow: column;
          grid-auto-columns: 100%;
          padding: 8px 0;
          gap: 12px;
          will-change: transform;
          transition: transform 280ms ease;

          .pub-card {
            position: relative;
            border-radius: 14px;
            overflow: hidden;
            color: #fff;
            width: 100%;
            min-height: 90px;
            cursor: pointer;
            text-align: center;
            box-shadow: -1px 3px 12px -3px rgba(0, 0, 0, 0.33);

            .pub-card-bg {
              position: absolute;
              inset: 0;
              background: linear-gradient(90deg, #55DA97 0%, #27C06E 100%);
            }

            .pub-card-body {
              position: relative;
              padding: 14px;

              .pub-card-title {
                margin-bottom: 3vw;
                font-size: 4vw;
                line-height: 1.1;
                font-weight: 800;
              }

              .pub-card-desc {
                margin: 0 0 8px;
                font-size: 12px;
                line-height: 1.3;
                opacity: .95;
              }
            }
          }
        }

        .pub-arrow {
          position: absolute;
          z-index: 10;
          top: 50%;
          transform: translateY(-50%);
          width: 28px;
          height: 28px;
          border: 0;
          border-radius: 14px;
          background: #fff;
          box-shadow: 0 6px 22px rgba(0, 0, 0, .12);
          display: grid;
          place-items: center;

          img {
            width: 16px;
            height: 16px;
          }
        }

        .pub-prev {
          left: 0;
        }

        .pub-next {
          right: 0;
        }
      }
    }
  }

  #tplInfo.sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(calc(var(--tplinfo-open-vh) * 1vh), 680px);
    transform: translateY(100%);
    transition: transform .24s ease;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    background: #fff;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .15);

    .sheet-head {
      flex: 0 0 auto;

      .sheet-title {
        margin-bottom: 2vw;
      }
    }

    .sheet-body {
      flex: 1 1 auto;
      min-height: 0;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      overflow: auto;
      padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));

      .tplinfo-hero {
        position: relative;
        border-radius: 16px;
        overflow: hidden;
        padding: 16px 16px 12px;
        margin-bottom: 14px;
        min-height: 120px;

        .tplinfo-hero-bg {
          position: absolute;
          inset: 0;
          background: linear-gradient(90deg, #55DA97 0%, #27C06E 100%);
        }

        .tplinfo-hero-num {
          position: absolute;
          right: 10px;
          top: -6px;
          font-size: 96px;
          line-height: 1;
          opacity: .12;
          font-weight: 800;
          pointer-events: none;
          user-select: none;
        }

        .tplinfo-hero-desc {
          position: relative;
          margin: 0;
          color: #fff;
          font-size: 14px;
          line-height: 1.35;
          max-width: 88%;
        }
      }

      .tplinfo-gallery {
        display: flex;
        gap: 8px;
        margin: 10px 0 6px;

        img {
          flex: 1;
          border-radius: 12px;
          width: 50%;
          height: 120px;
          object-fit: cover;
        }
      }

      .tplinfo-subwrap {
        margin: 6px 0 10px;

        .tplinfo-sub {
          font-size: 4vw;
          color: #666;
          margin: 6px 0 10px;
          position: relative;
        }

        .tplinfo-sub.is-clamped {
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;

          &::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 1.6em;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 70%);
          }
        }

        .tplinfo-sub-toggle {
          margin-top: 6px;
          border: 0;
          background: transparent;
          color: #2CD07A;
          font-weight: 700;
          font-size: 13px;
          padding: 6px 0;
          cursor: pointer;
        }
      }

      .tplinfo-days {
        display: flex;
        flex-direction: column;
        gap: 10px;

        .tplinfo-day {
          position: relative;
          background: #fff;
          border-radius: 14px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
          padding: 12px 12px 10px;
          display: flex;
          gap: 10px;
          align-items: flex-start;

          .icon {
            width: 28px;
            height: 28px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ECFDF4;

            img {
              width: 18px;
              height: 18px;
            }
          }

          .mini-line {
            display: block;
            margin: 0 auto;
            height: 2px;
            width: 92px;
            background: #2CD07A;
            border-radius: 4px;
          }

          .body {
            flex: 1;

            .title {
              font-weight: 400;
              font-size: 4.5vw;
              max-width: 80%;
              margin: 0 0 6px;
              display: flex;
              align-items: center;
              gap: 8px;
            }

            .desc {
              margin: 4px 0 4px;
              font-size: 13px;
              color: #444;
              line-height: 1.3;
            }

            .meta {
              font-size: 12px;
              color: #888;
            }
          }

          .day-add {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 36px;
            height: 36px;
            border-radius: 12px;
            border: 1px solid #27C06E;
            background: #fff;
            font-size: 22px;
            line-height: 1;
            cursor: pointer;
          }
        }
      }
    }
  }

  #tplInfo.sheet.is-open {
    padding-bottom: 100px;
    transform: translateY(0);
  }
}

/*Саня новый css*/
.fb-dark .train-item .swipe-bg {
  background: #d9363e;
}

.fb-dark .pub-arrow {
  background: #2a2a2a;
}

.fb-dark .pub-card .pub-card-bg {
  opacity: .95;
}

:root {
  --tplinfo-open-vh: 86;
}

.app.modal-open .tplinfo-day .day-add:active {
  transform: scale(0.98);
}

.template-note {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.3;
  opacity: .85;
  white-space: pre-wrap;
}