/* Preflight & Base */
*,
::after,
::before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    font-family: ui-sans-serif, system-ui, sans-serif
}

body {
    margin: 0;
    line-height: inherit
}

/* Utilities */
.bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity))
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}

.bg-blue-100 {
    background-color: rgb(219 234 254)
}

.bg-blue-600 {
    background-color: rgb(37 99 235)
}

.hover\:bg-blue-700:hover {
    background-color: rgb(29 78 216)
}

.flex {
    display: flex
}

.items-center {
    align-items: center
}

.justify-center {
    justify-content: center
}

.h-screen {
    height: 100vh
}

.w-full {
    width: 100%
}

.max-w-md {
    max-width: 28rem
}

.rounded-xl {
    border-radius: 0.75rem
}

.rounded-lg {
    border-radius: 0.5rem
}

.rounded-full {
    border-radius: 9999px
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    box-shadow: var(--tw-shadow)
}

.border {
    border-width: 1px
}

.border-gray-100 {
    border-color: rgb(243 244 246)
}

.border-gray-300 {
    border-color: rgb(209 213 219)
}

.p-8 {
    padding: 2rem
}

.p-3 {
    padding: 0.75rem
}

.mb-8 {
    margin-bottom: 2rem
}

.mb-4 {
    margin-bottom: 1rem
}

.mt-2 {
    margin-top: 0.5rem
}

.mt-6 {
    margin-top: 1.5rem
}

.space-y-6>:not([hidden])~:not([hidden]) {
    margin-top: 1.5rem
}

.text-center {
    text-align: center
}

.text-2xl {
    font-size: 1.5rem
}

.text-sm {
    font-size: 0.875rem
}

.font-bold {
    font-weight: 700
}

.font-semibold {
    font-weight: 600
}

.text-gray-800 {
    color: rgb(31 41 55)
}

.text-gray-700 {
    color: rgb(55 65 81)
}

.text-gray-500 {
    color: rgb(107 114 128)
}

.text-gray-400 {
    color: rgb(156 163 175)
}

.text-blue-600 {
    color: rgb(37 99 235)
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}

.outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px
}

.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(59 130 246)
}

/* Add these to ensure height and vertical alignment */
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.block {
    display: block;
}

.leading-tight {
    line-height: 1.25;
}

/* Force inputs to behave consistently */
input {
    font-size: 1rem;
    line-height: 1.5rem;
    height: 2.75rem;
    /* Explicit height for better consistency */
}

button {
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Prevents the button text from breaking into two lines */
.whitespace-nowrap {
    white-space: nowrap;
}

/* Ensures the icon doesn't get squashed when the text is long */
.flex-shrink-0 {
    flex-shrink: 0;
}

/* Specific override for the download button behavior */
.download-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: auto !important;
    /* Prevents stretching */
    min-height: 44px;
    /* Standard comfortable button height */
    width: auto;
    min-width: 180px;
    /* Keeps it from being a tiny square */
    line-height: 1;
    /* Centers text vertically inside the height */
    padding: 0 1.5rem;
    /* Consistent side padding */
}

/* Fix for large SVGs */
svg {
    display: block;
    max-width: 100%;
}

.w-12 {
    width: 3rem;
}

.h-12 {
    height: 3rem;
}

.w-6 {
    width: 1.5rem;
}

.h-6 {
    height: 1.5rem;
}

.bg-green-100 {
    background-color: #dcfce7;
}

.text-green-600 {
    color: #16a34a;
}

.rounded-full {
    border-radius: 9999px;
}

.text-center {
    text-align: center;
}