.subcat-cs3 {
  background-color: #b2dbdf;
}
.hard-cs3 {
  background-color: #8ecbd0;
}
.soft-cs3 {
  background-color: #ebf2f2;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 4px, transparent 4px, transparent 8px);
}
.subcat-cs2 {
  background-color: #b2dfdf;
}
.hard-cs2 {
  background-color: #8ed0d0;
}
.soft-cs2 {
  background-color: #ebf2f2;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 4px, transparent 4px, transparent 8px);
}
.subcat-cs1 {
  background-color: #b2dfdb;
}
.hard-cs1 {
  background-color: #8ed0ca;
}
.soft-cs1 {
  background-color: #ebf2f2;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 4px, transparent 4px, transparent 8px);
}
.subcat-csharp7 {
  background-color: #e3c4e9;
}
.hard-csharp7 {
  background-color: #d29fdb;
}
.soft-csharp7 {
  background-color: #fdfcfd;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 4px, transparent 4px, transparent 8px);
}
.subcat-csharp6 {
  background-color: #e0c4e9;
}
.hard-csharp6 {
  background-color: #cd9fdb;
}
.soft-csharp6 {
  background-color: #fdfcfd;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 4px, transparent 4px, transparent 8px);
}
.subcat-csharp5 {
  background-color: #ddc4e9;
}
.hard-csharp5 {
  background-color: #c89fdb;
}
.soft-csharp5 {
  background-color: #fdfcfd;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 4px, transparent 4px, transparent 8px);
}
.subcat-csharp4 {
  background-color: #dac4e9;
}
.hard-csharp4 {
  background-color: #c39fdb;
}
.soft-csharp4 {
  background-color: #fdfcfd;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 4px, transparent 4px, transparent 8px);
}
.subcat-csharp3 {
  background-color: #d7c4e9;
}
.hard-csharp3 {
  background-color: #be9fdb;
}
.soft-csharp3 {
  background-color: #fdfcfd;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 4px, transparent 4px, transparent 8px);
}
.subcat-csharp2 {
  background-color: #d4c4e9;
}
.hard-csharp2 {
  background-color: #b99fdb;
}
.soft-csharp2 {
  background-color: #fdfcfd;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 4px, transparent 4px, transparent 8px);
}
.subcat-csharp1 {
  background-color: #d1c4e9;
}
.hard-csharp1 {
  background-color: #b49fdb;
}
.soft-csharp1 {
  background-color: #fdfcfd;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 4px, transparent 4px, transparent 8px);
}
.subcat-sql4 {
  background-color: #b3d3fc;
}
.hard-sql4 {
  background-color: #82b6fa;
}
.soft-sql4 {
  background-color: #fdfeff;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 4px, transparent 4px, transparent 8px);
}
.subcat-sql3 {
  background-color: #b3d9fc;
}
.hard-sql3 {
  background-color: #82c0fa;
}
.soft-sql3 {
  background-color: #fdfeff;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 4px, transparent 4px, transparent 8px);
}
.subcat-sql2 {
  background-color: #b3dffc;
}
.hard-sql2 {
  background-color: #82cafa;
}
.soft-sql2 {
  background-color: #fdfeff;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 4px, transparent 4px, transparent 8px);
}
.subcat-sql1 {
  background-color: #b3e5fc;
}
.hard-sql1 {
  background-color: #82d4fa;
}
.soft-sql1 {
  background-color: #fdfeff;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 4px, transparent 4px, transparent 8px);
}
.subcat-web3 {
  background-color: #ffedb2;
}
.hard-web3 {
  background-color: #ffe17f;
}
.soft-web3 {
  background-color: #ffffff;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 4px, transparent 4px, transparent 8px);
}
.subcat-web2 {
  background-color: #ffe6b2;
}
.hard-web2 {
  background-color: #ffd67f;
}
.soft-web2 {
  background-color: #ffffff;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 4px, transparent 4px, transparent 8px);
}
.subcat-web1 {
  background-color: #ffe0b2;
}
.hard-web1 {
  background-color: #ffcb7f;
}
.soft-web1 {
  background-color: #ffffff;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 4px, transparent 4px, transparent 8px);
}
.subcat-mobile1 {
  background-color: #c8e6c9;
}
.hard-mobile1 {
  background-color: #a5d6a7;
}
.soft-mobile1 {
  background-color: #fdfefd;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 4px, transparent 4px, transparent 8px);
}
.subcat-docker1 {
  background-color: #cfd8dc;
}
.hard-docker1 {
  background-color: #b2c0c6;
}
.soft-docker1 {
  background-color: #fcfcfc;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 4px, transparent 4px, transparent 8px);
}
.subcat-git1 {
  background-color: #e0e0e0;
}
.hard-git1 {
  background-color: #c7c7c7;
}
.soft-git1 {
  background-color: #ffffff;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 4px, transparent 4px, transparent 8px);
}
.subcat-team1 {
  background-color: #ffccbc;
}
.hard-team1 {
  background-color: #ffa589;
}
.soft-team1 {
  background-color: #ffffff;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 4px, transparent 4px, transparent 8px);
}
.subcat-prof1 {
  background-color: #ffecb3;
}
.hard-prof1 {
  background-color: #ffdf80;
}
.soft-prof1 {
  background-color: #ffffff;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 4px, transparent 4px, transparent 8px);
}
.cat-cs {
  background-color: #b2dfdb;
}
.cat-csharp {
  background-color: #d1c4e9;
}
.cat-sql {
  background-color: #b3e5fc;
}
.cat-web {
  background-color: #ffe0b2;
}
.cat-mobile {
  background-color: #c8e6c9;
}
.cat-docker {
  background-color: #cfd8dc;
}
.cat-git {
  background-color: #e0e0e0;
}
.cat-team {
  background-color: #ffccbc;
}
.cat-prof {
  background-color: #ffecb3;
}
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 20px;
  background-color: #fafafa;
  color: #333;
}
h1 {
  text-align: center;
}
.table-container {
  overflow-x: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: white;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 800px;
}
th {
  background-color: #3f51b5;
  color: white;
  padding: 12px 8px;
  font-weight: 600;
  text-align: left;
  position: sticky;
  top: 0;
}
td {
  padding: 10px 8px;
  border-bottom: 1px solid #ddd;
  vertical-align: top;
}
.skill-type {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  background-color: rgba(0, 0, 0, 0.05);
}
.subcategory-header {
  font-weight: 600;
  padding: 8px;
  border-bottom: 1px solid #ddd;
  color: #555;
  font-size: 1.1em;
  background-color: transparent;
}
.note {
  margin-top: 20px;
  padding: 15px;
  background-color: #e3f2fd;
  border-left: 5px solid #2196f3;
  border-radius: 4px;
}
.subcategory-row td {
  font-weight: 700;
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
}
tr:hover td {
  filter: brightness(0.98);
}
table:has(td.cat-cs[data-category-key='cs']:hover) tr[data-category-key='cs'] {
  filter: brightness(1.1);
}
table:has(td.cat-csharp[data-category-key='csharp']:hover) tr[data-category-key='csharp'] {
  filter: brightness(1.1);
}
table:has(td.cat-sql[data-category-key='sql']:hover) tr[data-category-key='sql'] {
  filter: brightness(1.1);
}
table:has(td.cat-web[data-category-key='web']:hover) tr[data-category-key='web'] {
  filter: brightness(1.1);
}
table:has(td.cat-mobile[data-category-key='mobile']:hover) tr[data-category-key='mobile'] {
  filter: brightness(1.1);
}
table:has(td.cat-docker[data-category-key='docker']:hover) tr[data-category-key='docker'] {
  filter: brightness(1.1);
}
table:has(td.cat-git[data-category-key='git']:hover) tr[data-category-key='git'] {
  filter: brightness(1.1);
}
table:has(td.cat-team[data-category-key='team']:hover) tr[data-category-key='team'] {
  filter: brightness(1.1);
}
table:has(td.cat-prof[data-category-key='prof']:hover) tr[data-category-key='prof'] {
  filter: brightness(1.1);
}
.color-legend {
  margin-top: 30px;
}
.color-legend h3 {
  margin-bottom: 10px;
}
.color-legend table {
  width: auto;
  min-width: 400px;
}
.color-legend table th,
.color-legend table td {
  padding: 8px;
  text-align: left;
}
.color-sample {
  display: inline-block;
  width: 30px;
  height: 20px;
  border: 1px solid #ccc;
}
.rating-input {
  width: 100%;
  min-width: 70px;
  padding: 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 13px;
}
input[type='date'].rating-input {
  min-width: 120px;
}
input[type='text'].rating-input {
  min-width: 150px;
}
.controls {
  margin: 20px 0;
  display: flex;
  gap: 10px;
}
.controls button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}
.controls button#export-btn {
  background-color: #4caf50;
  color: white;
}
.controls button#export-btn:hover {
  background-color: #45a049;
}
.controls button#reset-btn {
  background-color: #f44336;
  color: white;
}
.controls button#reset-btn:hover {
  background-color: #d32f2f;
}
#matrix-table th,
#matrix-table td {
  white-space: nowrap;
}
#matrix-table .category-col,
#matrix-table .subcategory-col {
  max-width: 150px;
  white-space: normal;
  word-wrap: break-word;
}
#matrix-table .skill-col {
  max-width: 200px;
  white-space: normal;
  word-wrap: break-word;
}
#matrix-table .self-col,
#matrix-table .freq-col,
#matrix-table .conf-col {
  min-width: 70px;
}
#matrix-table .date-col {
  min-width: 120px;
}
#matrix-table .note-col {
  min-width: 150px;
}
#matrix-table .rating-input {
  width: 100%;
  padding: 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 13px;
}