body { 
      font-family: Arial, sans-serif; 
      padding: 20px; 
      background: #f8f9fa; 
    }

    .card {
      background: white;
      padding: 20px 25px;
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      margin: 0 auto;
      width: 100%;
      max-width: 100%;
      overflow: visible;
    }

    h1 {
      margin-bottom: 6px;
    }

    /* Legend styles */
    .legend {
      margin: 10px 0 20px 0;
      font-size: 0.9em;
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      align-items: center;
      user-select: none;
    }
    .legend span {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* Table wrapper scroll container */
    .table-wrapper {
      overflow-x: auto;
      position: relative;
      padding-bottom: 10px;
    }

    /* Table styles */
    table { 
      border-collapse: collapse; 
      width: 100%; 
      background: white; 
      min-width: 700px;
    }

    th, td { 
      border: 1px solid #ddd; 
      padding: 10px; 
      text-align: left; 
      vertical-align: middle; 
      user-select: none;
      white-space: nowrap;
    }

    th { 
      background-color: #f0f0f0; 
      cursor: pointer; 
      position: relative;
    }

    tr:hover { 
      background-color: #f9f9f9; 
    }

    /* Static sorting arrows */
    th .sort-arrow {
      font-size: 0.7em;
      margin-left: 6px;
      color: #666;
      user-select: none;
    }

    /* Circle indicators */
    .circle { 
      display: inline-block; 
      width: 14px; 
      height: 14px; 
      border-radius: 50%; 
      margin-right: 4px; 
      vertical-align: middle; 
    }

    .intro { background-color: #77C9E7; }
    .int   { background-color: #2792B9; }
    .adv   { background-color: #0D4A6B; }

    td span, td { 
      text-align: left; 
    }

    /* Sticky first column */
    #skill-table th:first-child,
    #skill-table td:first-child {
      position: sticky;
      left: 0;
      background-color: white;
      background-clip: padding-box;
      z-index: 3;
      border-right: 1px solid #ddd;
      box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1);
      font-weight: bold; /* Make names bold */
      cursor: default; /* no pointer for first column */
    }

    /* For tbody first column cells lower z-index to keep header on top */
    #skill-table tbody td:first-child {
      z-index: 2;
    }

    /* Responsive legend vertical on small screens */
    @media (max-width: 700px) {
      .legend {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
      }
    }