MoeNovaClient/pages/makedetail/makeMusicDetail.scss

.make-music-detail {
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;

  .nav-header {
    padding: 44px 15px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f5f5f5;

    .back-icon {
      width: 24px;
    }

    .right-info {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;

      .coin-box, .diamond-box {
        display: flex;
        align-items: center;
        background: #f5f5f5;
        border-radius: 15px;
        padding: 2px 8px;

        image {
          width: 16px;
          height: 16px;
          margin-right: 4px;
        }

        text {
          font-size: 14px;
        }
      }
    }
  }

  .content {
    flex: 1;
    padding: 20px;

    .input-section {
      margin-bottom: 20px;

      .label {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 10px;
        display: block;
      }

      .input-field {
        width: 100%;
        height: 44px;
        border-radius: 8px;
        border: 1px solid #eee;
        padding: 0 15px;
        font-size: 14px;
      }

      .textarea-field {
        width: 100%;
        height: 120px;
        border-radius: 8px;
        border: 1px solid #eee;
        padding: 15px;
        font-size: 14px;
      }

      .textarea-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 8px;

        .ai-btn {
          color: #007AFF;
          font-size: 14px;
        }
      }

      .count {
        font-size: 12px;
        color: #999;
        text-align: right;
      }
    }

    .style-section {
      .tabs {
        display: flex;
        gap: 20px;
        margin-bottom: 15px;

        text {
          font-size: 14px;
          color: #666;
          &.active {
            color: #333;
            font-weight: 500;
          }
        }
      }

      .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

        .tag {
          padding: 6px 15px;
          background: #f5f5f5;
          border-radius: 20px;
          font-size: 14px;

          &.active {
            background: #333;
            color: #fff;
          }
        }
      }
    }
  }

  .bottom-section {
    padding: 20px;

    .submit-btn {
      width: 100%;
      height: 44px;
      background: #333;
      color: #fff;
      border-radius: 22px;
      display: flex;
      align-items: center;
      justify-content: center;

      .small {
        font-size: 12px;
        margin-left: 5px;
      }
    }

    .promotion-text {
      text-align: center;
      margin-top: 10px;

      .link-text {
        color: #007AFF;
        font-size: 12px;
      }
    }
  }
}