.competition-page {
  background-color: #000;
  min-height: 100vh;
  padding: 20px;

  .comp-list {
    .comp-card {
      background: #1f1f1f;
      border-radius: 12px;
      margin-bottom: 24px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

      .cover {
        width: 100%;
        height: 200px;
        display: block;
      }

      .info {
        padding: 16px;

        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;

          .title {
            font-size: 18px;
            font-weight: bold;
            color: #fff;
            flex: 1;
            margin-right: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .status {
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 4px;
            background: #333;
            color: #ccc;

            &.registration { background: #07c160; color: #fff; }
            &.submission { background: #1890ff; color: #fff; }
            &.judging { background: #faad14; color: #fff; }
            &.ended { background: #ff4d4f; color: #fff; }
          }
        }

        .desc {
          font-size: 14px;
          color: #999;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          margin-bottom: 12px;
        }

        .footer {
          border-top: 1px solid #333;
          padding-top: 12px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .time {
            font-size: 12px;
            color: #666;
          }
        }
      }
    }
  }

  .empty {
    text-align: center;
    color: #666;
    margin-top: 40px;
  }
}
