.calculator-input {
    @apply px-3 py-2 bg-[#0E1117] border border-[#30363D] text-gray-100 rounded-md w-full;
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
    @apply transition-all duration-200;
}

.calculator-input:hover {
    @apply border-[#4B5563];
}

.result-box {
    @apply bg-[#161B22] p-4 rounded-md border border-[#30363D];
    @apply transition-all duration-200;
}

/* Error state for inputs */
.input-error {
    @apply border-red-500 bg-[#2D1A1A];
}

.input-error:focus {
    @apply ring-red-500 border-red-500;
}

/* Success state for results */
.result-success {
    @apply text-blue-400;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .calculator-input {
        @apply text-base;
    }
}