/* #region 🛡️ 究極內網防禦版：預先編譯的 Tailwind CSS (平時請折疊此區塊) */
        /* --- 1. 核心 CSS Reset --- */
        *, ::before, ::after { 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: 'Nunito', 'Noto Sans TC', sans-serif; tab-size: 4; }
        body { margin: 0; line-height: inherit; background-color: #FFFBF0; }
        hr { height: 0; color: inherit; border-top-width: 1px; }
        h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; }
        a { color: inherit; text-decoration: inherit; }
        b, strong { font-weight: bolder; }
        p { margin: 0; }
        ul { list-style: none; margin: 0; padding: 0; }
        button { background-color: transparent; background-image: none; padding: 0; line-height: inherit; color: inherit; cursor: pointer; text-transform: none; -webkit-appearance: button; }
        img, svg { display: block; vertical-align: middle; max-width: 100%; height: auto; }
        input[type="checkbox"] { margin: 0; }

        /* --- 2. 排版與顯示 (Display & Layout) --- */
        .hidden { display: none !important; }
        .block { display: block; }
        .inline-block { display: inline-block; }
        .flex { display: flex; }
        .inline-flex { display: inline-flex; }
        .grid { display: grid; }
        .absolute { position: absolute; }
        .relative { position: relative; }
        .fixed { position: fixed; }
        .sticky { position: sticky; }
        .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
        .top-0 { top: 0px; }
        .top-4 { top: 1rem; }
        .-top-1 { top: -0.25rem; }
        .-top-2 { top: -0.5rem; }
        .-top-3 { top: -0.75rem; }
        .right-4 { right: 1rem; }
        .-right-1 { right: -0.25rem; }
        .-right-2 { right: -0.5rem; }
        .-right-3 { right: -0.75rem; }
        .z-10 { z-index: 10; }
        .z-20 { z-index: 20; }
        .z-30 { z-index: 30; }
        .z-40 { z-index: 40; }

        /* --- 3. Flex & Grid 系統 --- */
        .flex-row { flex-direction: row; }
        .flex-col { flex-direction: column; }
        .flex-wrap { flex-wrap: wrap; }
        .items-start { align-items: flex-start; }
        .items-end { align-items: flex-end; }
        .items-center { align-items: center; }
        .items-baseline { align-items: baseline; }
        .justify-center { justify-content: center; }
        .justify-end { justify-content: flex-end; }
        .justify-between { justify-content: space-between; }
        .gap-1 { gap: 0.25rem; }
        .gap-1\.5 { gap: 0.375rem; }
        .gap-2 { gap: 0.5rem; }
        .gap-3 { gap: 0.75rem; }
        .gap-4 { gap: 1rem; }
        .gap-6 { gap: 1.5rem; }
        .space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; }
        .space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; }
        .space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
        .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
        .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
        .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
        .shrink-0 { flex-shrink: 0; }
        .flex-shrink-0 { flex-shrink: 0; }
        .flex-grow { flex-grow: 1; }
        .flex-1 { flex: 1 1 0%; }
        .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

        /* --- 4. 尺寸 (Width & Height) --- */
        .w-full { width: 100%; }
        .w-3 { width: 0.75rem; }
        .w-4 { width: 1rem; }
        .w-5 { width: 1.25rem; }
        .w-6 { width: 1.5rem; }
        .w-8 { width: 2rem; }
        .w-10 { width: 2.5rem; }
        .w-11\/12 { width: 91.666667%; }
        .w-\[70vw\] { width: 70vw; }
        .w-\[36\%\] { width: 36%; }
        .w-\[19\%\] { width: 19%; }
        .w-\[18\%\] { width: 18%; }
        .w-\[13\%\] { width: 13%; }
        .w-\[11\%\] { width: 11%; }
        .max-w-sm { max-width: 24rem; }
        .max-w-md { max-width: 28rem; }
        .max-w-2xl { max-width: 42rem; }
        .max-w-4xl { max-width: 56rem; }
        .max-w-5xl { max-width: 64rem; }
        .max-w-\[90vw\] { max-width: 90vw; }
        .min-w-\[200px\] { min-width: 200px; }
        .h-full { height: 100%; }
        .h-3 { height: 0.75rem; }
        .h-4 { height: 1rem; }
        .h-5 { height: 1.25rem; }
        .h-6 { height: 1.5rem; }
        .h-8 { height: 2rem; }
        .h-10 { height: 2.5rem; }
        .max-h-\[85vh\] { max-height: 85vh; }
        .max-h-\[90vh\] { max-height: 90vh; }

        /* --- 5. 間距 (Margin & Padding) --- */
        .p-1 { padding: 0.25rem; } .p-1\.5 { padding: 0.375rem; } .p-2 { padding: 0.5rem; } .p-2\.5 { padding: 0.625rem; } .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; }
        .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; } .px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
        .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
        .pt-1 { padding-top: 0.25rem; } .pt-2 { padding-top: 0.5rem; } .pt-4 { padding-top: 1rem; } .pt-6 { padding-top: 1.5rem; }
        .pb-1 { padding-bottom: 0.25rem; } .pb-2 { padding-bottom: 0.5rem; } .pb-4 { padding-bottom: 1rem; } .pb-6 { padding-bottom: 1.5rem; } .pb-8 { padding-bottom: 2rem; } .pb-10 { padding-bottom: 2.5rem; } .pb-24 { padding-bottom: 6rem; }
        .pl-4 { padding-left: 1rem; } .pl-6 { padding-left: 1.5rem; } .pl-7 { padding-left: 1.75rem; } .pr-2 { padding-right: 0.5rem; }
        .m-1 { margin: 0.25rem; } .m-2 { margin: 0.5rem; }
        .mx-auto { margin-left: auto; margin-right: auto; } .-mx-4 { margin-left: -1rem; margin-right: -1rem; }
        .mt-0\.5 { margin-top: 0.125rem; } .mt-1 { margin-top: 0.25rem; } .mt-1\.5 { margin-top: 0.375rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; }
        .mb-0\.5 { margin-bottom: 0.125rem; } .mb-1 { margin-bottom: 0.25rem; } .mb-1\.5 { margin-bottom: 0.375rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-10 { margin-bottom: 2.5rem; }
        .ml-2 { margin-left: 0.5rem; } .ml-3 { margin-left: 0.75rem; } .ml-10 { margin-left: 2.5rem; } .ml-auto { margin-left: auto; }
        .mr-1 { margin-right: 0.25rem; } .mr-2 { margin-right: 0.5rem; }

        /* --- 6. 字體與排版 (Typography) --- */
        .text-\[10px\] { font-size: 10px; } .text-\[11px\] { font-size: 11px; }
        .text-xs { font-size: 0.75rem; line-height: 1rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
        .text-base { font-size: 1rem; line-height: 1.5rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
        .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; }
        .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
        .text-5xl { font-size: 3rem; line-height: 1; }
        .font-sans { font-family: 'Nunito', 'Noto Sans TC', sans-serif; }
        .font-medium { font-weight: 500; } .font-bold { font-weight: 700; } .font-black { font-weight: 900; }
        .tracking-tight { letter-spacing: -0.025em; } .tracking-wider { letter-spacing: 0.05em; }
        .leading-tight { line-height: 1.25; } .leading-relaxed { line-height: 1.625; }
        .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; }
        .uppercase { text-transform: uppercase; }
        .underline { text-decoration-line: underline; } .underline-offset-2 { text-underline-offset: 2px; } .underline-offset-4 { text-underline-offset: 4px; }
        .decoration-gray-300 { text-decoration-color: #d1d5db; } .decoration-gray-400\/50 { text-decoration-color: rgba(156, 163, 175, 0.5); } .decoration-cyan-300 { text-decoration-color: #67e8f9; }
        .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

        /* --- 7. 顏色系統 (Colors) --- */
        .text-white { color: #ffffff; } .text-black { color: #000000; }
        .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-red-500 { color: #ef4444; } .text-red-600 { color: #dc2626; } .text-red-700 { color: #b91c1c; } .text-red-800 { color: #991b1b; }
        .text-orange-600 { color: #ea580c; } .text-orange-700 { color: #c2410c; } .text-orange-800 { color: #9a3412; }
        .text-amber-700 { color: #b45309; }
        .text-yellow-500 { color: #eab308; } .text-yellow-600 { color: #ca8a04; } .text-yellow-700 { color: #a16207; } .text-yellow-800 { color: #854d0e; }
        .text-green-600 { color: #16a34a; } .text-green-700 { color: #15803d; } .text-emerald-700 { color: #047857; }
        .text-teal-600 { color: #0d9488; } .text-teal-800 { color: #115e59; }
        .text-cyan-500 { color: #06b6d4; } .text-cyan-600 { color: #0891b2; } .text-cyan-700 { color: #0e7490; } .text-cyan-800 { color: #155e75; }
        .text-blue-400 { color: #60a5fa; } .text-blue-500 { color: #3b82f6; } .text-blue-600 { color: #2563eb; } .text-blue-800 { color: #1e40af; } .text-blue-900 { color: #1e3a8a; }
        .text-indigo-500 { color: #6366f1; } .text-indigo-600 { color: #4f46e5; } .text-indigo-700 { color: #4338ca; } .text-indigo-800 { color: #3730a3; }
        .text-purple-500 { color: #a855f7; } .text-purple-600 { color: #9333ea; } .text-purple-800 { color: #6b21a8; }
        .text-pink-600 { color: #db2777; } .text-pink-700 { color: #be185d; } .text-pink-800 { color: #9d174d; }
        .text-slate-700 { color: #334155; }
        .text-kawaii-pink { color: #FF9A9E; } .text-kawaii-blue { color: #A1C4FD; }

        .bg-white { background-color: #ffffff; } .bg-black { background-color: #000000; } .bg-transparent { background-color: transparent; }
        .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-500 { background-color: #6b7280; } .bg-gray-800 { background-color: #1f2937; } .bg-gray-900 { background-color: #111827; }
        .bg-red-50 { background-color: #fef2f2; } .bg-red-100 { background-color: #fee2e2; } .bg-red-400 { background-color: #f87171; } .bg-red-500 { background-color: #ef4444; }
        .bg-orange-50 { background-color: #fff7ed; } .bg-amber-50 { background-color: #fffbeb; } .bg-amber-500 { background-color: #f59e0b; }
        .bg-yellow-50 { background-color: #fefce8; } .bg-yellow-100 { background-color: #fef9c3; } .bg-yellow-400 { background-color: #facc15; }
        .bg-green-50 { background-color: #f0fdf4; } .bg-green-100 { background-color: #dcfce7; } .bg-green-400 { background-color: #4ade80; } .bg-green-500 { background-color: #22c55e; } .bg-emerald-50 { background-color: #ecfdf5; }
        .bg-teal-50 { background-color: #f0fdfa; } .bg-cyan-50 { background-color: #ecfeff; } .bg-cyan-100 { background-color: #cffafe; }
        .bg-blue-50 { background-color: #eff6ff; } .bg-blue-100 { background-color: #dbeafe; } .bg-blue-400 { background-color: #60a5fa; }
        .bg-indigo-50 { background-color: #eef2ff; } .bg-purple-50 { background-color: #faf5ff; } .bg-purple-100 { background-color: #f3e8ff; }
        .bg-pink-50 { background-color: #fdf2f8; } .bg-pink-100 { background-color: #fce7f3; } .bg-pink-500 { background-color: #ec4899; }
        .bg-slate-50 { background-color: #f8fafc; } .bg-slate-800 { background-color: #1e293b; }
        .bg-kawaii-pink { background-color: #FF9A9E; } .bg-kawaii-light-pink { background-color: #FECFEF; } .bg-kawaii-yellow { background-color: #FDF3A6; } .bg-kawaii-blue { background-color: #A1C4FD; }
        .bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); } .bg-white\/80 { background-color: rgba(255, 255, 255, 0.8); } .bg-gray-900\/60 { background-color: rgba(17, 24, 39, 0.6); }
        .bg-yellow-50\/50 { background-color: rgba(254, 252, 232, 0.5); } .bg-red-50\/70 { background-color: rgba(254, 242, 242, 0.7); } .bg-pink-50\/70 { background-color: rgba(253, 242, 248, 0.7); } .bg-green-50\/70 { background-color: rgba(240, 253, 244, 0.7); }
        .bg-amber-50\/50 { background-color: rgba(255, 251, 235, 0.5); } .bg-amber-50\/80 { background-color: rgba(255, 251, 235, 0.8); }
        .bg-kawaii-bg\/95 { background-color: rgba(255, 251, 240, 0.95); } .bg-kawaii-light-blue\/20 { background-color: rgba(194, 233, 251, 0.2); } .bg-kawaii-light-blue\/30 { background-color: rgba(194, 233, 251, 0.3); } .bg-kawaii-light-pink\/30 { background-color: rgba(254, 207, 239, 0.3); } .bg-kawaii-light-pink\/50 { background-color: rgba(254, 207, 239, 0.5); }

        .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
        .bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
        .from-kawaii-pink { --tw-gradient-from: #FF9A9E; --tw-gradient-to: rgba(255, 154, 158, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .to-pink-400 { --tw-gradient-to: #f472b6; }
        .from-purple-50 { --tw-gradient-from: #faf5ff; --tw-gradient-to: rgba(250, 245, 255, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .to-purple-100 { --tw-gradient-to: #f3e8ff; }
        .from-cyan-50 { --tw-gradient-from: #ecfeff; --tw-gradient-to: rgba(236, 254, 255, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .to-blue-50 { --tw-gradient-to: #eff6ff; }
        .from-teal-500 { --tw-gradient-from: #14b8a6; --tw-gradient-to: rgba(20, 184, 166, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .to-emerald-500 { --tw-gradient-to: #10b981; }
        .from-blue-500 { --tw-gradient-from: #3b82f6; --tw-gradient-to: rgba(59, 130, 246, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .to-indigo-500 { --tw-gradient-to: #6366f1; }
        .from-yellow-50 { --tw-gradient-from: #fefce8; --tw-gradient-to: rgba(254, 252, 232, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .to-orange-50 { --tw-gradient-to: #fff7ed; }

        /* --- 8. 邊框與圓角 (Borders & Radius) --- */
        .border { border-width: 1px; } .border-2 { border-width: 2px; } .border-\[3px\] { border-width: 3px; } .border-4 { border-width: 4px; }
        .border-b { border-bottom-width: 1px; } .border-b-2 { border-bottom-width: 2px; } .border-b-4 { border-bottom-width: 4px; }
        .border-t { border-top-width: 1px; } .border-t-2 { border-top-width: 2px; } .border-l-2 { border-left-width: 2px; }
        .border-transparent { border-color: transparent; } .border-dashed { border-style: dashed; }
        .border-white { border-color: #ffffff; } .border-gray-100 { border-color: #f3f4f6; } .border-gray-200 { border-color: #e5e7eb; } .border-gray-300 { border-color: #d1d5db; } .border-gray-400 { border-color: #9ca3af; } .border-gray-600 { border-color: #4b5563; } .border-gray-700 { border-color: #374151; } .border-gray-800 { border-color: #1f2937; }
        .border-red-100 { border-color: #fee2e2; } .border-red-200 { border-color: #fecaca; } .border-red-300 { border-color: #fca5a5; } .border-red-400 { border-color: #f87171; }
        .border-orange-100 { border-color: #ffedd5; } .border-orange-200 { border-color: #fed7aa; } .border-amber-200 { border-color: #fde68a; }
        .border-yellow-100 { border-color: #fef9c3; } .border-yellow-200 { border-color: #fef08a; } .border-yellow-400 { border-color: #facc15; }
        .border-green-100 { border-color: #dcfce7; } .border-green-200 { border-color: #bbf7d0; } .border-emerald-200 { border-color: #a7f3d0; }
        .border-teal-100 { border-color: #ccfbf1; } .border-teal-200 { border-color: #99f6e4; }
        .border-cyan-200 { border-color: #a5f3fc; } .border-cyan-300 { border-color: #67e8f9; }
        .border-blue-100 { border-color: #dbeafe; } .border-blue-200 { border-color: #bfdbfe; } .border-blue-300 { border-color: #93c5fd; }
        .border-indigo-100 { border-color: #e0e7ff; } .border-indigo-200 { border-color: #c7d2fe; }
        .border-purple-100 { border-color: #f3e8ff; } .border-purple-200 { border-color: #e9d5ff; } .border-purple-300 { border-color: #d8b4fe; }
        .border-pink-100 { border-color: #fce7f3; } .border-pink-200 { border-color: #fbcfe8; } .border-pink-300 { border-color: #f9a8d4; }
        .border-slate-300 { border-color: #cbd5e1; } .border-slate-700 { border-color: #334155; }
        .border-kawaii-light-pink { border-color: #FECFEF; } .border-kawaii-light-blue { border-color: #C2E9FB; }
        .last\:border-transparent:last-child { border-color: transparent; }

        .rounded { border-radius: 0.25rem; } .rounded-sm { border-radius: 0.125rem; } .rounded-md { border-radius: 0.375rem; } .rounded-lg { border-radius: 0.5rem; } .rounded-xl { border-radius: 0.75rem; } .rounded-2xl { border-radius: 1rem; } .rounded-full { border-radius: 9999px; } .rounded-\[2rem\] { border-radius: 2rem; } .rounded-b-\[2\.5rem\] { border-radius: 0 0 2.5rem 2.5rem; }

        /* --- 9. 陰影與濾鏡 (Shadows & Effects) --- */
        .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
        .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
        .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
        .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
        .shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); }
        .shadow-kawaii { box-shadow: 0 8px 24px rgba(255, 154, 158, 0.25); }
        .drop-shadow { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06)); }
        .drop-shadow-sm { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05)); }
        .drop-shadow-md { filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06)); }
        .drop-shadow-lg { filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1)); }
        
        .opacity-0 { opacity: 0; } .opacity-10 { opacity: 0.1; } .opacity-20 { opacity: 0.2; } .opacity-50 { opacity: 0.5; } .opacity-60 { opacity: 0.6; } .opacity-75 { opacity: 0.75; } .opacity-80 { opacity: 0.8; } .opacity-90 { opacity: 0.9; } .opacity-100 { opacity: 1; }
        .backdrop-blur { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

        /* --- 10. 動畫與轉場 (Transitions & Animations) --- */
        .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
        .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
        .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
        .transition-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
        .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
        .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
        .duration-200 { transition-duration: 200ms; } .duration-300 { transition-duration: 300ms; }
        .transform { transform: translate(0,0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1); }
        .scale-95 { transform: scale(0.95); } .scale-100 { transform: scale(1); }
        
        .animate-bounce { animation: bounce 1s infinite; }
        .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
        .animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
        .animate-\[fadeIn_0\.3s_ease-out\] { animation: fadeIn 0.3s ease-out; }

        @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); } 50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1); } }
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
        @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }

        /* --- 11. 其他控制項與互動 (Misc & Interactive) --- */
        .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; }
        .cursor-pointer { cursor: pointer; } .pointer-events-none { pointer-events: none; }
        .outline-none { outline: 2px solid transparent; outline-offset: 2px; }
        
        .ring-2 { box-shadow: 0 0 0 calc(2px + 0px) rgba(59, 130, 246, 0.5); }
        .ring-yellow-400\/50 { box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.5); }
        .focus\:ring-kawaii-pink:focus { box-shadow: 0 0 0 2px #FFFBF0, 0 0 0 4px #FF9A9E; outline: 2px solid transparent; outline-offset: 2px; }

        /* Hover & Active States */
        .hover\:scale-105:hover { transform: scale(1.05); }
        .hover\:-translate-y-1:hover { transform: translateY(-0.25rem); }
        .active\:scale-95:active { transform: scale(0.95); }
        .group:hover .group-hover\:text-black { color: #000000; }
        .hover\:bg-gray-200:hover { background-color: #e5e7eb; }
        .hover\:bg-gray-300:hover { background-color: #d1d5db; }
        .hover\:bg-gray-700:hover { background-color: #374151; }
        .hover\:bg-emerald-100:hover { background-color: #d1fae5; }
        .hover\:bg-kawaii-light-pink:hover { background-color: #FECFEF; }
        .hover\:text-gray-800:hover { color: #1f2937; }
        .hover\:text-blue-600:hover { color: #2563eb; }
        .hover\:text-cyan-500:hover { color: #06b6d4; }
        .hover\:text-cyan-600:hover { color: #0891b2; }
        .hover\:text-white:hover { color: #ffffff; }
        .hover\:border-kawaii-light-pink:hover { border-color: #FECFEF; }
        .hover\:opacity-100:hover { opacity: 1; }
        .hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
        .last\:pb-0:last-child { padding-bottom: 0px; }

        /* --- 12. 響應式佈局 (Responsive Breakpoints) --- */
        @media (min-width: 640px) {
            .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .sm\:w-\[260px\] { width: 260px; }
            .sm\:p-5 { padding: 1.25rem; } .sm\:p-6 { padding: 1.5rem; }
            .sm\:text-base { font-size: 1rem; line-height: 1.5rem; } .sm\:text-xl { font-size: 1.25rem; line-height: 1.75rem; } .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
            .sm\:mt-0 { margin-top: 0px; } .sm\:items-center { align-items: center; }
        }
        @media (min-width: 768px) {
            .md\:grid { display: grid; }
            .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            .md\:gap-3 { gap: 0.75rem; }
            .md\:mx-auto { margin-left: auto; margin-right: auto; } .md\:mx-0 { margin-left: 0px; margin-right: 0px; }
            .md\:px-0 { padding-left: 0px; padding-right: 0px; } .md\:px-1 { padding-left: 0.25rem; padding-right: 0.25rem; } .md\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
            .md\:py-8 { padding-top: 2rem; padding-bottom: 2rem; } .md\:p-8 { padding: 2rem; }
            .md\:w-auto { width: auto; }
            .md\:overflow-visible { overflow: visible; }
            .md\:justify-center { justify-content: center; }
            .md\:text-sm { font-size: 0.875rem; line-height: 1.25rem; } .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; } .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
        }
        @media (min-width: 1024px) {
            .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            .lg\:px-12 { padding-left: 3rem; padding-right: 3rem; } .lg\:px-16 { padding-left: 4rem; padding-right: 4rem; }
            .lg\:max-w-4xl { max-width: 56rem; }
        }
        
        /* 列印用 */
        @media print {
            .print\:hidden { display: none !important; }
            .print\:block { display: block !important; }
            .print\:pb-0 { padding-bottom: 0px !important; }
            .print\:bg-white { background-color: #ffffff !important; }
        }
        /* #endregion */