.container {
  max-width: 600px !important;
  margin: 0 auto !important;
}


/* Header */
.tool-header {
  text-align: center !important;
  background: linear-gradient(135deg, #9CA1E2 0%, #4b85e6 50%, #9CA1E2 100%) !important;
  color: #FFFFFF !important;
  padding: 31px !important;
  border-radius: 15px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 10px 30px rgba(30, 58, 138, 0.2) !important;
}

.tool-header h1 {
  font-size: 1.75em !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* Cards */
.card {
  background: #FFFFFF !important;
  border: 1px solid #6366f1 !important;
  border-radius: 16px !important;
  padding: 24px !important;
  margin: 24px 0 !important;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.08) !important;
}

.answer-card {
  border-radius: 12px !important;
  padding: 20px !important;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.06) !important;
}

.work-card {
  border-radius: 12px !important;
  padding: 20px !important;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.06) !important;
}

/* Section headings */
.section-heading {
  color: #6366F1 !important;
  font-size: 1.15em !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
}

/* Fraction input */
.fraction-input-group {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 8px !important;
}

.fraction-input-wrapper {
  display: flex !important;
  justify-content: center !important;
}

.fraction-visual {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 200px !important;
}

.fraction-input {
  width: 120px !important;
  text-align: center !important;
  font-size: 1.2em !important;
  font-weight: 600 !important;
  padding: 10px 12px !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  color: #1F2937 !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.fraction-input:focus {
  border-color: #4b85e6 !important;
  box-shadow: 0 0 0 3px rgba(75, 133, 230, 0.15) !important;
}

.fraction-bar {
  width: 160px !important;
  height: 2px !important;
  background: #1F2937 !important;
  margin: 8px 0 !important;
}

.input-labels {
  display: flex !important;
  justify-content: center !important;
  gap: 80px !important;
  margin-bottom: 20px !important;
}

.input-labels label {
  font-size: 0.8em !important;
  color: #64748B !important;
  font-weight: 500 !important;
}

/* Rounding dropdown */
.rounding-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 16px !important;
}

.field-label {
  font-size: 0.9em !important;
  font-weight: 600 !important;
  color: #1F2937 !important;
}

.select-field {
  padding: 10px 12px !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  color: #1F2937 !important;
  font-size: 0.95em !important;
  font-family: inherit !important;
  outline: none !important;
  cursor: pointer !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.select-field:focus {
  border-color: #4b85e6 !important;
  box-shadow: 0 0 0 3px rgba(75, 133, 230, 0.15) !important;
}

/* Validation message */
.validation-message {
  color: #DC2626 !important;
  font-size: 0.9em !important;
  min-height: 1.2em !important;
  margin-bottom: 12px !important;
  font-weight: 500 !important;
}

/* Buttons */
.button-group {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
}

.btn-clear {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #1F2937 !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-size: 0.95em !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  transition: background 0.2s, border-color 0.2s !important;
}

.btn-clear:hover {
  background: #F1F5F9 !important;
  border-color: #94A3B8 !important;
}

.btn-calculate {
  background: linear-gradient(135deg, #9CA1E2 0%, #4b85e6 50%, #9CA1E2 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-size: 0.95em !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  box-shadow: 0 4px 12px rgba(75, 133, 230, 0.2) !important;
}

.btn-calculate:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(75, 133, 230, 0.3) !important;
}

.btn-calculate:active {
  transform: translateY(0) !important;
}

/* Answer display */
.answer-display {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.answer-fraction {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  font-size: 1.3em !important;
  font-weight: 600 !important;
}

.frac-num {
  padding: 2px 8px !important;
}

.frac-line {
  display: block !important;
  width: 60px !important;
  height: 2px !important;
  background: #1F2937 !important;
  margin: 4px 0 !important;
}

.frac-den {
  padding: 2px 8px !important;
}

.answer-equals {
  font-size: 1.3em !important;
  font-weight: 600 !important;
  color: #1F2937 !important;
}

.answer-percent {
  font-size: 1.6em !important;
  font-weight: 700 !important;
  color: #6366F1 !important;
}

/* Work steps */
#work-steps {
  line-height: 1.8 !important;
}

.work-step {
  margin-bottom: 14px !important;
  font-size: 0.95em !important;
  color: #1F2937 !important;
}

.work-step-title {
  font-weight: 600 !important;
  color: #6366F1 !important;
  margin-bottom: 4px !important;
}

.work-step-content {
  padding-left: 12px !important;
}

.work-fraction {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  font-size: 0.9em !important;
  vertical-align: middle !important;
  margin: 0 2px !important;
}

.work-fraction .wf-num {
  padding: 0 6px !important;
}

.work-fraction .wf-bar {
  display: block !important;
  width: 40px !important;
  height: 1.5px !important;
  background: #1F2937 !important;
}

.work-fraction .wf-den {
  padding: 0 6px !important;
}

.work-note {
  font-style: italic !important;
  color: #64748B !important;
  font-size: 0.88em !important;
}

/* Responsive */
@media (max-width: 768px) {
	
		.container {
		padding: 0px !important ;
	}
  body {
    padding: 12px !important;
  }

  header {
    padding: 20px !important;
  }

  header h1 {
    font-size: 1.4em !important;
  }

  .card {
    padding: 18px !important;
    margin: 16px 0 !important;
  }

  .answer-card,
  .work-card {
    padding: 16px !important;
  }
}

@media (max-width: 480px) {
	
	.container {
		padding: 0px !important ;
	}
	
  body {
    padding: 8px !important;
  }

  header {
    padding: 16px !important;
  }

  header h1 {
    font-size: 1.2em !important;
  }

  .card {
    padding: 14px !important;
    margin: 12px 0 !important;
  }

  .answer-card,
  .work-card {
    padding: 14px !important;
  }

  .fraction-visual {
    width: 100% !important;
  }

  .fraction-input {
    width: 100% !important;
    max-width: 140px !important;
  }

  .fraction-bar {
    width: 140px !important;
  }

  .input-labels {
    gap: 40px !important;
  }

  .button-group {
    flex-direction: row !important;
  }

  .btn-clear,
  .btn-calculate {
    flex: 1 !important;
  }

  .answer-display {
    gap: 10px !important;
  }

  .answer-percent {
    font-size: 1.3em !important;
  }

  .answer-fraction {
    font-size: 1.1em !important;
  }
}