.hobbieIndicator {

  .grid-container {
    width: 100%;
    max-width: 840px;
    /* Adjusted max-width to tightly fit 3 cards * 280px */
    display: grid;
    grid-template-columns: 1fr;
    /* Default to single column on small screens */
    gap: 0;
    /* Ensures no space between cards */
    justify-items: center;
    /* Center items in their grid cells */
    border-radius: 15px;
    /* Apply border-radius to the overall block */
    overflow: hidden;
    /* Single shadow for the whole block */
    background-color: #ffffff;
    /* Unified background for the block */
  }

  @media (min-width: 768px) {

    /* Medium screens (Tailwind's md) and up, now 3 columns */
    .grid-container {
      grid-template-columns: repeat(3, 1fr);
      /* 3 columns on medium and larger screens */
    }
  }

  /* Styles for the individual hobby card, adapted for no internal borders */
  .hobby-card-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    /* Each card maintains its own background */
    border-radius: 0;
    /* No individual card border-radius */
    box-shadow: none;
    /* No individual card shadows */
    border: none;
    /* IMPORTANT: Removed all borders */
    padding: 20px;
    width: 100%;
    /* Take full width of grid cell */
    max-width: 280px;
    /* Max width for each card */
    box-sizing: border-box;
    /* Include padding and border in the element's total width and height */
  }


  /* Top Percentage Arc/Ring */
  .top-percentage-outer-ring {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: -40px;
    /* Overlap with the main circle below */
    z-index: 10;
    /* Ensure it's on top */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    /* Increased vertical offset and blur for a stronger shadow */

    /* Conic gradient for the arc fill, now with light grey for the unfilled part */
    background: conic-gradient(#8a892f var(--progress-percentage, 85%),
        /* Olive/mustard green color for filled part */
        #e2e8f0 var(--progress-percentage, 85%)
        /* Light grey for remaining arc */
      );
    border: 4px solid #ffffff;
    /* Changed border color to WHITE and increased width */
    display: flex;
    /* Used to help center inner white circle */
    justify-content: center;
    align-items: center;
  }

  .top-percentage-inner-white {
    position: absolute;
    width: 60px;
    /* Smaller inner circle to create the arc thickness */
    height: 60px;
    border-radius: 50%;
    background-color: #ffffff;
    /* White background for the center */
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: #333;
  }

  .top-percentage-label {
    font-weight: 700;
    font-size: 1.1rem;
    color: #333;
    /* Dark text for readability */
    z-index: 1;
    /* Make sure label is above gradient */
  }


  /* Main Content Circle */
  .main-content-circle {
    width: 150px;
    /* Larger circle size */
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #67d8d8 33%, #ffffff 33%);
    /* Teal top 33% fill */
    border: 8px solid #67d8d8;
    /* Teal border - WIDTH INCREASED */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 5;
    /* Below the top percentage circle, above the description box */
    padding: 15px;
    /* Padding for content */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Soft shadow */
    margin-top: 0;
    /* No negative margin here */
    margin-bottom: 20px;
    /* Added margin to push description box down */

  }

  .main-content-circle.teal {
    background: linear-gradient(to bottom, #88D7D7 33%, #ffffff 33%);
      /* Teal top 33% fill */
    border: 8px solid #88D7D7;
  }

  .main-content-circle.blue {
    background: linear-gradient(to bottom, #92AFF1 33%, #ffffff 33%);
      /* Teal top 33% fill */
    border: 8px solid #92AFF1;
  }

  .main-content-circle.purple {
    background: linear-gradient(to bottom, #9292BA 33%, #ffffff 33%);
      /* Teal top 33% fill */
    border: 8px solid #9292BA;
  }

  .main-content-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    text-align: center;
    /* Explicitly center align the text */
    margin-top: 40px;
    /* Adjusted to clear the teal section */
  }

  /* Description Box */
  .description-box {
    background-color: #f3f4f6;
    /* Light grey background */
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-top: 0;
    /* No negative margin */
    z-index: 1;
    position: relative;
    width: 100%;
    /* Take full width of its container */
    max-width: 250px;
    /* Constrain width to match image */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    /* Subtle shadow */
    border: 1px solid #e0e0e0;
    /* Light border */
    height: 140px;
    /* Changed to fixed height to ensure consistent size */
    display: flex;
    /* Use flexbox to center content vertically */
    flex-direction: column;
    justify-content: center;
    /* Center content vertically */
    align-items: center;
    /* Center content horizontally */
  }

  .description-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
  }

  .description-text {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
    font-weight: bold;;
  }

  .section-title {
    color: #4f46e5;
    /* Indigo-600 */
    font-size: 1.75rem;
    /* 28px */
    font-weight: 700;
    /* Bold */
    margin-bottom: 1.5rem;
    /* 24px */
    text-align: center;
  }

  .report-section {
    background-color: #f0f4f8;
    /* Light blue-grey */
    border-left: 5px solid #4f46e5;
    /* Indigo-600 */
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  }

  .report-heading {
    font-size: 1.25rem;
    /* 20px */
    font-weight: 600;
    /* Semi-bold */
    color: #1a202c;
    /* Dark text */
    margin-bottom: 10px;
  }

  .report-text {
    font-size: 1rem;
    color: #4a5568;
    /* Grey-700 */
  }

  .footer {
    margin-top: 30px;
    text-align: center;
    font-size: 0.8rem;
    color: #6b7280;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
  }

  /* Custom styles for the circular progress indicators (smaller ones for 'Identified Hobbies') */
  .progress-circle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100px;
    /* Outer circle size */
    height: 100px;
    margin: 0 auto 10px;
  }

  .progress-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.25rem;
    color: #333;
    /* Default for Digital & Technical Skills */
    background: conic-gradient(#67d8d8 var(--progress, 0%),
        /* Teal-like color for fill */
        #e2e8f0 var(--progress, 0%)
        /* Light grey for remaining */
      );
    transition: --progress 0.5s ease-out;
    /* Smooth transition for progress */
  }

  .progress-circle.bg-scientific {
    background: conic-gradient(#93c5fd var(--progress, 0%),
        /* Blue-300 */
        #e2e8f0 var(--progress, 0%));
  }

  .progress-circle.bg-physical {
    background: conic-gradient(#c4b5fd var(--progress, 0%),
        /* Purple-300 */
        #e2e8f0 var(--progress, 0%));
  }

  .progress-label {
    position: absolute;
    font-size: 0.85rem;
    font-weight: 600;
    color: #4a5568;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }

  .progress-description {
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    margin-top: 5px;
    min-height: 40px;
    /* Ensure consistent height for descriptions */
  }

  .hobby-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }

  @media (min-width: 640px) {
    .hobbies-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .hobby-item {
      margin-bottom: 0;
    }
  }

  /* Styles for the new 1, 2, 3 large circular blocks (main hobby intelligence types) */
  .main-hobby-circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .main-hobby-circle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 20px 20px;
    /* Increased top padding to accommodate the number */
    /* Background for the container holding circle + number, if needed */
    /* This mimics the image container for the single circle */


  }

    .main-hobby-circle-container.non-selected {
      margin-top : 35px;
      .main-hobby-circle {
        border: 5px solid #9d9fa2;
        background: linear-gradient(to bottom, #9d9fa2 33%, #ffffff 33%);
      }
        .bg-thinker {

          width: 140px;
          height: 140px;

          .main-block-number {
            color: #9d9fa2;
            font-size: 6rem;;
            margin-top:25px;

          }
        }

        .main-block-content {
          padding: 0px;

          .main-block-text {
            font-size: 10px;
          }

          .main-block-subtext {
            font-size: 9px;
          }
        }
    }

  .main-hobby-circle {
    width: 175px;
    /* Adjust size to match image proportionally */
    height: 175px;
    border-radius: 50%;
    /* Makes it a perfect circle */
    border: 5px solid var(--circle-border-color, #20c1c1);
    /* Dynamic border color */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: visible;
    /* Changed to visible so the number is not clipped */
    background: linear-gradient(to bottom, var(--fill-color, #20c1c1) 33%, #ffffff 33%);
    /* Dynamic top fill */
    box-shadow: 0 0 10px rgba(32, 193, 193, 0.15),
      /* Teal outer glow */
      0 2px 5px rgba(0, 0, 0, 0.05);
    /* Soft inner shadow */
  }

  /* Define colors for the main hobby circles */
  .main-hobby-circle.bg-maker {
    --circle-border-color: #20c1c1;
    --fill-color: #20c1c1;
  }

  /* Teal */
  .main-hobby-circle.bg-thinker.teal {
    --circle-border-color: #16CABD;
    --fill-color: #16CABD;
  }

  /* Blue-400 */
  .main-hobby-circle.bg-thinker.blue {
    --circle-border-color: #336AFF;
    --fill-color: #336AFF;
  }

  /* Purple */
  .main-hobby-circle.bg-thinker.purple {
    --circle-border-color: #2C1E73;
    --fill-color: #2C1E73;
  }


  /* Blue-400 */
  .main-hobby-circle.bg-communicator {
    --circle-border-color: #a78bfa;
    --fill-color: #a78bfa;
  }

  /* Purple-400 */


  .main-block-number {
    position: absolute;
      top: -75px;
      /* Adjusted to be higher and cross the top, tail crosses teal line */
      left: 50%;
      /* Center horizontally */
      transform: translateX(-50%);
      /* Adjust for its own width */
      font-size: 9rem;
      /* Increased size */
      font-weight: 900;
      /* Extra bold */
      color: var(--number-color, #20c1c1);
      /* Dynamic color for the number */
      line-height: 1;
      z-index: 3;
      /* Ensure number is on top */
      text-shadow:
        -2px -2px 0 #ffffff,
        2px -2px 0 #ffffff,
        -2px 2px 0 #ffffff,
        2px 2px 0 #ffffff,
        0 0 5px rgba(0, 0, 0, 0.1);
      /* Original subtle shadow */
  }

  /* Define number colors for the main hobby circles */
  .main-block-number.color-maker {
    --number-color: #20c1c1;
  }

  .main-block-number.color-thinker.teal {
    --number-color: #16CABD;
    left:44%;
  }
  .main-block-number.color-thinker.blue {
    --number-color: #336AFF;
  }
  .main-block-number.color-thinker.purple {
  --number-color: #2C1E73;
  }

  .main-block-number.color-communicator {
    --number-color: #a78bfa;
  }


  .teal {
    color: #16CABD;
  }

  .blue {
    color: #336AFF;
  }

  .purple {
    color: #2C1E73;
  }

   .grey {
    color: #9d9fa2;
  }

  .selection-status {
    font-size: 15px;
    font-weight: bold;;
  }


  .main-block-content {
    position: relative;
    z-index: 2;
    /* Ensure text is on top */
    padding: 0 15px;
    /* Add some padding for text */
    margin-top: 40px;
    /* Push text down to clear number */
    text-align: center;
    color: #333;
    /* Ensure text is visible over the background */
  }

  .main-block-text {
    font-size: 16px;
    /* Adjust font size */
    font-weight: 600;
    /* Semi-bold */
    line-height: 1.3;
  }

  .main-block-subtext {
    font-size: 10px;
    /* Adjust font size */
    color: #666;
    margin-top: 5px;
    font-weight: bold;;
  }

  .large-circles-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Stack on small screens */
    row-gap: 20px;
    margin-bottom: 30px;
    margin-top: 30px;
    /* Space from section title */
  }

  @media (min-width: 640px) {
    .large-circles-grid {
      grid-template-columns: repeat(3, 1fr);
      /* 3 columns on larger screens */
    }
  }

  .large-circle-visual-note {
    text-align: center;
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 20px;
    margin-bottom: 30px;
    font-style: italic;
  }
}