.container {
    @apply min-h-screen bg-gray-50;
}

.navbar {
    @apply bg-white border-b border-gray-200;
}

.navContent {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center;
}

.logoContainer {
    @apply flex items-center;
}

.logoIcon {
    @apply w-8 h-8 text-purple-600;
}

.logoText {
    @apply ml-2 text-xl font-bold text-black;
}

.main {
    @apply flex justify-center items-start py-12 px-4;
}

.formContainer {
    @apply max-w-md w-full bg-white rounded-lg shadow-sm;
}

/* Auth Toggle Styles */
.authToggle {
    @apply flex rounded-t-lg overflow-hidden;
}

.toggleButton {
    @apply flex-1 text-center py-4 px-6 text-gray-600 bg-gray-50
    transition-colors duration-200 hover:bg-gray-100;
}

.toggleButton.active {
    @apply bg-white text-purple-600 font-medium;
}

.title {
    @apply text-2xl font-bold text-gray-900 text-center mb-2 pt-6 px-8;
}

.subtitle {
    @apply text-gray-600 text-center mb-8 px-8;
}

.form {
    @apply space-y-6 p-8 pt-4;
}

.formGroup {
    @apply space-y-1;
}

.label {
    @apply block text-sm font-medium text-gray-700;
}

.inputWrapper {
    @apply relative rounded-lg shadow-sm;
}

.input {
    @apply block w-full pl-10 pr-10 py-2 border border-gray-300 rounded-lg
    focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent
    placeholder-gray-400 text-gray-900;
}

.inputIcon {
    @apply h-5 w-5 text-gray-400 absolute left-3 top-2.5;
}

.eyeButton {
    @apply absolute inset-y-0 right-0 pr-3 flex items-center;
}

.eyeIcon {
    @apply h-5 w-5 text-gray-400 hover:text-gray-500;
}

.error {
    @apply text-red-600 text-sm mt-1;
}

.submitButton {
    @apply w-full bg-purple-600 text-white py-2 px-4 rounded-lg font-medium
    hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2
    transition-colors duration-200;
}

/* Form Transition */
.form {
    @apply transition-all duration-300;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
    .formContainer {
        @apply mx-4;
    }

    .title {
        @apply text-xl;
    }

    .toggleButton {
        @apply py-3 px-4;
    }
}



.container {
    @apply min-h-screen bg-gray-50;
}

.navbar {
    @apply bg-white border-b border-gray-200;
}

.navContent {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center;
}

.logoContainer {
    @apply flex items-center;
}

.logoIcon {
    @apply w-8 h-8 text-purple-600;
}

.logoText {
    @apply ml-2 text-xl font-bold text-black;
}

.main {
    @apply flex justify-center items-start py-12 px-4;
}

.formContainer {
    @apply max-w-md w-full bg-white rounded-lg shadow-sm p-8;
}

.title {
    @apply text-2xl font-bold text-gray-900 text-center mb-2;
}

.subtitle {
    @apply text-gray-600 text-center mb-8;
}

.form {
    @apply space-y-6;
}

.formGroup {
    @apply space-y-1;
}

.label {
    @apply block text-sm font-medium text-gray-700;
}

.inputWrapper {
    @apply relative rounded-lg shadow-sm;
}

.input {
    @apply block w-full pl-10 pr-10 py-2 border border-gray-300 rounded-lg
    focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent
    placeholder-gray-400 text-gray-900;
}

.inputIcon {
    @apply h-5 w-5 text-gray-400 absolute left-3 top-2.5;
}

.eyeButton {
    @apply absolute inset-y-0 right-0 pr-3 flex items-center;
}

.eyeIcon {
    @apply h-5 w-5 text-gray-400 hover:text-gray-500;
}

.error {
    @apply text-red-600 text-sm mt-1;
}

.submitButton {
    @apply w-full bg-purple-600 text-white py-2 px-4 rounded-lg font-medium
    hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2
    transition-colors duration-200;
}

/* Input type number - remove arrows */
.input[type="number"]::-webkit-inner-spin-button,
.input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.input[type="number"] {
    -moz-appearance: textfield;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
    .formContainer {
        @apply p-6;
    }

    .title {
        @apply text-xl;
    }
}