:root {
      --primary-green: #10b981;
      --primary-green-hover: #059669;
      --bg-light-green: #f0fdf4;
      --border-green: #a7f3d0;
      --star-color: #f59e0b;
      --star-muted: #d1d5db;
    }

    body {
      background-color: #f8fafc;
      color: #334155;
      font-family: system-ui, -apple-system, sans-serif;
    }

    .elf-card {
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      background: #ffffff;
      box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .elf-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.1);
    }

    .star-rating-input {
      display: inline-flex;
      flex-direction: row-reverse;
      gap: 4px;
    }

    .star-rating-input input { display: none; }

    .star-rating-input label {
      font-size: 1.8rem;
      color: var(--star-muted);
      cursor: pointer;
      transition: color 0.15s ease;
    }

    .star-rating-input label:hover,
    .star-rating-input label:hover ~ label,
    .star-rating-input input:checked ~ label {
      color: var(--star-color);
    }

    .avatar-circle {
      width: 45px;
      height: 45px;
      background-color: var(--bg-light-green);
      color: var(--primary-green);
      border: 2px solid var(--border-green);
      font-weight: 700;
      font-size: 1.1rem;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .badge-project {
      background-color: var(--bg-light-green);
      color: var(--primary-green);
      border: 1px solid var(--border-green);
      font-weight: 500;
      font-size: 0.8rem;
      padding: 0.35em 0.65em;
      border-radius: 20px;
    }

    .btn-green {
      background-color: var(--primary-green);
      color: #fff;
      border: none;
      border-radius: 10px;
      padding: 10px 20px;
      font-weight: 600;
      transition: background-color 0.2s ease;
    }

    .btn-green:hover {
      background-color: var(--primary-green-hover);
      color: #fff;
    }

    .form-control:focus {
      border-color: var(--primary-green);
      box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0.25);
    }

    .stars-static {
      color: var(--star-color);
      font-size: 0.95rem;
    }