/*
 * Tailwind CSS Width and Height Utilities
 * 从 Tailwind CSS 框架中提取的 width 和 height 原子类样式
 */

/* Width Utilities */
.w-0 { width: 0px; }
.w-1 { width: 0.25rem; } /* 4px */
.w-2 { width: 0.5rem; } /* 8px */
.w-3 { width: 0.75rem; } /* 12px */
.w-4 { width: 1rem; } /* 16px */
.w-5 { width: 1.25rem; } /* 20px */
.w-6 { width: 1.5rem; } /* 24px */
.w-7 { width: 1.75rem; } /* 28px */
.w-8 { width: 2rem; } /* 32px */
.w-9 { width: 2.25rem; } /* 36px */
.w-10 { width: 2.5rem; } /* 40px */
.w-11 { width: 2.75rem; } /* 44px */
.w-12 { width: 3rem; } /* 48px */
.w-14 { width: 3.5rem; } /* 56px */
.w-16 { width: 4rem; } /* 64px */
.w-20 { width: 5rem; } /* 80px */
.w-24 { width: 6rem; } /* 96px */
.w-28 { width: 7rem; } /* 112px */
.w-32 { width: 8rem; } /* 128px */
.w-36 { width: 9rem; } /* 144px */
.w-40 { width: 10rem; } /* 160px */
.w-44 { width: 11rem; } /* 176px */
.w-48 { width: 12rem; } /* 192px */
.w-52 { width: 13rem; } /* 208px */
.w-56 { width: 14rem; } /* 224px */
.w-60 { width: 15rem; } /* 240px */
.w-64 { width: 16rem; } /* 256px */
.w-72 { width: 18rem; } /* 288px */
.w-80 { width: 20rem; } /* 320px */
.w-96 { width: 24rem; } /* 384px */

.w-auto { width: auto; }
.w-px { width: 1px; }
.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-min { width: min-content; }
.w-max { width: max-content; }

/* Fractional Widths */
.w-1\/2 { width: 50%; }
.w-1\/3 { width: 33.333333%; }
.w-2\/3 { width: 66.666667%; }
.w-1\/4 { width: 25%; }
.w-2\/4 { width: 50%; }
.w-3\/4 { width: 75%; }
.w-1\/5 { width: 20%; }
.w-2\/5 { width: 40%; }
.w-3\/5 { width: 60%; }
.w-4\/5 { width: 80%; }
.w-1\/6 { width: 16.666667%; }
.w-2\/6 { width: 33.333333%; }
.w-3\/6 { width: 50%; }
.w-4\/6 { width: 66.666667%; }
.w-5\/6 { width: 83.333333%; }
.w-1\/12 { width: 8.333333%; }
.w-2\/12 { width: 16.666667%; }
.w-3\/12 { width: 25%; }
.w-4\/12 { width: 33.333333%; }
.w-5\/12 { width: 41.666667%; }
.w-6\/12 { width: 50%; }
.w-7\/12 { width: 58.333333%; }
.w-8\/12 { width: 66.666667%; }
.w-9\/12 { width: 75%; }
.w-10\/12 { width: 83.333333%; }
.w-11\/12 { width: 91.666667%; }

/* Min Width Utilities */
.min-w-0 { min-width: 0px; }
.min-w-full { min-width: 100%; }
.min-w-min { min-width: min-content; }
.min-w-max { min-width: max-content; }

/* Max Width Utilities */
.max-w-0 { max-width: 0rem; }
.max-w-none { max-width: none; }
.max-w-xs { max-width: 20rem; } /* 320px */
.max-w-sm { max-width: 24rem; } /* 384px */
.max-w-md { max-width: 28rem; } /* 448px */
.max-w-lg { max-width: 32rem; } /* 512px */
.max-w-xl { max-width: 36rem; } /* 576px */
.max-w-2xl { max-width: 42rem; } /* 672px */
.max-w-3xl { max-width: 48rem; } /* 768px */
.max-w-4xl { max-width: 56rem; } /* 896px */
.max-w-5xl { max-width: 64rem; } /* 1024px */
.max-w-6xl { max-width: 72rem; } /* 1152px */
.max-w-7xl { max-width: 80rem; } /* 1280px */
.max-w-full { max-width: 100%; }
.max-w-min { max-width: min-content; }
.max-w-max { max-width: max-content; }
.max-w-fit { max-width: fit-content; }
.max-w-prose { max-width: 65ch; }
.max-w-screen-sm { max-width: 640px; }
.max-w-screen-md { max-width: 768px; }
.max-w-screen-lg { max-width: 1024px; }
.max-w-screen-xl { max-width: 1280px; }
.max-w-screen-2xl { max-width: 1536px; }

/* Height Utilities */
.h-0 { height: 0px; }
.h-1 { height: 0.25rem; } /* 4px */
.h-2 { height: 0.5rem; } /* 8px */
.h-3 { height: 0.75rem; } /* 12px */
.h-4 { height: 1rem; } /* 16px */
.h-5 { height: 1.25rem; } /* 20px */
.h-6 { height: 1.5rem; } /* 24px */
.h-7 { height: 1.75rem; } /* 28px */
.h-8 { height: 2rem; } /* 32px */
.h-9 { height: 2.25rem; } /* 36px */
.h-10 { height: 2.5rem; } /* 40px */
.h-11 { height: 2.75rem; } /* 44px */
.h-12 { height: 3rem; } /* 48px */
.h-14 { height: 3.5rem; } /* 56px */
.h-16 { height: 4rem; } /* 64px */
.h-20 { height: 5rem; } /* 80px */
.h-24 { height: 6rem; } /* 96px */
.h-28 { height: 7rem; } /* 112px */
.h-32 { height: 8rem; } /* 128px */
.h-36 { height: 9rem; } /* 144px */
.h-40 { height: 10rem; } /* 160px */
.h-44 { height: 11rem; } /* 176px */
.h-48 { height: 12rem; } /* 192px */
.h-52 { height: 13rem; } /* 208px */
.h-56 { height: 14rem; } /* 224px */
.h-60 { height: 15rem; } /* 240px */
.h-64 { height: 16rem; } /* 256px */
.h-72 { height: 18rem; } /* 288px */
.h-80 { height: 20rem; } /* 320px */
.h-96 { height: 24rem; } /* 384px */

.h-auto { height: auto; }
.h-px { height: 1px; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-min { height: min-content; }
.h-max { height: max-content; }

/* Fractional Heights */
.h-1\/2 { height: 50%; }
.h-1\/3 { height: 33.333333%; }
.h-2\/3 { height: 66.666667%; }
.h-1\/4 { height: 25%; }
.h-2\/4 { height: 50%; }
.h-3\/4 { height: 75%; }
.h-1\/5 { height: 20%; }
.h-2\/5 { height: 40%; }
.h-3\/5 { height: 60%; }
.h-4\/5 { height: 80%; }
.h-1\/6 { height: 16.666667%; }
.h-2\/6 { height: 33.333333%; }
.h-3\/6 { height: 50%; }
.h-4\/6 { height: 66.666667%; }
.h-5\/6 { height: 83.333333%; }

/* Min Height Utilities */
.min-h-0 { min-height: 0px; }
.min-h-full { min-height: 100%; }
.min-h-screen { min-height: 100vh; }

/* Max Height Utilities */
.max-h-0 { max-height: 0px; }
.max-h-1 { max-height: 0.25rem; } /* 4px */
.max-h-2 { max-height: 0.5rem; } /* 8px */
.max-h-3 { max-height: 0.75rem; } /* 12px */
.max-h-4 { max-height: 1rem; } /* 16px */
.max-h-5 { max-height: 1.25rem; } /* 20px */
.max-h-6 { max-height: 1.5rem; } /* 24px */
.max-h-7 { max-height: 1.75rem; } /* 28px */
.max-h-8 { max-height: 2rem; } /* 32px */
.max-h-9 { max-height: 2.25rem; } /* 36px */
.max-h-10 { max-height: 2.5rem; } /* 40px */
.max-h-11 { max-height: 2.75rem; } /* 44px */
.max-h-12 { max-height: 3rem; } /* 48px */
.max-h-14 { max-height: 3.5rem; } /* 56px */
.max-h-16 { max-height: 4rem; } /* 64px */
.max-h-20 { max-height: 5rem; } /* 80px */
.max-h-24 { max-height: 6rem; } /* 96px */
.max-h-28 { max-height: 7rem; } /* 112px */
.max-h-32 { max-height: 8rem; } /* 128px */
.max-h-36 { max-height: 9rem; } /* 144px */
.max-h-40 { max-height: 10rem; } /* 160px */
.max-h-44 { max-height: 11rem; } /* 176px */
.max-h-48 { max-height: 12rem; } /* 192px */
.max-h-52 { max-height: 13rem; } /* 208px */
.max-h-56 { max-height: 14rem; } /* 224px */
.max-h-60 { max-height: 15rem; } /* 240px */
.max-h-64 { max-height: 16rem; } /* 256px */
.max-h-72 { max-height: 18rem; } /* 288px */
.max-h-80 { max-height: 20rem; } /* 320px */
.max-h-96 { max-height: 24rem; } /* 384px */

.max-h-full { max-height: 100%; }
.max-h-screen { max-height: 100vh; }

/* Fit Content */
.h-fit { height: fit-content; }
.w-fit { width: fit-content; }

/*
 * Tailwind CSS Font Size Utilities
 * 从 Tailwind CSS 框架中提取的 font-size 原子类样式
 */

/* 基础字体大小 */
.text-xs { font-size: 0.75rem; line-height: 1rem; } /* 12px */
.text-sm { font-size: 0.875rem; line-height: 1.25rem; } /* 14px */
.text-base { font-size: 1rem; line-height: 1.5rem; } /* 16px */
.text-lg { font-size: 1.125rem; line-height: 1.75rem; } /* 18px */
.text-xl { font-size: 1.25rem; line-height: 1.75rem; } /* 20px */
.text-2xl { font-size: 1.5rem; line-height: 2rem; } /* 24px */
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; } /* 30px */
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; } /* 36px */
.text-5xl { font-size: 3rem; line-height: 1; } /* 48px */
.text-6xl { font-size: 3.75rem; line-height: 1; } /* 60px */
.text-7xl { font-size: 4.5rem; line-height: 1; } /* 72px */
.text-8xl { font-size: 6rem; line-height: 1; } /* 96px */
.text-9xl { font-size: 8rem; line-height: 1; } /* 128px */

/*
 * Tailwind CSS Font Weight Utilities
 * 从 Tailwind CSS 框架中提取的 font-weight 原子类样式
 */

/* 字体粗细 */
.font-thin { font-weight: 100; }
.font-extralight { font-weight: 200; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }

/*
 * Tailwind CSS Text Color Utilities
 * 从 Tailwind CSS 框架中提取的 text-color 原子类样式
 */

/* 灰色系 */
.text-gray-50 { color: #f9fafb; }
.text-gray-100 { color: #f3f4f6; }
.text-gray-200 { color: #e5e7eb; }
.text-gray-300 { color: #d1d5db; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1f2937; }
.text-gray-900 { color: #111827; }

/* 蓝色系 */
.text-blue-50 { color: #eff6ff; }
.text-blue-100 { color: #dbeafe; }
.text-blue-200 { color: #bfdbfe; }
.text-blue-300 { color: #93c5fd; }
.text-blue-400 { color: #60a5fa; }
.text-blue-500 { color: #3b82f6; }
.text-blue-600 { color: #2563eb; }
.text-blue-700 { color: #1d4ed8; }
.text-blue-800 { color: #1e40af; }
.text-blue-900 { color: #1e3a8a; }

/* 红色系 */
.text-red-50 { color: #fef2f2; }
.text-red-100 { color: #fee2e2; }
.text-red-200 { color: #fecaca; }
.text-red-300 { color: #fca5a5; }
.text-red-400 { color: #f87171; }
.text-red-500 { color: #ef4444; }
.text-red-600 { color: #dc2626; }
.text-red-700 { color: #b91c1c; }
.text-red-800 { color: #991b1b; }
.text-red-900 { color: #7f1d1d; }

/* 绿色系 */
.text-green-50 { color: #f0fdf4; }
.text-green-100 { color: #dcfce7; }
.text-green-200 { color: #bbf7d0; }
.text-green-300 { color: #86efac; }
.text-green-400 { color: #4ade80; }
.text-green-500 { color: #22c55e; }
.text-green-600 { color: #16a34a; }
.text-green-700 { color: #15803d; }
.text-green-800 { color: #166534; }
.text-green-900 { color: #14532d; }

/* 黄色系 */
.text-yellow-50 { color: #fefce8; }
.text-yellow-100 { color: #fef9c3; }
.text-yellow-200 { color: #fef08a; }
.text-yellow-300 { color: #fde047; }
.text-yellow-400 { color: #facc15; }
.text-yellow-500 { color: #eab308; }
.text-yellow-600 { color: #ca8a04; }
.text-yellow-700 { color: #a16207; }
.text-yellow-800 { color: #854d0e; }
.text-yellow-900 { color: #713f12; }

/* 紫色系 */
.text-purple-50 { color: #faf5ff; }
.text-purple-100 { color: #f3e8ff; }
.text-purple-200 { color: #e9d5ff; }
.text-purple-300 { color: #d8b4fe; }
.text-purple-400 { color: #c084fc; }
.text-purple-500 { color: #a855f7; }
.text-purple-600 { color: #9333ea; }
.text-purple-700 { color: #7e22ce; }
.text-purple-800 { color: #6b21a8; }
.text-purple-900 { color: #581c87; }

/* 白色和黑色 */
.text-white { color: #ffffff; }
.text-black { color: #000000; }

/*
 * Tailwind CSS Background Color Utilities
 * 从 Tailwind CSS 框架中提取的 background-color 原子类样式
 */

/* 灰色系 */
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-gray-200 { background-color: #e5e7eb; }
.bg-gray-300 { background-color: #d1d5db; }
.bg-gray-400 { background-color: #9ca3af; }
.bg-gray-500 { background-color: #6b7280; }
.bg-gray-600 { background-color: #4b5563; }
.bg-gray-700 { background-color: #374151; }
.bg-gray-800 { background-color: #1f2937; }
.bg-gray-900 { background-color: #111827; }

/* 蓝色系 */
.bg-blue-50 { background-color: #eff6ff; }
.bg-blue-100 { background-color: #dbeafe; }
.bg-blue-200 { background-color: #bfdbfe; }
.bg-blue-300 { background-color: #93c5fd; }
.bg-blue-400 { background-color: #60a5fa; }
.bg-blue-500 { background-color: #3b82f6; }
.bg-blue-600 { background-color: #2563eb; }
.bg-blue-700 { background-color: #1d4ed8; }
.bg-blue-800 { background-color: #1e40af; }
.bg-blue-900 { background-color: #1e3a8a; }

/* 红色系 */
.bg-red-50 { background-color: #fef2f2; }
.bg-red-100 { background-color: #fee2e2; }
.bg-red-200 { background-color: #fecaca; }
.bg-red-300 { background-color: #fca5a5; }
.bg-red-400 { background-color: #f87171; }
.bg-red-500 { background-color: #ef4444; }
.bg-red-600 { background-color: #dc2626; }
.bg-red-700 { background-color: #b91c1c; }
.bg-red-800 { background-color: #991b1b; }
.bg-red-900 { background-color: #7f1d1d; }

/* 绿色系 */
.bg-green-50 { background-color: #f0fdf4; }
.bg-green-100 { background-color: #dcfce7; }
.bg-green-200 { background-color: #bbf7d0; }
.bg-green-300 { background-color: #86efac; }
.bg-green-400 { background-color: #4ade80; }
.bg-green-500 { background-color: #22c55e; }
.bg-green-600 { background-color: #16a34a; }
.bg-green-700 { background-color: #15803d; }
.bg-green-800 { background-color: #166534; }
.bg-green-900 { background-color: #14532d; }

/* 黄色系 */
.bg-yellow-50 { background-color: #fefce8; }
.bg-yellow-100 { background-color: #fef9c3; }
.bg-yellow-200 { background-color: #fef08a; }
.bg-yellow-300 { background-color: #fde047; }
.bg-yellow-400 { background-color: #facc15; }
.bg-yellow-500 { background-color: #eab308; }
.bg-yellow-600 { background-color: #ca8a04; }
.bg-yellow-700 { background-color: #a16207; }
.bg-yellow-800 { background-color: #854d0e; }
.bg-yellow-900 { background-color: #713f12; }

/* 紫色系 */
.bg-purple-50 { background-color: #faf5ff; }
.bg-purple-100 { background-color: #f3e8ff; }
.bg-purple-200 { background-color: #e9d5ff; }
.bg-purple-300 { background-color: #d8b4fe; }
.bg-purple-400 { background-color: #c084fc; }
.bg-purple-500 { background-color: #a855f7; }
.bg-purple-600 { background-color: #9333ea; }
.bg-purple-700 { background-color: #7e22ce; }
.bg-purple-800 { background-color: #6b21a8; }
.bg-purple-900 { background-color: #581c87; }

/* 白色和黑色 */
.bg-white { background-color: #ffffff; }
.bg-black { background-color: #000000; }

/*
 * Tailwind CSS Flexbox Utilities
 * 从 Tailwind CSS 框架中提取的 flexbox 原子类样式
 */

/* Flex 容器 */
.flex { display: flex; }
.inline-flex { display: inline-flex; }

/* Flex 方向 */
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }

/* Flex 换行 */
.flex-wrap { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex-nowrap { flex-wrap: nowrap; }

/* Flex 增长和收缩 */
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }

/* Flex 增长 */
.flex-grow { flex-grow: 1; }
.flex-grow-0 { flex-grow: 0; }

/* Flex 收缩 */
.flex-shrink { flex-shrink: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* Justify Content */
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* Align Items */
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

/* Align Content */
.content-center { align-content: center; }
.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }
.content-evenly { align-content: space-evenly; }

/* Align Self */
.self-auto { align-self: auto; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-stretch { align-self: stretch; }
.self-baseline { align-self: baseline; }