.ss-data-tool {
  box-sizing: border-box;
  width: min(760px, 100%);
  margin: 12px auto 18px;
  border: 1px solid #b8d6e7;
  border-radius: 8px;
  background: #ffffff;
  color: #173b55;
  font-family: Arial, Helvetica, sans-serif;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.ss-data-tool * {
  box-sizing: border-box;
}

.ss-data-header {
  padding: 14px 16px;
  border-bottom: 1px solid #b8d6e7;
  background: linear-gradient(180deg, #f4fbff, #e7f5fc);
}

.ss-data-title {
  color: #1d4f70;
  font-size: 20px;
  font-weight: bold;
  line-height: 24px;
}

.ss-data-subtitle {
  margin-top: 3px;
  color: #4f6c7b;
  font-size: 13px;
  line-height: 18px;
}

.ss-data-grid {
  display: grid;
  grid-template-columns: 285px 1fr;
  gap: 14px;
  padding: 14px;
}

.ss-data-panel {
  border: 1px solid #d5e6ef;
  border-radius: 8px;
  background: #fbfdff;
  padding: 12px;
}

.ss-data-field {
  display: block;
  margin-bottom: 10px;
}

.ss-data-field span {
  display: block;
  margin-bottom: 4px;
  color: #31520c;
  font-size: 13px;
  font-weight: bold;
  line-height: 18px;
}

.ss-data-field input,
.ss-data-field select {
  width: 100%;
  min-height: 36px;
  border: 1px solid #9fc0d2;
  border-radius: 6px;
  background: #ffffff;
  color: #173b55;
  font-size: 15px;
  line-height: 22px;
  padding: 6px 8px;
}

.ss-data-field textarea {
  width: 100%;
  min-height: 86px;
  resize: vertical;
  border: 1px solid #9fc0d2;
  border-radius: 6px;
  background: #ffffff;
  color: #173b55;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 22px;
  padding: 6px 8px;
}

.ss-data-field textarea:focus,
.ss-data-field select:focus,
.ss-data-field input:focus {
  border-color: #0b79bd;
  outline: 2px solid rgba(11,121,189,.18);
}

.ss-picto-settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ss-venn-grid {
  display: grid;
  gap: 7px;
  margin: 8px 0 10px;
}

.ss-venn-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 7px;
  align-items: start;
}

.ss-venn-row span {
  color: #31520c;
  font-size: 12px;
  font-weight: bold;
  line-height: 18px;
  padding-top: 7px;
}

.ss-venn-row textarea {
  min-height: 42px;
}

.ss-venn-tool .ss-data-canvas {
  max-width: 560px;
}

.ss-venn-game-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.ss-venn-game-stat {
  border: 1px solid #d5e6ef;
  border-radius: 6px;
  background: #ffffff;
  padding: 7px;
  color: #4f6c7b;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

.ss-venn-game-stat strong {
  display: block;
  color: #1d4f70;
  font-size: 18px;
  line-height: 22px;
}

.ss-venn-item {
  min-height: 48px;
  margin: 8px 0 12px;
  border: 2px solid #9fc0d2;
  border-radius: 7px;
  background: #ffffff;
  color: #173b55;
  font-size: 20px;
  font-weight: bold;
  line-height: 26px;
  padding: 10px;
  text-align: center;
}

.ss-venn-options {
  display: grid;
  gap: 8px;
}

.ss-venn-option {
  min-height: 38px;
  border: 2px solid #9fc0d2;
  border-radius: 7px;
  background: #ffffff;
  color: #173b55;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  line-height: 18px;
  padding: 8px;
  text-align: left;
}

.ss-venn-option:hover,
.ss-venn-option:focus {
  border-color: #0b79bd;
  background: #e7f6ff;
  outline: none;
}

.ss-venn-option.correct {
  border-color: #319a4a;
  background: #e5f8e9;
  color: #1d6330;
}

.ss-venn-option.wrong {
  border-color: #c82d2d;
  background: #ffe7e7;
  color: #8a1616;
}

.ss-venn-feedback {
  min-height: 22px;
  margin-top: 10px;
  color: #31520c;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
}

.ss-line-settings {
  display: grid;
  grid-template-columns: repeat(3, minmax(62px, 1fr));
  gap: 8px;
}

.ss-bar-rows {
  display: grid;
  gap: 7px;
  margin: 8px 0 10px;
}

.ss-bar-row {
  display: grid;
  grid-template-columns: 1fr 68px 38px;
  gap: 6px;
  align-items: center;
}

.ss-bar-row input[type="color"] {
  width: 38px;
  min-height: 34px;
  padding: 2px;
}

.ss-bar-row .ss-data-button {
  min-height: 34px;
  padding: 4px 0;
  width: 38px;
}

.ss-chart-title {
  color: #31520c;
  font-size: 22px;
  font-weight: bold;
  margin: 0 0 14px;
  text-align: center;
}

.ss-data-empty {
  border: 1px dashed #bfd6e3;
  border-radius: 6px;
  color: #49606f;
  font-size: 15px;
  padding: 24px;
  text-align: center;
}

.ss-data-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.ss-data-button {
  min-height: 36px;
  border: 1px solid #0a6ba3;
  border-radius: 6px;
  background: #0b79bd;
  color: #ffffff;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  line-height: 18px;
  padding: 8px 12px;
}

.ss-data-button.secondary {
  border-color: #9fc0d2;
  background: #ffffff;
  color: #24546e;
}

.ss-data-button:hover,
.ss-data-button:focus {
  filter: brightness(.96);
  outline: none;
}

.ss-data-preview {
  border: 1px solid #d5e6ef;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
}

.ss-data-canvas {
  display: block;
  width: 100%;
  height: auto;
  max-width: 430px;
  margin: 0 auto;
  border: 1px solid #edf4f7;
  border-radius: 6px;
  background: #ffffff;
}

.ss-data-note {
  margin-top: 10px;
  color: #4f6c7b;
  font-size: 13px;
  line-height: 19px;
}

.ss-picto-shell .ss-data-grid {
  grid-template-columns: 260px 1fr;
}

.ss-picto-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.ss-picto-stat {
  border: 1px solid #d5e6ef;
  border-radius: 6px;
  background: #ffffff;
  padding: 7px;
  color: #4f6c7b;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

.ss-picto-stat strong {
  display: block;
  color: #1d4f70;
  font-size: 18px;
  line-height: 22px;
}

.ss-picto-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  color: #173b55;
  font-size: 14px;
}

.ss-picto-table th,
.ss-picto-table td {
  border: 1px solid #d5e6ef;
  padding: 6px 8px;
  text-align: left;
}

.ss-picto-table th {
  background: #eef7fc;
  color: #31520c;
}

.ss-picto-question {
  margin: 0 0 10px;
  color: #244406;
  font-size: 16px;
  font-weight: bold;
  line-height: 23px;
}

.ss-picto-options {
  display: grid;
  gap: 8px;
}

.ss-picto-option {
  min-height: 40px;
  border: 2px solid #9fc0d2;
  border-radius: 7px;
  background: #ffffff;
  color: #173b55;
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  line-height: 20px;
  padding: 8px 10px;
  text-align: left;
}

.ss-picto-option:hover,
.ss-picto-option:focus {
  border-color: #0b79bd;
  background: #e7f6ff;
  outline: none;
}

.ss-picto-option.correct {
  border-color: #319a4a;
  background: #e5f8e9;
  color: #1d6330;
}

.ss-picto-option.wrong {
  border-color: #c82d2d;
  background: #ffe7e7;
  color: #8a1616;
}

.ss-picto-feedback {
  min-height: 22px;
  margin-top: 10px;
  color: #31520c;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
}

.ss-tally-preview-table {
  width: 100%;
  border-collapse: collapse;
  color: #173b55;
  font-size: 15px;
}

.ss-tally-preview-table th,
.ss-tally-preview-table td {
  border: 1px solid #bfd6e3;
  padding: 8px 10px;
  vertical-align: top;
}

.ss-tally-preview-table th {
  background: #eef7fc;
  color: #31520c;
  font-weight: bold;
  text-align: left;
}

.ss-tally-marks {
  min-height: 28px;
  font-family: "Courier New", monospace;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 30px;
  color: #0b79bd;
  word-break: break-word;
}

.ss-tally-count {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

@media (max-width: 700px) {
  .ss-data-grid {
    grid-template-columns: 1fr;
  }

  .ss-picto-shell .ss-data-grid {
    grid-template-columns: 1fr;
  }
}