*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}
body{margin:0;line-height:inherit}
hr{height:0;color:inherit;border-top-width:1px}
abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-.25em}
sup{top:-.5em}
table{text-indent:0;border-color:inherit;border-collapse:collapse}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}
button,select{text-transform:none}
button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}
:-moz-focusring{outline:auto}
:-moz-ui-invalid{box-shadow:none}
progress{vertical-align:baseline}
::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
summary{display:list-item}
blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}
fieldset{margin:0;padding:0}
legend{padding:0}
menu,ol,ul{list-style:none;margin:0;padding:0}
dialog{padding:0}
textarea{resize:vertical}
input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}
[role=button],button{cursor:pointer}
:disabled{cursor:default}
audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}
img,video{max-width:100%;height:auto}
[hidden]:where(:not([hidden=until-found])){display:none}

/* 布局与盒模型 */
.fixed{position:fixed}
.absolute{position:absolute}
.relative{position:relative}
.sticky{position:sticky}
.inset-x-0{left:0;right:0}
.-bottom-0\.5{bottom:-0.125rem}
.-right-0\.5{right:-0.125rem}
.-top-10{top:-2.5rem}
.bottom-0{bottom:0}
.left-0{left:0}
.left-2{left:0.5rem}
.right-0{right:0}
.top-0{top:0}
.top-2{top:0.5rem}
.top-\[40\%\]{top:40%}
.z-10{z-index:10}
.z-50{z-index:50}
.z-\[60\]{z-index:60}
.z-\[70\]{z-index:70}
.z-\[100\]{z-index:100}
.z-\[110\]{z-index:110}
.\!m-0{margin:0 !important}
.-mx-4{margin-left:-1rem;margin-right:-1rem}
.mx-2{margin-left:0.5rem;margin-right:0.5rem}
.mx-auto{margin-left:auto;margin-right:auto}
.my-6{margin-top:1.5rem;margin-bottom:1.5rem}
.my-8{margin-top:2rem;margin-bottom:2rem}
.\!mb-0{margin-bottom:0 !important}
.\!mb-3{margin-bottom:0.75rem !important}
.\!mb-4{margin-bottom:1rem !important}
.\!mb-6{margin-bottom:1.5rem !important}
.\!mt-0{margin-top:0 !important}
.\!mt-5{margin-top:1.25rem !important}
.\!mt-\[-12px\]{margin-top:-12px !important}
.-ml-1{margin-left:-0.25rem}
.-mr-1\.5{margin-right:-0.375rem}
.-mt-4{margin-top:-1rem}
.mb-1{margin-bottom:0.25rem}
.mb-1\.5{margin-bottom:0.375rem}
.mb-10{margin-bottom:2.5rem}
.mb-12{margin-bottom:3rem}
.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}
.ml-0\.5{margin-left:0.125rem}
.ml-1{margin-left:0.25rem}
.ml-\[1px\]{margin-left:1px}
.mr-1{margin-right:0.25rem}
.mt-0\.5{margin-top:0.125rem}
.mt-1{margin-top:0.25rem}
.mt-1\.5{margin-top:0.375rem}
.mt-12{margin-top:3rem}
.mt-2\.5{margin-top:0.625rem}
.mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mt-\[1px\]{margin-top:1px}
.mt-\[3px\]{margin-top:3px}
.mt-2{margin-top:0.5rem}
.block{display:block}
.inline-block{display:inline-block}
.flex{display:flex}
.inline-flex{display:inline-flex}
.grid{display:grid}
.hidden{display:none}
.aspect-\[16\/10\]{aspect-ratio:16/10}
.aspect-\[2\/1\]{aspect-ratio:2/1}
.aspect-\[3\/4\]{aspect-ratio:3/4}
.aspect-\[4\/3\]{aspect-ratio:4/3}
.aspect-square{aspect-ratio:1/1}
.aspect-video{aspect-ratio:16/9}
.aspect-\[9\/20\] {
    aspect-ratio: 9 / 20;
}
.h-1\.5{height:0.375rem}
.h-11{height:2.75rem}
.h-2{height:0.5rem}
.h-2\.5{height:0.625rem}
.h-3{height:0.75rem}
.h-3\.5{height:0.875rem}
.h-5{height:1.25rem}
.h-7{height:1.75rem}
.h-8{height:2rem}
.h-9{height:2.25rem}
.h-\[10px\]{height:10px}
.h-\[12px\]{height:12px}
.h-\[18px\]{height:18px}
.h-\[22px\]{height:22px}
.h-\[30px\]{height:30px}
.h-\[42px\]{height:42px}
.h-\[46px\]{height:46px}
.h-\[75vh\]{height:75vh}
.h-auto{height:auto}
.h-full{height:100%}
.min-h-\[36px\]{min-height:36px}
.w-3{width:0.75rem}
.w-3\.5{width:0.875rem}
.w-5{width:1.25rem}
.w-7{width:1.75rem}
.w-8{width:2rem}
.w-\[1\.5px\]{width:1.5px}
.w-\[10px\]{width:10px}
.w-\[12px\]{width:12px}
.w-\[18px\]{width:18px}
.w-\[1px\]{width:1px}
.w-\[22px\]{width:22px}
.w-\[30px\]{width:30px}
.w-\[3px\]{width:3px}
.w-\[46px\]{width:46px}
.w-\[72px\]{width:72px}
.w-\[85px\]{width:85px}
.w-full{width:100%}
.w-1\/2{width:50%}
.w-2\/3{width:66.666667%}
.min-w-0{min-width:0}
.min-w-\[220px\]{min-width:220px}
.min-w-\[72px\]{min-width:72px}
.max-w-\[240px\]{max-width:240px}
.max-w-\[677px\]{max-width:677px}
.max-w-none{max-width:none}
.max-w-\[280px\]{max-width:280px}
.max-w-\[70px\]{max-width:70px}
.max-w-\[120px\]{max-width:120px}
.flex-1{flex:1 1 0%}
.flex-shrink-0{flex-shrink:0}
.shrink-0{flex-shrink:0}

/* 去变量重构的 Transform 变形 */
.origin-left{transform-origin:left}
.-translate-y-1\/2{transform:translateY(-50%)}
.scale-90{transform:scale(0.9)}
/* 布局与交互 */
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-cols-\[140px_1fr_1fr\]{grid-template-columns:140px 1fr 1fr}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-start{align-items:flex-start}
.items-center{align-items:center}
.items-baseline{align-items:baseline}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.gap-0\.5{gap:0.125rem}
.gap-1{gap:0.25rem}
.gap-1\.5{gap:0.375rem}
.gap-2{gap:0.5rem}
.gap-2\.5{gap:0.625rem}
.gap-3{gap:0.75rem}
.gap-3\.5{gap:0.875rem}
.gap-4{gap:1rem}
.gap-5{gap:1.25rem}
.gap-x-2{column-gap:0.5rem}
.gap-x-5{column-gap:1.25rem}
.gap-y-2{row-gap:0.5rem}
.space-y-0>:not([hidden])~:not([hidden]){margin-top:0}
.space-y-2>:not([hidden])~:not([hidden]){margin-top:0.5rem}
.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}
.space-y-5>:not([hidden])~:not([hidden]){margin-top:1.25rem}
.overflow-hidden{overflow:hidden}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whitespace-nowrap{white-space:nowrap}
.break-words{overflow-wrap:break-word}

/* 圆角与边框 */
.rounded{border-radius:0.25rem}
.rounded-2xl{border-radius:1rem}
.rounded-\[3px\]{border-radius:3px}
.rounded-\[4px\]{border-radius:4px}
.rounded-\[6px\]{border-radius:6px}
.rounded-full{border-radius:9999px}
.rounded-lg{border-radius:0.5rem}
.rounded-md{border-radius:0.375rem}
.rounded-sm{border-radius:0.125rem}
.rounded-xl{border-radius:0.75rem}
.rounded-r-lg{border-top-right-radius:0.5rem;border-bottom-right-radius:0.5rem}
.rounded-r-xl{border-top-right-radius:0.75rem;border-bottom-right-radius:0.75rem}
.\!border-0{border-width:0 !important}
.border{border-width:1px}
.border-2{border-width:2px}
.border-b{border-bottom-width:1px}
.border-l-2{border-left-width:2px}
.border-l-4{border-left-width:4px}
.border-l-\[3px\]{border-left-width:3px}
.border-t{border-top-width:1px}
.border-t-\[10px\]{border-top-width:10px}

/* 色彩清理版 (去 opacity 变量强绑定) */
.border-\[\#f6f7f9\]{border-color:#f6f7f9}
.border-amber-200{border-color:#fde68a}
.border-amber-200\/50{border-color:rgba(253,230,138,0.5)}
.border-blue-100{border-color:#dbeafe}
.border-blue-100\/50{border-color:rgba(219,234,254,0.5)}
.border-blue-200{border-color:#bfdbfe}
.border-blue-200\/50{border-color:rgba(191,219,254,0.5)}
.border-blue-500{border-color:#3b82f6}
.border-gray-100{border-color:#f3f4f6}
.border-gray-100\/80{border-color:rgba(243,244,246,0.8)}
.border-gray-200{border-color:#e5e7eb}
.border-gray-200\/40{border-color:rgba(229,231,235,0.4)}
.border-gray-400{border-color:#9ca3af}
.border-red-200{border-color:#fecaca}
.border-rose-200{border-color:#fecdd3}
.border-rose-200\/50{border-color:rgba(254,205,211,0.5)}
.border-sky-200{border-color:#bae6fd}
.border-sky-200\/50{border-color:rgba(186,230,253,0.5)}
.border-slate-200\/60{border-color:rgba(226,232,240,0.6)}
.border-slate-200\/80{border-color:rgba(226,232,240,0.8)}
.border-l-amber-500{border-left-color:#f59e0b}
.border-l-blue-500{border-left-color:#3b82f6}
.\!bg-transparent{background-color:transparent !important}
.bg-\[\#2563eb\]{background-color:#2563eb}
.bg-\[\#f6f7f9\]{background-color:#f6f7f9}
.bg-amber-100{background-color:#fef3c7}
.bg-amber-100\/80{background-color:rgba(254,243,199,0.8)}
.bg-amber-50{background-color:#fffbeb}
.bg-amber-500{background-color:#f59e0b}
.bg-black\/50{background-color:rgba(0,0,0,0.5)}
.bg-blue-100{background-color:#dbeafe}
.bg-blue-50{background-color:#eff6ff}
.bg-blue-50\/50{background-color:rgba(239,246,255,0.5)}
.bg-blue-50\/60{background-color:rgba(239,246,255,0.6)}
.bg-blue-500\/10{background-color:rgba(59,130,246,0.1)}
.bg-blue-600{background-color:#2563eb}
.bg-gray-100{background-color:#f3f4f6}
.bg-gray-100\/60{background-color:rgba(243,244,246,0.6)}
.bg-gray-200{background-color:#e5e7eb}
.bg-gray-300{background-color:#d1d5db}
.bg-gray-50{background-color:#f9fafb}
.bg-gray-50\/60{background-color:rgba(249,250,251,0.6)}
.bg-gray-50\/80{background-color:rgba(249,250,251,0.8)}
.bg-gray-50\/90{background-color:rgba(249,250,251,0.9)}
.bg-red-50{background-color:#fef2f2}
.bg-rose-50{background-color:#fff1f2}
.bg-rose-500{background-color:#f43f5e}
.bg-sky-400{background-color:#38bdf8}
.bg-sky-50{background-color:#f0f9ff}
.bg-white{background-color:#fff}
.bg-white\/80{background-color:rgba(255,255,255,0.8)}
.bg-white\/95{background-color:rgba(255,255,255,0.95)}
.bg-\[\#60a5fa\]{background-color:#60a5fa}
.bg-black\/60{background-color:rgba(0,0,0,0.6)}
.bg-black\/90{background-color:rgba(0,0,0,0.9)}
.bg-\[\#eff6ff\]{background-color:#eff6ff}

/* 渐变支持 */
.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}
.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}
.from-amber-300{--tw-gradient-from:#fcd34d;--tw-gradient-to:rgba(252,211,77,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-amber-400{--tw-gradient-from:#fbbf24;--tw-gradient-to:rgba(251,191,36,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-black\/80{--tw-gradient-from:rgba(0,0,0,0.8);--tw-gradient-to:rgba(0,0,0,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-black\/90{--tw-gradient-from:rgba(0,0,0,0.9);--tw-gradient-to:rgba(0,0,0,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-blue-400{--tw-gradient-from:#60a5fa;--tw-gradient-to:rgba(96,165,250,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-indigo-400{--tw-gradient-from:#818cf8;--tw-gradient-to:rgba(129,140,248,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-orange-300{--tw-gradient-from:#fdba74;--tw-gradient-to:rgba(253,186,116,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-orange-400{--tw-gradient-from:#fb923c;--tw-gradient-to:rgba(251,146,60,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-rose-400{--tw-gradient-from:#fb7185;--tw-gradient-to:rgba(251,113,133,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-sky-400{--tw-gradient-from:#38bdf8;--tw-gradient-to:rgba(56,189,248,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.via-black\/40{--tw-gradient-to:rgba(0,0,0,0);--tw-gradient-stops:var(--tw-gradient-from),rgba(0,0,0,0.4),var(--tw-gradient-to)}
.via-black\/50{--tw-gradient-to:rgba(0,0,0,0);--tw-gradient-stops:var(--tw-gradient-from),rgba(0,0,0,0.5),var(--tw-gradient-to)}
.to-amber-500{--tw-gradient-to:#f59e0b}
.to-blue-500{--tw-gradient-to:#3b82f6}
.to-indigo-500{--tw-gradient-to:#6366f1}
.to-orange-400{--tw-gradient-to:#fb923c}
.to-orange-500{--tw-gradient-to:#f97316}
.to-rose-500{--tw-gradient-to:#f43f5e}
.to-sky-500{--tw-gradient-to:#0ea5e9}
.to-transparent{--tw-gradient-to:transparent}

/* 对象尺寸排版 */
.object-cover{object-fit:cover}
.\!p-0{padding:0 !important}
.p-1\.5{padding:0.375rem}
.p-2{padding:0.5rem}
.p-2\.5{padding:0.625rem}
.p-3\.5{padding:0.875rem}
.p-4{padding:1rem}
.p-5{padding:1.25rem}
.p-\[1px\]{padding:1px}
.p-\[2px\]{padding:2px}
.p-6{padding:1.5rem}
.px-1\.5{padding-left:0.375rem;padding-right:0.375rem}
.px-2{padding-left:0.5rem;padding-right:0.5rem}
.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\.5{padding-top:0.625rem;padding-bottom:0.625rem}
.py-3\.5{padding-top:0.875rem;padding-bottom:0.875rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-\[3px\]{padding-top:3px;padding-bottom:3px}
.px-1{padding-left:0.25rem;padding-right:0.25rem}
.pb-1{padding-bottom:0.25rem}
.pb-2\.5{padding-bottom:0.625rem}
.pb-3{padding-bottom:0.75rem}
.pb-5{padding-bottom:1.25rem}
.pb-8{padding-bottom:2rem}
.pl-1{padding-left:0.25rem}
.pl-2\.5{padding-left:0.625rem}
.pl-3{padding-left:0.75rem}
.pl-5{padding-left:1.25rem}
.pr-1{padding-right:0.25rem}
.pr-2{padding-right:0.5rem}
.pr-4{padding-right:1rem}
.pt-1{padding-top:0.25rem}
.pt-10{padding-top:2.5rem}
.pt-20{padding-top:5rem}
.pt-4{padding-top:1rem}
.pt-8{padding-top:2rem}
.text-left{text-align:left}
.text-center{text-align:center}
.text-right{text-align:right}
.text-justify{text-align:justify}

/* 字体与字号 */
.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.\!text-\[19px\]{font-size:19px !important}
.text-\[10px\]{font-size:10px}
.text-\[11\.5px\]{font-size:11.5px}
.text-\[11px\]{font-size:11px}
.text-\[12\.5px\]{font-size:12.5px}
.text-\[12px\]{font-size:12px}
.text-\[13px\]{font-size:13px}
.text-\[14px\]{font-size:14px}
.text-\[15px\]{font-size:15px}
.text-\[16px\]{font-size:16px}
.text-\[17px\]{font-size:17px}
.text-\[18px\]{font-size:18px}
.text-\[22px\]{font-size:22px}
.text-\[8px\]{font-size:8px}
.text-\[9px\]{font-size:9px}
.text-sm{font-size:0.875rem;line-height:1.25rem}
.font-black{font-weight:900}
.font-bold{font-weight:700}
.font-medium{font-weight:500}
.font-normal{font-weight:400}
.font-semibold{font-weight:600}
.uppercase{text-transform:uppercase}
.italic{font-style:italic}
.leading-\[1\.4\]{line-height:1.4}
.leading-\[1\.8\]{line-height:1.8}
.leading-none{line-height:1}
.leading-relaxed{line-height:1.625}
.leading-snug{line-height:1.375}
.leading-tight{line-height:1.25}
.tracking-tight{letter-spacing:-0.025em}
.tracking-wide{letter-spacing:0.025em}
.tracking-wider{letter-spacing:0.05em}
.tracking-\[0\.02em\]{letter-spacing:0.02em}

/* 文字颜色清理版 */
.\!text-\[\#222\]{color:#222 !important}
.\!text-amber-900{color:#78350f !important}
.\!text-blue-900{color:#1e3a8a !important}
.text-\[\#1a1a1a\]{color:#1a1a1a}
.text-\[\#1e3a8a\]{color:#1e3a8a}
.text-\[\#222\]{color:#222}
.text-amber-500{color:#f59e0b}
.text-amber-600{color:#d97706}
.text-amber-700{color:#b45309}
.text-blue-100\/50{color:rgba(219,234,254,0.5)}
.text-blue-500{color:#3b82f6}
.text-blue-600{color:#2563eb}
.text-blue-600\/80{color:rgba(37,99,235,0.8)}
.text-blue-700{color:#1d4ed8}
.text-emerald-600{color:#059669}
.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-indigo-500{color:#6366f1}
.text-indigo-600{color:#4f46e5}
.text-orange-400{color:#fb923c}
.text-orange-500{color:#f97316}
.text-red-600{color:#dc2626}
.text-rose-500{color:#f43f5e}
.text-rose-600{color:#e11d48}
.text-rose-700{color:#be123c}
.text-sky-500{color:#0ea5e9}
.text-sky-600{color:#0284c7}
.text-sky-700{color:#0369a1}
.text-slate-500{color:#64748b}
.text-slate-600{color:#475569}
.text-slate-700{color:#334155}
.text-slate-800{color:#1e293b}
.text-slate-900{color:#0f172a}
.text-white{color:#fff}
.text-white\/95{color:rgba(255,255,255,0.95)}
.text-white\/70{color:rgba(255,255,255,0.7)}
.text-\[\#2563eb\]{color:#2563eb}
.text-\[\#333\]{color:#333}

/* 透明度 */
.opacity-60{opacity:0.6}
.opacity-90{opacity:0.9}

/* 精简后的阴影系统 */
.shadow-\[0_-10px_40px_rgba\(0\2c 0\2c 0\2c 0\.1\)\]{box-shadow:0 -10px 40px rgba(0,0,0,0.1)}
.shadow-\[0_-4px_20px_rgba\(0\2c 0\2c 0\2c 0\.02\)\]{box-shadow:0 -4px 20px rgba(0,0,0,0.02)}
.shadow-\[0_1px_2px_rgba\(59\2c 130\2c 246\2c 0\.1\)\]{box-shadow:0 1px 2px rgba(59,130,246,0.1)}
.shadow-\[0_1px_3px_rgba\(0\2c 0\2c 0\2c 0\.05\)\]{box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.shadow-\[0_2px_12px_rgba\(0\2c 0\2c 0\2c 0\.03\)\]{box-shadow:0 2px 12px rgba(0,0,0,0.03)}
.shadow-\[0_2px_6px_rgba\(56\2c 189\2c 248\2c 0\.2\)\]{box-shadow:0 2px 6px rgba(56,189,248,0.2)}
.shadow-\[0_2px_6px_rgba\(59\2c 130\2c 246\2c 0\.3\)\]{box-shadow:0 2px 6px rgba(59,130,246,0.3)}
.shadow-\[0_2px_8px_rgba\(245\2c 158\2c 11\2c 0\.4\)\]{box-shadow:0 2px 8px rgba(245,158,11,0.4)}
.shadow-\[0_4px_12px_rgba\(0\2c 0\2c 0\2c 0\.12\)\]{box-shadow:0 4px 12px rgba(0,0,0,0.12)}
.shadow-\[1px_0_4px_rgba\(245\2c 158\2c 11\2c 0\.3\)\]{box-shadow:1px 0 4px rgba(245,158,11,0.3)}
.shadow-\[1px_0_4px_rgba\(251\2c 146\2c 60\2c 0\.2\)\]{box-shadow:1px 0 4px rgba(251,146,60,0.2)}
.shadow-\[1px_0_4px_rgba\(59\2c 130\2c 246\2c 0\.3\)\]{box-shadow:1px 0 4px rgba(59,130,246,0.3)}
.shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1)}
.shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,0.05)}
.ring-1.ring-blue-500\/20{box-shadow:0 0 0 1px rgba(59,130,246,0.2)}
.ring-2.ring-white{box-shadow:0 0 0 2px #fff}

/* 高斯模糊滤镜 */
.backdrop-blur{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.backdrop-blur-md{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.backdrop-blur-xl{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.backdrop-blur-\[2px\]{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
/* 动效过渡 */

/* 伪类操作状态精简 */
.last\:border-0:last-child{border-width:0}
.hover\:scale-105:hover{transform:scale(1.05)}
.hover\:bg-blue-700:hover{background-color:#1d4ed8}
.hover\:bg-gray-100\/50:hover{background-color:rgba(243,244,246,0.5)}
.hover\:bg-gray-50:hover{background-color:#f9fafb}
.hover\:bg-gray-50\/80:hover{background-color:rgba(249,250,251,0.8)}
.hover\:text-\[\#F8BF30\]:hover{color:#f8bf30}
.hover\:text-\[\#ff4d4f\]:hover{color:#ff4d4f}
.hover\:text-blue-600:hover{color:#2563eb}
.hover\:text-gray-600:hover{color:#4b5563}
.hover\:text-gray-700:hover{color:#374151}
.hover\:text-white:hover{color:#fff}
.hover\:text-red-500:hover{color:#ef4444}
.hover\:shadow-md:hover{box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1)}
.active\:scale-90:active{transform:scale(0.9)}
.active\:scale-95:active{transform:scale(0.95)}
.active\:scale-\[0\.98\]:active{transform:scale(0.98)}
.active\:bg-gray-100:active{background-color:#f3f4f6}
.active\:opacity-80:active{opacity:0.8}

.group:hover .group-hover\:opacity-90{opacity:0.9}
.group:active .group-active\:scale-75{transform:scale(0.75)}
.peer:checked ~ .peer-checked\:pointer-events-auto{pointer-events:auto}
.peer:checked ~ .peer-checked\:translate-y-0{transform:translateY(0)}
.peer:checked ~ .peer-checked\:scale-110{transform:scale(1.1)}
.peer:checked ~ .peer-checked\:text-\[\#F8BF30\]{color:#f8bf30}
.peer:checked ~ .peer-checked\:text-\[\#ff4d4f\]{color:#ff4d4f}
.peer:checked ~ .peer-checked\:opacity-100{opacity:1}


/* 响应式媒体查询 */
@media (min-width: 640px){
    .sm\:aspect-video{aspect-ratio:16/9}
    .sm\:gap-\[30px\]{gap:30px}
    .sm\:text-\[18px\]{font-size:18px}
}
@media (min-width: 768px){
    .md\:right-\[calc\(50\%-360px\)\]{right:calc(50% - 360px)}
    .md\:-mx-8{margin-left:-2rem;margin-right:-2rem}
    .md\:mx-0{margin-left:0;margin-right:0}
    .md\:hidden{display:none}
    .md\:rounded-b-xl{border-bottom-right-radius:0.75rem;border-bottom-left-radius:0.75rem}
    .md\:rounded-t-xl{border-top-left-radius:0.75rem;border-top-right-radius:0.75rem}
    .md\:p-5{padding:1.25rem}
    .md\:p-6{padding:1.5rem}
    .md\:px-0{padding-left:0;padding-right:0}
    .md\:px-6{padding-left:1.5rem;padding-right:1.5rem}
    .md\:px-8{padding-left:2rem;padding-right:2rem}
    .md\:pb-8{padding-bottom:2rem}
    .md\:pt-16{padding-top:4rem}
}

/* ==========================================
   页面定制 Component 样式
   ========================================== */
body { background-color: #f6f7f9; }
.mobile-container { max-width: 677px; margin: 0 auto; background-color: #ffffff; min-height: 100vh; min-height: 100dvh; position: relative; padding-bottom: 60px; }
@media (min-width: 768px) {
    .mobile-container { margin-top: 2rem; margin-bottom: 2rem; min-height: calc(100vh - 4rem); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
}
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }
.prose p { margin-bottom: 1.5rem; line-height: 1.8; color: #333333; font-size: 16px; letter-spacing: 0.02em; text-align: justify; }
@media (min-width: 768px) { .prose p { font-size: 17px; margin-bottom: 1.5rem; line-height: 1.85; } }
.prose strong { color: #111111; font-weight: 700; }
.prose ul, .prose ol { padding-left: 1.5rem; margin-bottom: 1.5rem; color: #333333; font-size: 16px; line-height: 1.8; }
@media (min-width: 768px) { .prose ul, .prose ol { font-size: 17px; } }
.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }
.prose li { margin-bottom: 0.75rem; padding-left: 0.25rem; }
.prose li::marker { color: #3b82f6; font-weight: bold; }

.h2-wrapper { text-align: center; margin-top: 4.5rem; margin-bottom: 4.5rem; position: relative; }
.h2-wrapper::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background-color: #e5e7eb; z-index: 0; }
.h2-wrapper h2 { font-size: 20px; font-weight: 700; color: #111111; background-color: #ffffff; margin: 0; display: inline-block; position: relative; z-index: 1; padding: 0 15px; }
@media (min-width: 768px) { .h2-wrapper { margin-top: 5rem; margin-bottom: 5rem; } .h2-wrapper h2 { font-size: 22px; } }

.prose h3 { font-size: 17px; font-weight: 700; color: #1e40af; margin-top: 2.5rem; margin-bottom: 1.5rem; background-color: #eff6ff; display: inline-block; padding: 0.3rem 0.8rem; border-radius: 0.375rem; }
@media (min-width: 768px) { .prose h3 { font-size: 18px; margin-top: 2.5rem; } }

.hide-scrollbar::-webkit-scrollbar { display: none; }
#product-cards-container { scroll-padding: 1rem; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }

.mt-8.pt-8.border-t-\[10px\] h3 { font-size: 16px !important; letter-spacing: -0.01em; }
.mt-8.pt-8.border-t-\[10px\] .text-gray-500 { color: #999 !important; font-size: 12px !important; }



/* 评论区样式优化 */
.cmt-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f3f4f6;
    content-visibility: auto;
    contain-intrinsic-size: 120px;
}

.cmt-card:last-child {
    border-bottom-width: 0;
}
.cmt-avatar { width: 2.5rem; height: 2.5rem; border-radius: 9999px; object-fit: cover; flex-shrink: 0; aspect-ratio: 1 / 1; }
#source-comments {
    min-height: 320px;
    display: block;
    content-visibility: auto;
    contain-intrinsic-size: 800px;
}
.comment-real-img { max-width: 50% !important; width: 50% !important; height: auto !important; display: block; }
.cmt-text { font-size: 16px; color: #333; line-height: 1.8; letter-spacing: 0.02em; text-align: justify; margin-top: 0.375rem; overflow-wrap: break-word; padding-right: 0.5rem; }
.cmt-text img { max-width: 70px !important; width: 70px !important; height: auto !important; }

.text-xs-tight { font-size: 12px; line-height: 1; }
.meta-name { font-size: 15px; color: #4b5563; font-weight: 500; }
.meta-date { font-size: 12px; color: #9ca3af; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-gap-sm { display: flex; align-items: center; gap: 0.375rem; }
.flex-gap-md { display: flex; align-items: center; gap: 0.5rem; }
.flex-grow-min { flex: 1 1 0%; min-width: 0px; }
.icon-sm { width: 1rem; height: 1rem; }
.reply-row { margin-top: 0.75rem; display: flex; align-items: flex-start; gap: 0.5rem; }
.reply-avatar { width: 1.5rem; height: 1.5rem; border-radius: 9999px; object-fit: cover; flex-shrink: 0; margin-top: 0.125rem; aspect-ratio: 1 / 1; }
.reply-text { font-size: 16px; color: #333; line-height: 1.8; letter-spacing: 0.02em; text-align: justify; margin-top: 0.25rem; overflow-wrap: break-word; padding-right: 0.5rem; }
.table-cell-center { display: flex; justify-content: center; align-items: center; padding-top: 0.875rem; padding-bottom: 0.875rem; }
.table-head { font-weight: 700; color: #222; font-size: 12.5px; line-height: 1.25; padding-right: 0.25rem; padding-top: 0.875rem; padding-bottom: 0.875rem; display: flex; align-items: center; gap: 0.375rem; padding-left: 0.25rem; }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}
.text-red-500 { color: #ef4444 !important; }
.comment-like-btn svg { fill: transparent; }
.comment-like-btn.text-red-500 svg { fill: currentColor; }

/* ==========================================
   性能优化与懒加载样式
   ========================================== */

/* 骨架屏闪烁动画 */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.skeleton,
.img-skeleton {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
}

/* 懒加载图片 */
.lazy-strict {
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
    background-color: #f3f4f6;
}

.lazy-strict.loaded,
.lazy-strict.lazy-error {
    opacity: 1;
}

/* 评论异步加载占位 */
.comments-loading {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #9ca3af;
    font-size: 13px;
}

.comments-loading-dot {
    width: 16px;
    height: 16px;
    border: 2px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 9999px;
    animation: comments-spin 0.8s linear infinite;
}

.comments-load-error {
    padding: 24px 0;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
}

@keyframes comments-spin {
    to {
        transform: rotate(360deg);
    }
}

/* 评论区容器 */
#source-comments {
    min-height: 320px;
    display: block;
    content-visibility: auto;
    contain-intrinsic-size: 800px;
}

/* 评论卡片 */
.cmt-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f3f4f6;
    content-visibility: auto;
    contain-intrinsic-size: 120px;
}

.cmt-card:last-child {
    border-bottom-width: 0;
}

/* 评论加载动画 */
@keyframes slide-in-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cmt-card.entering {
    animation: slide-in-up 0.35s ease-out forwards;
}

/* 评论回复容器优化 */
.replies-container {
    contain: layout style;
}

/* 首屏内容渲染优化 */
article.prose {
    contain: layout paint;
}

/* 产品卡片横向滚动容器优化 */
#product-cards-container {
    contain: layout;
    will-change: scroll-position;
}

/* 表格渲染优化 */
.grid.grid-cols-4,
.grid.grid-cols-\[140px_1fr_1fr\] {
    contain: layout paint;
}

/* 评论晒图比例 */
.aspect-\[9\/20\] {
    aspect-ratio: 9 / 20;
}

/* 图片解码和渲染优化 */
img {
    transform: translateZ(0);
}

/* 减少移动端点击高亮 */
button,
.img-zoomable,
.comment-like-btn {
    -webkit-tap-highlight-color: transparent;
}

/* 底部固定栏优化 */
.fixed.bottom-0 {
    transform: translateZ(0);
    will-change: transform;
}

/* 图片灯箱 */
.img-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    padding: 16px;
    -webkit-tap-highlight-color: transparent;
}

.img-lightbox.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.img-lightbox img {
    max-width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    object-fit: contain;
    border-radius: 8px;
    transform: scale(0.92);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.img-lightbox.active img {
    transform: scale(1);
}
/* 评论区普通实拍图比例修复 */
.comment-photo-wrap {
    width: 50%;
    max-width: 420px;
    margin-top: 0.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #f3f4f6;
}

.comment-photo-img {
    width: 100%;
    height: auto !important;
    display: block;
    object-fit: contain;
    border-radius: 0.5rem;
}

@media (max-width: 420px) {
    .comment-photo-wrap {
        width: 58%;
        max-width: 260px;
    }
}