/* Percentage Calculator specific styles */

/* Different gradient for this tool page */
body {
    background: linear-gradient(135deg, #d1fae5 0%, #ccfbf1 50%, #cffafe 100%); /* Light Emerald -> Light Teal -> Light Cyan */
}

/* Style the tool title with a different gradient */
.gradient-text-percent {
    background: linear-gradient(to right, #10b981, #14b8a6, #06b6d4); /* Emerald -> Teal -> Cyan */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 0.25rem;
}

/* Style for inline input fields */
.percent-input {
    font-size: 1.125rem; /* text-lg */
    font-weight: 500; /* medium */
    padding: 0.25rem 0.1rem; /* Minimal padding */
    background-color: transparent; /* No background */
    transition: border-color 0.2s ease-in-out;
}

/* Remove spinners from number inputs (optional) */
.percent-input::-webkit-outer-spin-button,
.percent-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.percent-input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}

/* Style for the calculation section block */
.calc-section {
    /* Add specific styles if needed beyond Tailwind */
}

/* Style for the result display area */
.result-area {
    border: 1px dashed #6ee7b7; /* Dashed Emerald border */
}