/* Component Scope Reset */
    .card, .card * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    /* Horizontal Rectangular Card */
    .card {
      width: 100%;
      max-width: 300px;
      padding: 12px 14px;
      border-radius: 14px;
      /* Soft Background Tint */
      background: linear-gradient(135deg, #f4f4d0 0%, #e6e6b8 100%);
      /* All Text Black */
      color: #000000;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    /* Left Side Details */
    .card .left-content {
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex-shrink: 0;
    }

    .card h2 {
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: -0.2px;
      color: #000000; /* Black Text */
    }

    .card .deadline-text {
      font-size: 0.8rem;
      line-height: 1.1;
      color: #000000; /* Black Text */
    }

    .card .deadline-text span {
      font-weight: 700;
    }

    .card .year {
      display: inline-block;
      font-weight: 400;
    }

    /* Right Side Progress Bar & Status */
    .card .right-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
    }

    .card .progress-track {
      width: 100%;
      height: 8px;
      background-color: rgba(255, 255, 255, 0.75);
      border-radius: 10px;
      overflow: hidden;
    }

    .card .progress-fill {
      height: 100%;
      width: 0%;
      /* Red Progress Bar */
      background-color: #ff0000;
      border-radius: 10px;
      transition: width 0.4s ease-in-out;
    }

    .card .remaining-text {
      text-align: right;
      font-size: 0.75rem;
      font-weight: 600;
      color: #000000; /* Black Text */
    }