/* ==========================================================================
 Critical Styles - Above the fold content
 ========================================================================== */

/* Font preload optimizations - critical fonts only */
@font-face { font-family: Pretendard-Regular; src: local("Pretendard-Regular"),
 url("../../fonts/Pretendard-Regular.woff2") format("woff2"); font-display: swap; font-weight: 400; }

 @font-face { font-family: Pretendard-Medium; src: local("Pretendard-Medium"),
 url("../../fonts/Pretendard-Medium.woff2") format("woff2"); font-display: swap; font-weight: 500; }

 /* CSS Reset - Optimized for performance */
 html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ul, li, button, input, textarea { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; color: #101828; font-family: Pretendard-Regular; letter-spacing: 0; }

 html { scroll-behavior: auto !important; }

 * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

 body { margin: 0; min-height: 100vh; overflow: auto; scrollbar-gutter: stable; }

 /* Critical layout utilities */
 .flex { display: flex !important; }
 .flex-col { display: flex; flex-direction: column; }
 .justify-center { justify-content: center !important; }
 .align-center { align-items: center !important; }
 .text-center { text-align: center !important; }

 /* Critical typography */
 h1 { font-size: 48px; line-height: 62px; font-family: Pretendard-Medium; }
 h2 { font-size: 40px; line-height: 52px; font-family: Pretendard-Medium; }
 h3 { font-size: 32px; line-height: 42px; font-family: Pretendard-Medium; }

 /* Critical colors */
 .white { color: #ffffff !important; }
 .gray-800 { color: #101828 !important; }
 .primary-500 { color: #2B7FFF !important; }

 .bg-white { background-color: #ffffff !important; }
 .bg-primary-500 { background-color: #2B7FFF !important; }

 /* ==========================================================================
 Non-critical styles - Can be loaded later
 ========================================================================== */

 /* Additional font faces - Load later */
 @font-face { font-family: Pretendard-Light; src: local("Pretendard-Light"),
 url("../../fonts/Pretendard-Light.woff2") format("woff2"); font-display: swap; }
 @font-face { font-family: Pretendard-SemiBold; src: local("Pretendard-SemiBold"),
 url("../../fonts/Pretendard-SemiBold.woff2") format("woff2"); font-display: swap; }

 @font-face { font-family: Pretendard-Bold; src: local("Pretendard-Bold"),
 url("../../fonts/Pretendard-Bold.woff2") format("woff2"); font-display: swap; }

 @font-face { font-family: Roboto-Medium; src: local("Roboto-Medium"),
 url("../../fonts/Roboto-Medium.ttf") format("truetype"); font-display: swap; }

 /* Extended reset */
 ul { list-style-type: none; }
 header { scrollbar-gutter: stable; }
 img { display: inline-block; width: 100%; object-fit: cover; }
 a { text-decoration: none; cursor: pointer; transition: color 0.3s; }
 /* .none { border: none; } */
 pre { margin: unset; font-family: 'Pretendard-Regular'; }
 /* Form elements */
 input:focus { outline: none; }
 input { border: none; outline: none; width: 100%; padding: unset; }

 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; }
 input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset !important; }

 button { display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; outline: none; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid; border-radius: 8px; white-space: nowrap; box-sizing: border-box; 
opacity: 1;
  transition: opacity 0.3s ease;}
 button:hover {opacity: 0.8; }

 textarea { border: none; outline: none; width: 100%; padding: unset; box-sizing: border-box; resize: none; user-select: none; }

 /* Extended color system */
 .black { color: #000000 !important; }
 .gray-900 { color: #030712 !important; }
 .gray-700 { color: #1E2939 !important; }
 .gray-600 { color: #4A5565 !important; }
 .gray-500 { color: #6A7282 !important; }
 .gray-400 { color: #99A1AF !important; }
 .gray-300 { color: #D1D5DC !important; }
 .gray-200 { color: #E5E7EB !important; }
 .gray-100 { color: #F3F4F6 !important; }
 .gray-50 { color: #F9FAFB !important; }

 .primary-600 { color: #2772E5 !important; }
 .primary-400 { color: #408CFF !important; }

 .info-500 { color: #00A6F4 !important; }
 .info-50 { color: #80D3F9 !important; }
 .info-20 { color: #CCEDFD !important; }
 .info-10 { color: #F2FBFE !important; }

 .success-500 { color: #00BC7D !important; }
 .success-50 { color: #80DDBE !important; }
 .success-20 { color: #CCF2E5 !important; }
 .success-10 { color: #F2FCF8 !important; }

 .warning-500 { color: #FE9A00 !important; }
 .warning-50 { color: #FFCD80 !important; }
 .warning-20 { color: #FFEBCC !important; }
 .warning-10 { color: #FFFAF2 !important; }

 .error-500 { color: #FB2C36 !important; }
 .error-50 { color: #FD959A !important; }
 .error-20 { color: #FED5D7 !important; }
 .error-10 { color: #FFF4F5 !important; }

 .blue-500 { color: #74D4FF !important; }
 .green-500 { color: #00D492 !important; }
 .orange-500 { color: #FFB900 !important; }

 /* Background colors */
 .bg-black { background-color: #000000 !important; }
 .bg-gray-900 { background-color: #030712 !important; }
 .bg-gray-800 { background-color: #101828 !important; }
 .bg-gray-700 { background-color: #1E2939 !important; }
 .bg-gray-600 { background-color: #4A5565 !important; }
 .bg-gray-500 { background-color: #6A7282 !important; }
 .bg-gray-400 { background-color: #99A1AF !important; }
 .bg-gray-300 { background-color: #D1D5DC !important; }
 .bg-gray-200 { background-color: #E5E7EB !important; }
 .bg-gray-100 { background-color: #F3F4F6 !important; }
 .bg-gray-50 { background-color: #F9FAFB !important; }

 .bg-primary-600 { background-color: #2772E5 !important; }
 .bg-primary-400 { background-color: #408CFF !important; }

 .bg-info-500 { background-color: #00A6F4 !important; }
 .bg-info-50 { background-color: #80D3F9 !important; }
 .bg-info-20 { background-color: #CCEDFD !important; }
 .bg-info-10 { background-color: #F2FBFE !important; }

 .bg-success-500 { background-color: #00BC7D !important; }
 .bg-success-50 { background-color: #80DDBE !important; }
 .bg-success-20 { background-color: #CCF2E5 !important; }
 .bg-success-10 { background-color: #F2FCF8 !important; }

 .bg-warning-500 { background-color: #FE9A00 !important; }
 .bg-warning-50 { background-color: #FFCD80 !important; }
 .bg-warning-20 { background-color: #FFEBCC !important; }
 .bg-warning-10 { background-color: #FFFAF2 !important; }

 .bg-error-500 { background-color: #FB2C36 !important; }
 .bg-error-50 { background-color: #FD959A !important; }
 .bg-error-20 { background-color: #FED5D7 !important; }
 .bg-error-10 { background-color: #FFF4F5 !important; }

 .bg-blue-500 { background-color: #74D4FF !important; }
 .bg-green-500 { background-color: #00D492 !important; }
 .bg-orange-500 { background-color: #FFB900 !important; }

 /* Button styles */
 button.outline-primary { border-color: #2B7FFF !important; color: #2B7FFF; background-color: #fff; }

 button.primary { border-color: #2B7FFF !important; color: #fff; background-color: #2B7FFF; }

 button.gray { border-color: #4A5565 !important; background-color: #101828; color: #D1D5DC; }

 button.lightgray { border-color: #E5E7EB !important; color: #4A5565; }

 /* Button hover states */
 button.outline-primary:hover { border-color: #2B7FFF !important; color: #fff; background-color: #2B7FFF; }
 button.outline-primary:hover i { background-color: #fff !important; }

 button.primary:hover { border-color: #2B7FFF !important; color: #fff; background-color: #2772E5; }

 button.lightgray:hover { border-color: #2B7FFF !important; color: #2B7FFF !important; }
 button.lightgray:hover i { background-color: #2B7FFF !important; }

 /* Button active states */
 button.primary.active { border-color: #2B7FFF !important; color: #fff; background-color: #2772E5; }

 button.gray.active { border-color: #2B7FFF !important; background-color: #2B7FFF !important; color: #D1D5DC; }

 button.lightgray.active { border-color: #2B7FFF !important; color: #2B7FFF; }
 button.lightgray.active i { background-color: #2B7FFF !important; }

 /* Button sizes */
 button.xs { font-size: 12px; line-height: 18px; padding: 4px 6px; }
 button.sm { font-size: 12px; line-height: 24px; padding: 7px 8px; }
 button.md { font-size: 14px; line-height: 20px; padding: 9px 12px; }
 button.demo { font-size: 14px; line-height: 20px; padding: 12px 16px; }
 button.lg { font-size: 16px; line-height: 18px; padding: 12px 16px; }

 /* Typography system */
 .line-20px { line-height: 20px; }

 h4 { font-size: 28px; line-height: 38px; font-family: Pretendard-Medium; }
 h5 { font-size: 24px; line-height: 34px; font-family: Pretendard-Medium; }
 h6 { font-size: 20px; line-height: 28px; font-family: Pretendard-Medium; }

 p.title1 { font-size: 32px; line-height: 42px; font-family: Pretendard-Medium; }
 p.title2 { font-size: 28px; line-height: 38px; font-family: Pretendard-Medium; }
 p.title3 { font-size: 24px; line-height: 34px; font-family: Pretendard-Medium; }
 p.title4 { font-size: 20px; line-height: 28px; font-family: Pretendard-Medium; }
 p.title5 { font-size: 18px; line-height: 26px; font-family: Pretendard-Medium; }
 p.subtitle { font-size: 15px; line-height: 22px; font-family: Pretendard-Regular; }

 .text-20 { font-size: 20px; line-height: 28px; }
 .text-16 { font-size: 16px; line-height: 24px; }
 .text-15 { font-size: 15px; line-height: 22px; }
 .text-14 { font-size: 14px; line-height: 20px; }
 .text-13 { font-size: 13px; line-height: 19px; }
 .text-11 { font-size: 11px; line-height: 16px; }

 span.text-13 { font-size: 13px; line-height: 16px; }
 span.text-12 { font-size: 12px; line-height: 18px; }
 span.text-11 { font-size: 11px; line-height: 16px; }

 /* Font family utilities */
 .font-l { font-family: Pretendard-Light!important; }
 .font-r { font-family: Pretendard-Regular!important; }
 .font-m { font-family: Pretendard-Medium!important; }
 .font-sb { font-family: Pretendard-SemiBold!important; }
 .font-b { font-family: Pretendard-Bold!important; }

 /* Font size utilities */
 .font-10px { font-size: 10px !important; }
 .font-12px { font-size: 12px !important; }
 .font-14px { font-size: 14px !important; }
 .font-15px { font-size: 15px !important; }
 .font-16px { font-size: 16px !important; }
 .font-18px { font-size: 18px !important; }
 .font-20px { font-size: 20px !important; }
 .font-22px { font-size: 22px !important; }
 .font-24px { font-size: 24px !important; }
 .font-28px { font-size: 28px !important; }
 .font-32px { font-size: 32px !important; }

 /* Text alignment */
 .text-left { text-align: left !important; }
 .text-right { text-align: right !important; }

 /* Text properties */
 .white-space-nowrap { white-space: nowrap; }
 .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .underline { text-decoration: underline; }

 /* Flex layout system */
 .flex-row { display: flex; flex-direction: row; }
 .flex-reverse { display: flex; flex-direction: row-reverse; }
 .flex-wrap { flex-wrap: wrap; }
 .flex-grow { flex: 1 0 0; }

 /* Flex values */
 .flex-1 { flex: 1; }
 .flex-auto { flex: 0 0 auto; }
 .flex-10 { flex: 0 0 10%; }
 .flex-20 { flex: 0 0 20%; }
 .flex-30 { flex: 0 0 30%; }
 .flex-40 { flex: 0 0 40%; }
 .flex-50 { flex: 0 0 50%; }
 .flex-60 { flex: 0 0 60%; }
 .flex-70 { flex: 0 0 70%; }
 .flex-80 { flex: 0 0 80%; }

 /* Justify content */
 .justify-start { justify-content: flex-start !important; }
 .justify-end { justify-content: flex-end !important; }
 .justify-between { justify-content: space-between !important; }
 .justify-around { justify-content: space-around !important; }

 /* Align items */
 .align-start { align-items: flex-start !important; }
 .align-end { align-items: flex-end !important; }
 .align-self-start { align-self: flex-start !important; }
 .align-self-center { align-self: center !important; }
 .align-self-end { align-self: flex-end !important; }

 /* Gap utilities */
 .gap-unset { gap: unset !important; }
 .gap-2 { gap: 2px !important; }
 .gap-4 { gap: 4px !important; }
 .gap-6 { gap: 6px !important; }
 .gap-8 { gap: 8px !important; }
 .gap-10 { gap: 10px !important; }
 .gap-12 { gap: 12px !important; }
 .gap-16 { gap: 16px !important; }
 .gap-18 { gap: 18px !important; }
 .gap-20 { gap: 20px !important; }
 .gap-22 { gap: 22px !important; }
 .gap-24 { gap: 24px !important; }
 .gap-32 { gap: 32px !important; }
 .gap-36 { gap: 36px !important; }
 .gap-40 { gap: 40px !important; }
 .gap-48 { gap: 48px !important; }
 .gap-60 { gap: 60px !important; }
 .gap-64 { gap: 64px !important; }
 .gap-80 { gap: 80px !important; }

 /* Spacing system - Margin */
 .m-auto { margin: auto !important; }
 .m-unset { margin: unset !important; }
 .m-25px { margin: 25px; }
 .m-4 { margin: 4rem !important; }
 .m-6 { margin: 6rem !important; }

 /* Margin top */
 .mt-4px { margin-top: 4px !important; }
 .mt-5px { margin-top: 5px !important; }
 .mt-12px { margin-top: 12px !important; }
 .mt-16px { margin-top: 16px !important; }
 .mt-20px { margin-top: 20px !important; }
 .mt-34px { margin-top: 34px !important; }
 .mt-40px { margin-top: 40px !important; }
 .mt-1\/4 { margin-top: 0.25rem !important; }
 .mt-1\/2 { margin-top: 0.5rem !important; }
 .mt-1 { margin-top: 1rem !important; }
 .mt-2 { margin-top: 2rem !important; }
 .mt-3 { margin-top: 3rem !important; }
 .mt-4 { margin-top: 4rem !important; }
 .mt-5 { margin-top: 5rem !important; }
 .mt-5\/2 { margin-top: 2.5rem !important; }
 .mt-6 { margin-top: 6rem !important; }
 .mt-8 { margin-top: 8rem !important; }
 .mt-10 { margin-top: 10rem !important; }
 .mt-12 { margin-top: 12rem !important; }
 .mt-16 { margin-top: 16rem !important; }
 .mt-20 { margin-top: 20rem !important; }
 .mt-24 { margin-top: 24rem !important; }
 .mt-32 { margin-top: 32rem !important; }

 /* Margin bottom */
 .mb-2px { margin-bottom: 2px !important; }
 .mb-12px { margin-bottom: 12px !important; }
 .mb-20px { margin-bottom: 20px !important; }
 .mb-24px { margin-bottom: 24px !important; }
 .mb-34px { margin-bottom: 34px !important; }
 .mb-40px { margin-bottom: 40px !important; }
 .mb-60px { margin-bottom: 60px !important; }
 .mb-1\/4 { margin-bottom: 0.25rem !important; }
 .mb-1\/2 { margin-bottom: 0.5rem !important; }
 .mb-1 { margin-bottom: 1rem !important; }
 .mb-2 { margin-bottom: 2rem !important; }
 .mb-3 { margin-bottom: 3rem !important; }
 .mb-4 { margin-bottom: 4rem !important; }
 .mb-5 { margin-bottom: 5rem !important; }
 .mb-8 { margin-bottom: 8rem !important; }
 .mb-10 { margin-bottom: 10rem !important; }
 .mb-16 { margin-bottom: 16rem !important; }
 .mb-20 { margin-bottom: 20rem !important; }
 .mb-24 { margin-bottom: 24rem !important; }
 .mb-32 { margin-bottom: 32rem !important; }

 /* Margin left/right */
 .ml-1px { margin-left: 1px !important; }
 .ml-2px { margin-left: 2px !important; }
 .ml-5px { margin-left: 5px !important; }
 .ml-15px { margin-left: 15px !important; }
 .ml-25px { margin-left: 25px !important; }
 .ml-30px { margin-left: 30px !important; }
 .ml-1\/2 { margin-left: 0.5rem !important; }
 .ml-1 { margin-left: 1rem !important; }
 .ml-7 { margin-left: 7rem !important; }

 .mr-1px { margin-right: 1px !important; }
 .mr-5px { margin-right: 5px !important; }
 .mr-6px { margin-right: 6px !important; }
 .mr-1\/4 { margin-right: 0.25rem !important; }
 .mr-15px { margin-right: 15px !important; }
 .mr-1\/2 { margin-right: 0.5rem !important; }
 .mr-1 { margin-right: 1rem !important; }
 .mr-14 { margin-right: 1.4rem !important; }
 .mr-27 { margin-right: 1.7rem !important; }

 /* Margin axis */
 .mx-1\/4 { margin-left: 0.25rem; margin-right: 0.25rem; }
 .mx-1 { margin-left: 1rem; margin-right: 1rem; }
 .mx-4 { margin-left: 4rem; margin-right: 4rem; }

 .my-1 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
 .my-3\/2 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
 .my-2 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
 .my-3 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
 .my-4 { margin-top: 4rem !important; margin-bottom: 4rem !important; }
 .my-6 { margin-top: 6rem !important; margin-bottom: 6rem !important; }
 .my-16 { margin-top: 16rem !important; margin-bottom: 16rem !important; }
 .my-24 { margin-top: 24rem !important; margin-bottom: 24rem !important; }
 .my-20px { margin-top: 20px !important; margin-bottom: 20px !important; }

 /* Padding */
 .p-unset { padding: unset !important; }
 .p-1\/2 { padding: 0.5rem !important; }
 .p-1 { padding: 1rem !important; }
 .p-2 { padding: 2rem !important; }
 .p-4 { padding: 4rem !important; }
 .p-16 { padding: 16rem !important; }
 .p-2px { padding: 2px !important; }
 .p-3px { padding: 3px !important; }

 /* Padding top/bottom */
 .pt-2 { padding-top: 2rem !important; }
 .pt-3px { padding-top: 3px !important; }
 .pt-4px { padding-top: 4px !important; }
 .pt-40px { padding-top: 2.5rem !important; }
 .pt-5 { padding-top: 5rem !important; }
 .pt-8 { padding-top: 8rem !important; }
 .pt-10 { padding-top: 10rem !important; }

 .pb-5 { padding-bottom: 5rem !important; }
 .pb-2 { padding-bottom: 2rem !important; }
 .pb-60px { padding-bottom: 60px !important; }

 /* Padding left/right */
 .pl-1\/2 { padding-left: 0.5rem !important; }
 .pl-1 { padding-left: 1rem !important; }
 .pl-2 { padding-left: 2rem !important; }
 .pl-40px { padding-left: 40px !important; }
 .pl-3 { padding-left: 3rem !important; }
 .pl-3\/2 { padding-left: 1.5rem !important; }

 .pr-0 { padding-right: 0 !important; }
 .pr-1 { padding-right: 1rem; }
 .pr-3\/2 { padding-right: 1.5rem !important; }

 /* Padding axis */
 .px-0 { padding-left: 0 !important; padding-right: 0 !important; }
 .px-11px { padding-left: 11px !important; padding-right: 11px !important; }
 .px-13px { padding-left: 13px !important; padding-right: 13px !important; }
 .px-20px { padding-left: 20px !important; padding-right: 20px !important; }
 .px-33px { padding-left: 33px !important; padding-right: 33px !important; }
 .px-40px { padding-left: 40px !important; padding-right: 40px !important; }
 .px-1 { padding-left: 1rem !important; padding-right: 1rem !important; }
 .px-2 { padding-left: 2rem !important; padding-right: 2rem !important; }
 .px-3\/2 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
 .px-4 { padding-left: 4rem !important; padding-right: 4rem !important; }
 .px-8 { padding-left: 8rem !important; padding-right: 8rem !important; }
 .px-16 { padding-left: 16rem !important; padding-right: 16rem !important; }
 .px-20 { padding-left: 20rem !important; padding-right: 20rem !important; }

 .py-1\/4 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
 .py-7px { padding-top: 7px !important; padding-bottom: 7px !important; }
 .py-1\/2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
 .py-12px { padding-top: 12px !important; padding-bottom: 12px !important; }
 .py-20px { padding-top: 20px !important; padding-bottom: 20px !important; }
 .py-3\/2 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
 .py-1 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
 .py-5\/4 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
 .py-2 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
 .py-3 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
 .py-4 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
 .py-5 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
 .py-8 { padding-top: 8rem !important; padding-bottom: 8rem !important; }
 .py-10 { padding-top: 10rem !important; padding-bottom: 10rem !important; }
 .py-16 { padding-top: 16rem !important; padding-bottom: 16rem !important; }
 .py-23 { padding-top: 23rem !important; padding-bottom: 23rem !important; }

 /* Size system - Width */
 .w-auto { width: auto !important; }
 .w-full { width: 100% !important; }
 .w-1rem { width: 1rem !important; }
 .w-4rem { width: 4rem !important; }
 .w-5 { width: 5% !important; }
 .w-7 { width: 7% !important; }
 .w-10 { width: 10% !important; }
 .w-13 { width: 13% !important; }
 .w-15 { width: 15% !important; }
 .w-20 { width: 20% !important; }
 .w-30 { width: 30% !important; }
 .w-35 { width: 35% !important; }
 .w-40 { width: 40% !important; }
 .w-60 { width: 60% !important; }
 .w-70 { width: 70% !important; }
 .w-80 { width: 80% !important; }
 .w-90 { width: 90% !important; }
 .w-1\/5 { width: 20% !important; }
 .w-1\/4 { width: 25% !important; }
 .w-1\/3 { width: 33.33% !important; }
 .w-1\/2 { width: 50% !important; }
 .w-2\/3 { width: 66.66% !important; }
 .w-69px { width: 69px !important; }
 .w-50px { width: 50px !important; }
 .w-88px { width: 88px !important; }
 .w-100px { width: 100px !important; }
 .w-120px { width: 120px !important; }
 .w-140px { width: 140px !important; }
 .w-160px { width: 160px !important; }
 .w-180px { width: 180px !important; }

 /* Height */
 .h-full { height: 100% !important; }
 .h-1rem { height: 1rem !important; }
 .h-4rem { height: 4rem !important; }
 .h-30px { height: 30px; }
 .h-36px { height: 36px !important; }
 .h-44px { height: 44px !important; }
 .h-48px { height: 48px !important; }
 .min-h-100vh { min-height: 100vh !important; }
 .min-w-0 { min-width: 0 !important; }

 /* Max width */
 .max-w-32px { max-width: 32px !important; }
 .max-w-35 { max-width: 35% !important; }
 .max-w-80 { max-width: 80%; }
 .max-w-90 { max-width: 90%; }
 .max-w-150px { max-width: 150px !important; }
 .max-w-200px { max-width: 200px !important; }
 .max-w-250px { max-width: 250px !important; }
 .max-w-300px { max-width: 300px !important; }
 .max-w-400px { max-width: 400px !important; }
 .max-w-500px { max-width: 500px !important; }
 .max-w-600px { max-width: 600px !important; }
 .max-w-1200px { max-width: 1200px !important; }

 /* Position & Layout */
 .relative { position: relative !important; }
 .absolute { position: absolute !important; }
 .fixed { position: fixed !important; }
 .left-0 { left: 0; }
 .top-0 { top: 0; }
 .right-1 { right: 1rem; }
 .right-20px { right: 20px; }
 .top-20px { top: 20px; }
 .right-2 { right: 2rem; }
 .right-5\/2 { right: 2.5rem; }

 /* Display */
 .hidden { display: none !important; }
 .active.flex { display: flex !important; }

 /* Float */
 .float-right { float: right; }
 .float-end { float: inline-end; }

 /* Vertical alignment */
 .vertical-top { vertical-align: top; }
 .vertical-middle { vertical-align: middle; }

 /* Z-index */
 .z-10 { z-index: 10; }
 .z-11 { z-index: 11; }

 /* Border utilities */
 .border-unset { border: unset !important; }
 .border-1 { border: 1px solid; }
 .border-gray { border-color: #DADADA; }
 .border-darkgray { border-color: #1E2939; }
 .border-radius-8px { border-radius: 8px; }
 .border-radius-10px { border-radius: 10px; }
 .border-radius-12px { border-radius: 12px; }
 .border-radius-24px { border-radius: 24px; }
 .border-radius-50 { border-radius: 50%; }
 .border-collapse { border-collapse: collapse !important; }

 /* Miscellaneous utilities */
 .overflow-hidden { overflow: hidden; }
 .list-style-none { list-style-type: none; }
 .pointer { cursor: pointer !important; }