:root {
  --fs-26-60: clamp(26px, 2.5297vw + 11.43px, 60px) !important;
  --fs-20-42: clamp(20px, 1.636vw + 10.5766px, 42px) !important;
  --fs-16-32: clamp(16px, 9.15px + 1.19vw, 32px) !important;
  --fs-12-24: clamp(12px, 6.8576px + 0.8928vw, 24px) !important;
  --fs-12-20: clamp(12px, 0.595vw + 8.57px, 20px) !important;
  --fs-12-18: clamp(12px, 0.44vw + 9.43px, 18px) !important;
  --fs-12-16: clamp(12px, 10.29px + 0.297vw, 16px) !important;
  --fs-10-16: clamp(10px, 8.525px + 0.3703vw, 16px) !important;
  --primary-bg: #f5f4ed;
  --secondary-bg: #ffc62f;
  --text-dark: #333;
  --text-light: #666;
  --border-color: #ddd;
  --success-color: #4caf50;
  --error-color: #f44336;
}

.tools-parent-container {
  background: linear-gradient(135deg, var(--primary-bg) 0%, #fff 100%);
  min-height: 100vh;
  color: var(--text-dark);
  padding: clamp(10px, 2vw, 20px);
}

.tools-parent-container .container {
  max-width: 1200px;
  margin: 0 auto;
  background: white;
  border-radius: clamp(15px, 2vw, 25px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.tools-parent-container header {
  background: linear-gradient(135deg, var(--secondary-bg) 0%, #ffb700 100%);
  padding: clamp(20px, 4vw, 40px) clamp(15px, 3vw, 30px);
  text-align: center;
  border-bottom: 4px solid #ff9f00;
}

.tools-parent-container h1 {
  font-size: var(--fs-26-60);
  color: var(--text-dark);
  font-weight: 700;
  margin-bottom: clamp(5px, 1vw, 10px);
}

.tools-parent-container .subtitle {
  font-size: var(--fs-12-18);
  color: var(--text-light);
}

.tools-parent-container .main-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(15px, 3vw, 30px);
  padding: clamp(15px, 3vw, 30px);
}

@media (min-width: 768px) {
  .tools-parent-container .main-content {
    grid-template-columns: 1fr 1fr;
  }
}

.tools-parent-container .input-section,
.tools-parent-container .result-section {
  background: var(--primary-bg);
  padding: clamp(15px, 2.5vw, 25px);
  border-radius: clamp(10px, 1.5vw, 20px);
  border: 2px solid var(--secondary-bg);
}

.tools-parent-container .section-title {
  font-size: var(--fs-20-42);
  margin-bottom: clamp(15px, 2vw, 20px);
  color: var(--text-dark);
  font-weight: 600;
  padding-bottom: clamp(8px, 1vw, 12px);
  border-bottom: 3px solid var(--secondary-bg);
}

.tools-parent-container .form-group {
  margin-bottom: clamp(12px, 2vw, 18px);
}

.tools-parent-container label {
  display: block;
  font-size: var(--fs-12-18);
  font-weight: 600;
  margin-bottom: clamp(5px, 0.8vw, 8px);
  color: var(--text-dark);
}

.tools-parent-container .label-info {
  font-size: var(--fs-10-16);
  color: var(--text-light);
  font-weight: 400;
  margin-top: clamp(3px, 0.5vw, 5px);
}

.tools-parent-container .input-wrapper {
  display: flex;
  gap: clamp(8px, 1.5vw, 12px);
  flex-wrap: wrap;
}

.tools-parent-container input[type="number"],
.tools-parent-container select {
  flex: 1;
  min-width: 250px;
  padding: clamp(8px, 1.2vw, 12px);
  font-size: var(--fs-12-18);
  border: 2px solid var(--border-color);
  border-radius: clamp(6px, 1vw, 10px);
  background: white;
  transition: all 0.3s ease;
}

.tools-parent-container input[type="number"]:focus,
.tools-parent-container select:focus {
  outline: none;
  border-color: var(--secondary-bg);
  box-shadow: 0 0 0 3px rgba(255, 198, 47, 0.2);
}

.tools-parent-container .radio-group {
  display: flex;
  gap: clamp(15px, 2.5vw, 25px);
  flex-wrap: wrap;
}

.tools-parent-container .radio-option {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 10px);
  cursor: pointer;
  padding: clamp(8px, 1.2vw, 12px);
  background: white;
  border: 2px solid var(--border-color);
  border-radius: clamp(6px, 1vw, 10px);
  transition: all 0.3s ease;
}

.tools-parent-container .radio-option:hover {
  border-color: var(--secondary-bg);
  background: #fffdf5;
}

.tools-parent-container .radio-option input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--secondary-bg);
}

.tools-parent-container .radio-option label {
  margin: 0;
  cursor: pointer;
  font-size: var(--fs-12-18);
}

.tools-parent-container .unit-toggle {
  display: flex;
  gap: clamp(6px, 1vw, 10px);
  margin-top: clamp(4px, 0.8vw, 8px);
}

.tools-parent-container .unit-btn {
  padding: clamp(4px, 0.8vw, 8px) clamp(10px, 1.5vw, 15px);
  font-size: var(--fs-10-16);
  border: 2px solid var(--secondary-bg);
  background: white;
  border-radius: clamp(5px, 0.8vw, 8px);
  cursor: pointer;
  transition: all 0.3s ease;
}

.tools-parent-container .unit-btn.active {
  background: var(--secondary-bg);
  color: var(--text-dark);
  font-weight: 600;
}

.tools-parent-container .button-group {
  display: flex;
  gap: clamp(10px, 2vw, 15px);
  margin-top: clamp(20px, 3vw, 25px);
  flex-wrap: wrap;
}

.tools-parent-container .btn {
  flex: 1;
  min-width: 120px;
  padding: clamp(10px, 1.5vw, 15px) clamp(15px, 2.5vw, 25px);
  font-size: var(--fs-12-18);
  font-weight: 600;
  border: none;
  border-radius: clamp(8px, 1.2vw, 12px);
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tools-parent-container .btn-calculate {
  background: linear-gradient(135deg, var(--secondary-bg) 0%, #ffb700 100%);
  color: var(--text-dark);
  box-shadow: 0 4px 15px rgba(255, 198, 47, 0.3);
}

.tools-parent-container .btn-calculate:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 198, 47, 0.4);
}

.tools-parent-container .btn-clear {
  background: white;
  color: var(--text-dark);
  border: 2px solid var(--border-color);
}

.tools-parent-container .btn-clear:hover {
  background: #f5f5f5;
  border-color: var(--text-light);
}

.tools-parent-container .btn-download {
  background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
  margin-top: clamp(15px, 2.5vw, 20px);
}

.tools-parent-container .btn-download:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

.tools-parent-container .result-section {
  display: none;
}

.tools-parent-container .result-section.active {
  display: block;
}

.tools-parent-container .result-header {
  text-align: center;
  padding: clamp(15px, 2.5vw, 25px);
  background: white;
  border-radius: clamp(10px, 1.5vw, 15px);
  margin-bottom: clamp(15px, 2.5vw, 20px);
  border: 2px solid var(--secondary-bg);
}

.tools-parent-container .body-fat-value {
  font-size: var(--fs-26-60);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: clamp(10px, 1.5vw, 15px);
}

.tools-parent-container .scale-container {
  margin: clamp(20px, 3vw, 30px) 0;
  padding: clamp(15px, 2.5vw, 25px);
  background: white;
  border-radius: clamp(10px, 1.5vw, 15px);
  border: 2px solid var(--secondary-bg);
  display: none
}

.tools-parent-container .scale-markers {
  display: flex;
  display: none;
  justify-content: space-between;
  margin-bottom: clamp(8px, 1.2vw, 12px);
  padding: 0 2px;
}

.tools-parent-container .scale-marker {
  font-size: var(--fs-10-16);
  font-weight: 600;
  color: var(--text-dark);
  background: var(--secondary-bg);
  padding: clamp(2px, 0.4vw, 4px) clamp(6px, 1vw, 10px);
  border-radius: clamp(4px, 0.6vw, 6px);
  white-space: nowrap;
}

.tools-parent-container .scale {
  height: clamp(30px, 4vw, 40px);
  display: flex;
  border-radius: clamp(15px, 2vw, 20px);
  overflow: hidden;
  margin-bottom: clamp(25px, 3.5vw, 35px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.tools-parent-container .scale-segment {
  transition: all 0.3s ease;
  position: relative;
}

.tools-parent-container .scale-segment:hover {
  transform: scaleY(1.1);
}

.tools-parent-container .essential-fat {
  background: #00bcd4;
}

.tools-parent-container .athletes {
  background: #4caf50;
}

.tools-parent-container .fitness {
  background: #8bc34a;
}

.tools-parent-container .average {
  background: #ffc107;
}

.tools-parent-container .obese {
  background: #ff5722;
}

.tools-parent-container .scale-labels {
  display: flex;
  justify-content: space-between;
  margin-top: clamp(8px, 1.2vw, 12px);
  gap: clamp(3px, 0.5vw, 5px);
}

.tools-parent-container .scale-label {
  font-size: var(--fs-10-16);
  text-align: center;
  font-weight: 600;
  flex: 1;
}

.tools-parent-container .pointer {
  position: relative;
  height: clamp(40px, 5vw, 50px);
  margin-bottom: clamp(10px, 1.5vw, 15px);
}

.tools-parent-container .pointer-arrow {
  position: absolute;
  top: 44px;
  width: 0;
  height: 0;
  border-left: clamp(8px, 1.2vw, 12px) solid transparent;
  border-right: clamp(8px, 1.2vw, 12px) solid transparent;
  border-top: clamp(15px, 2vw, 20px) solid var(--text-dark);
  transform: translateX(-50%);
  transition: left 0.5s ease;
}

.tools-parent-container .pointer-value {
  position: absolute;
  transform: translateX(-50%);
  top: 6px;
  font-weight: 700;
  font-size: var(--fs-12-18);
  background: var(--secondary-bg);
  padding: clamp(3px, 0.6vw, 6px) clamp(8px, 1.2vw, 12px);
  border-radius: clamp(5px, 0.8vw, 8px);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tools-parent-container .results-table {
  width: 100%;
  background: white;
  border-radius: clamp(10px, 1.5vw, 15px);
  overflow: hidden;
  border: 2px solid var(--secondary-bg);
}

.tools-parent-container .results-table table {
  width: 100%;
  border-collapse: collapse;
}

.tools-parent-container .results-table tr {
  border-bottom: 1px solid var(--border-color);
}

.tools-parent-container .results-table tr:last-child {
  border-bottom: none;
}

.tools-parent-container .results-table td {
  padding: clamp(10px, 1.5vw, 15px);
  font-size: var(--fs-12-18);
}

.tools-parent-container .results-table td:first-child {
  font-weight: 600;
  color: var(--text-dark);
  width: 60%;
}

.tools-parent-container .results-table td:last-child {
  text-align: right;
  font-weight: 700;
  color: var(--secondary-bg);
  background: #fffdf5;
}

.tools-parent-container .reference-section {
  margin-top: clamp(20px, 3vw, 30px);
  padding: clamp(15px, 2.5vw, 25px);
  background: var(--primary-bg);
  border-radius: clamp(10px, 1.5vw, 20px);
  border: 2px solid var(--secondary-bg);
}

.tools-parent-container .reference-title {
  font-size: var(--fs-20-42);
  margin-bottom: clamp(15px, 2vw, 20px);
  color: var(--text-dark);
  font-weight: 600;
}

.tools-parent-container .reference-table {
  background: white;
  border-radius: clamp(8px, 1.2vw, 12px);
  overflow-x: auto;
  margin-bottom: clamp(15px, 2.5vw, 20px);
  border: 2px solid var(--secondary-bg);
}

.tools-parent-container .reference-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 300px;
}

.tools-parent-container .reference-table th,
.tools-parent-container .reference-table td {
  padding: clamp(8px, 1.2vw, 12px);
  text-align: left;
  font-size: var(--fs-12-16);
  border-bottom: 1px solid var(--border-color);
}

.tools-parent-container .reference-table th {
  background: var(--secondary-bg);
  font-weight: 700;
  color: var(--text-dark);
}

.tools-parent-container .reference-table tr:last-child td {
  border-bottom: none;
}

.tools-parent-container .reference-table tbody tr:hover {
  background: #fffdf5;
}

.tools-parent-container .toast {
  position: fixed;
  bottom: clamp(15px, 2.5vw, 25px);
  right: clamp(15px, 2.5vw, 25px);
  background: var(--text-dark);
  color: white;
  padding: clamp(12px, 1.8vw, 18px) clamp(20px, 3vw, 25px);
  border-radius: clamp(8px, 1.2vw, 12px);
  font-size: var(--fs-12-18);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  animation:
    slideIn 0.3s ease,
    slideOut 0.3s ease 2.7s;
  max-width: 90%;
}

.tools-parent-container .toast.error {
  background: var(--error-color);
}

.tools-parent-container .toast.success {
  background: var(--success-color);
}

@keyframes slideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(400px);
    opacity: 0;
  }
}

@media (max-width: 767px) {
  .tools-parent-container .main-content {
    grid-template-columns: 1fr;
  }

  .tools-parent-container .input-wrapper {
    flex-direction: column;
  }

  .tools-parent-container input[type="number"] {
    min-width: 100%;
  }

  .tools-parent-container .button-group {
    flex-direction: column;
  }

  .tools-parent-container .btn {
    min-width: 100%;
  }

  .tools-parent-container .scale-labels {
    font-size: var(--fs-10-16);
  }

  .tools-parent-container .results-table td {
    font-size: var(--fs-10-16);
  }

  .tools-parent-container .results-table td:first-child {
    width: 55%;
  }

  .tools-parent-container .reference-table {
    font-size: var(--fs-10-16);
  }

  .tools-parent-container .scale-markers {
    flex-wrap: wrap;
    gap: clamp(3px, 0.5vw, 5px);
  }

  .tools-parent-container .scale-marker {
    font-size: 9px;
    padding: 2px 4px;
  }
}

@media (min-width: 1024px) {
  .tools-parent-container .container {
    margin-top: clamp(20px, 3vw, 30px);
    margin-bottom: clamp(20px, 3vw, 30px);
  }
}

.tools-parent-container .hidden {
  display: none;
}

.tools-parent-container {
  /* Smooth transitions */
}

.tools-parent-container * {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

.tools-parent-container {
  /* Custom scrollbar */
}

.tools-parent-container ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.tools-parent-container ::-webkit-scrollbar-track {
  background: var(--primary-bg);
}

.tools-parent-container ::-webkit-scrollbar-thumb {
  background: var(--secondary-bg);
  border-radius: 5px;
}

.tools-parent-container ::-webkit-scrollbar-thumb:hover {
  background: #ffb700;
}

.tools-parent-container .input-error {
  border-color: #f44336 !important;
  background-color: #ffebee !important;
}

.tools-parent-container .input-error:focus {
  border-color: #f44336 !important;
  box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.2) !important;
}

.tools-parent-container .field-error-message {
  color: #f44336;
  font-size: var(--fs-10-16);
  margin-top: clamp(4px, 0.6vw, 6px);
  font-weight: 600;
  display: flex;
  align-items: center;
  animation: slideDown 0.3s ease;
}

.tools-parent-container .field-error-message::before {
  content: "";
  margin-right: 4px;
  font-size: var(--fs-12-18);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 767px) {
  .tools-parent-container .field-error-message {
    font-size: 10px;
  }
}