:root {
  --ssc-bg-color: #f8f9fa;
  --ssc-card-bg-color: #ffffff;
  --ssc-text-color: #212529;
  --ssc-text-muted-color: #6c757d;
  --ssc-border-color: #dee2e6;
  --ssc-input-bg-color: #f1f3f5;
  --ssc-primary-color: #0d6efd;
  --ssc-primary-hover-color: #0b5ed7;
  --ssc-secondary-color: #e9ecef;
  --ssc-secondary-hover-color: #dbe1e7;
  --ssc-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --ssc-level-untrained: #6c757d;
  --ssc-level-novice: #198754;
  --ssc-level-intermediate: #0d6efd;
  --ssc-level-advanced: #6f42c1;
  --ssc-level-elite: #ffc107;
  --ssc-highlight-color: #0ea5e9;
}

.ssc-app {
  margin: 0 auto;
  max-width: 1290px;
  width: 100%;
}

.ssc-main-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.ssc-card {
  background-color: var(--ssc-card-bg-color);
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: var(--ssc-shadow);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ssc-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ssc-text-color);
  margin: 0;
}

.ssc-grid {
  display: grid;
  gap: 1rem;
}

.ssc-grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ssc-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ssc-text-muted-color);
  margin-bottom: 0.5rem;
}

.ssc-toggle-group {
  display: flex;
  background-color: var(--ssc-secondary-color);
  border-radius: 0.375rem;
  padding: 0.25rem;
}

.ssc-toggle-button {
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.25rem;
  border: none;
  background-color: transparent;
  color: var(--ssc-text-color);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.ssc-toggle-button:hover {
  background-color: var(--ssc-secondary-hover-color);
}

.ssc-toggle-button.ssc-active {
  background-color: var(--ssc-primary-color);
  color: white;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.ssc-input {
  width: 100%;
  background-color: var(--ssc-input-bg-color);
  border: 1px solid var(--ssc-border-color);
  border-radius: 0.375rem;
  padding: 0.75rem;
  color: var(--ssc-text-color);
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
}
.ssc-input::placeholder {
    color: #adb5bd;
}
.ssc-input:focus {
  outline: none;
  border-color: var(--ssc-primary-color);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

.ssc-lift-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
  border: none;
  cursor: pointer;
  background-color: var(--ssc-input-bg-color);
  color: var(--ssc-text-color);
}
.ssc-lift-button:hover {
  background-color: #e2e6ea;
}
.ssc-lift-button.ssc-active {
  background-color: var(--ssc-primary-color);
  color: white;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.ssc-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.ssc-1rm-calc-box {
  background-color: var(--ssc-bg-color);
  padding: 1rem;
  border-radius: 0.375rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ssc-1rm-title {
  font-weight: 600;
  color: var(--ssc-text-color);
  margin: 0;
}
.ssc-1rm-desc {
  font-size: 0.75rem;
  color: var(--ssc-text-muted-color);
  margin:0;
}
.ssc-input-light {
    background-color: white;
}
.ssc-1rm-result-box {
    text-align: center;
    background-color: #e9ecef;
    padding: 0.75rem;
    border-radius: 0.375rem;
}
.ssc-1rm-result-label {
    font-size: 0.875rem;
    color: var(--ssc-text-muted-color);
    margin: 0;
}
.ssc-1rm-result-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ssc-highlight-color);
    margin: 0;
}
.ssc-1rm-result-unit {
    font-size: 1.125rem;
}

.ssc-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  min-height: 300px;
}
.ssc-placeholder-icon {
  width: 4rem;
  height: 4rem;
  color: #adb5bd;
  margin-bottom: 1rem;
  animation: ssc-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes ssc-pulse {
  50% { opacity: .5; }
}
.ssc-placeholder-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ssc-text-color);
}
.ssc-placeholder-text {
  color: var(--ssc-text-muted-color);
  margin-top: 0.25rem;
}
.ssc-results-subtitle {
    color: var(--ssc-text-muted-color);
    margin: 0 0 1.5rem 0;
}
.ssc-level-display-box {
    text-align: center;
    background-color: var(--ssc-input-bg-color);
    padding: 1.5rem;
    border-radius: 0.5rem;
}
.ssc-level-label {
    font-size: 1.125rem;
    color: var(--ssc-text-muted-color);
    margin: 0;
}
.ssc-level-value {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: -0.025em;
    margin: 0;
}

.ssc-gauge-container { width: 100%; }
.ssc-gauge-track { position: relative; height: 1rem; width: 100%; background-color: var(--ssc-secondary-color); border-radius: 9999px; overflow: hidden; }
.ssc-gauge-gradient-bar { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient(to right, var(--ssc-level-untrained), var(--ssc-level-novice), var(--ssc-level-intermediate), var(--ssc-level-advanced), var(--ssc-level-elite)); border-radius: 9999px; }
.ssc-gauge-marker-area { position: relative; width: 100%; height: 1rem; }
.ssc-gauge-marker { position: absolute; top: -1rem; transform: translateX(-50%); transition: left 0.5s ease-out; }
.ssc-gauge-marker-head { width: 0.75rem; height: 0.75rem; border-radius: 9999px; }
.ssc-gauge-marker-arrow { position: absolute; top: 0.75rem; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid var(--ssc-text-color); }
.ssc-gauge-marker-label { position: absolute; top: -1.25rem; left: 50%; transform: translateX(-50%); text-align: center; font-size: 0.75rem; font-weight: 700; color: var(--ssc-text-color); white-space: nowrap; }
.ssc-gauge-labels { display: flex; justify-content: space-between; font-size: 0.75rem; margin-top: 1rem; padding: 0 0.5rem; }
.ssc-gauge-label-item { text-align: center; width: 20%; }
.ssc-gauge-label-item span { font-weight: 500; }
.ssc-gauge-label-item span.ssc-active-label { font-weight: 700; }

.ssc-level-untrained { color: var(--ssc-level-untrained); }
.ssc-level-novice { color: var(--ssc-level-novice); }
.ssc-level-intermediate { color: var(--ssc-level-intermediate); }
.ssc-level-advanced { color: var(--ssc-level-advanced); }
.ssc-level-elite { color: var(--ssc-level-elite); }

.ssc-table-container { margin-top: 2rem; }
.ssc-table-title { font-size: 1.25rem; font-weight: 700; color: var(--ssc-text-color); margin-bottom: 1rem; }
.ssc-table-wrapper { overflow-x: auto; }
.ssc-table { width: 100%; text-align: left; border-collapse: collapse; }
.ssc-table th, .ssc-table td { padding: 0.75rem; text-align: center; }
.ssc-table thead { background-color: var(--ssc-input-bg-color); }
.ssc-table th { font-size: 0.875rem; font-weight: 600; color: var(--ssc-text-muted-color); }
.ssc-table td { font-weight: 700; color: var(--ssc-text-color); border-bottom: 1px solid var(--ssc-border-color); }
.ssc-table th.ssc-active-col, .ssc-table td.ssc-active-col { color: var(--ssc-highlight-color); font-weight: 900; }

.ssc-actions { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .ssc-actions { flex-direction: row; justify-content: flex-end; } }
.ssc-button { flex-grow: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 600; border-radius: 0.375rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); border: 1px solid transparent; cursor: pointer; transition: background-color 0.2s; }
.ssc-button:focus { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.4); }
.ssc-button-icon { width: 1.25rem; height: 1.25rem; margin-right: 0.5rem; }

.ssc-button-primary { color: white; background-color: var(--ssc-primary-color); }
.ssc-button-primary:hover { background-color: var(--ssc-primary-hover-color); }
.ssc-button-secondary { color: var(--ssc-text-color); background-color: var(--ssc-secondary-color); border: 1px solid var(--ssc-border-color); }
.ssc-button-secondary:hover { background-color: var(--ssc-secondary-hover-color); }

@media print {
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .ssc-no-print {
    display: none !important;
  }
  .ssc-app, .ssc-card {
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .ssc-main-grid {
    display: block !important;
  }
  .ssc-print-container {
     box-shadow: none !important;
     border: 2px solid var(--ssc-border-color) !important;
  }
}