/* ==========================================================================
   1. 核心变量定义与全局初始化
   ========================================================================== */
:root {
    /* グラデーション用カラー定義 */
    --gradient-primary-from: rgb(59, 130, 246);       /* blue-500 */
    --gradient-primary-to: rgb(236, 72, 153);         /* pink-500 */
    --gradient-primary-from-hover: rgb(37, 99, 235); /* blue-600 */
    --gradient-primary-to-hover: rgb(219, 39, 119);   /* pink-600 */

    --gradient-text-from: rgb(37, 99, 235);          /* blue-600 */
    --gradient-text-to: rgb(236, 72, 153);            /* pink-500 */

    --gradient-icon-from: rgb(96, 165, 250);          /* blue-400 */
    --gradient-icon-to: rgb(244, 114, 182);           /* pink-400 */

    --gradient-bg-from: rgb(239, 246, 255);            /* blue-50 */
    --gradient-bg-via: rgb(252, 231, 243);             /* pink-50 */
    --gradient-bg-to: rgb(250, 245, 255);              /* purple-50 */

    --gradient-light-from: rgb(239, 246, 255);          /* blue-50 */
    --gradient-light-to: rgb(252, 231, 243);            /* pink-50 */
}

/* 核心基础盒模型重置 */
*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
}

::after, ::before {
    --tw-content: '';
}

/* ==========================================================================
   2. 基础标签与表单环境重整（包含编辑器警告修复）
   ========================================================================== */
html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    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;
}

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;
}

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;
    color: inherit;
    margin: 0;
    padding: 0;
}

button, select {
    text-transform: none;
}

button, input[type=button], input[type=reset], input[type=submit] {
    -webkit-appearance: button;
    appearance: button;
    background-color: transparent;
    background-image: none;
}

[type=search] {
    -webkit-appearance: textfield;
    appearance: textfield;
    outline-offset: -2px;
}

::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

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;
}

img, video {
    max-width: 100%;
    height: auto;
}

[hidden] {
    display: none;
}

/* ==========================================================================
   3. 公共 UI 与专属渐变样式组
   ========================================================================== */
.gradient-text {
    background: linear-gradient(to right, var(--gradient-text-from), var(--gradient-text-to));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-bg {
    background: linear-gradient(to bottom right, var(--gradient-bg-from), var(--gradient-bg-via), var(--gradient-bg-to));
}

.gradient-btn {
    background: linear-gradient(to right, var(--gradient-primary-from), var(--gradient-primary-to));
    /* 移除白色边框，让按钮根据自身类（如 border-transparent 或 border-white）决定边框样式 */
}

.gradient-btn:hover {
    background: linear-gradient(to right, var(--gradient-primary-from-hover), var(--gradient-primary-to-hover));
}

.gradient-icon {
    background: linear-gradient(to bottom right, var(--gradient-icon-from), var(--gradient-icon-to));
}

.gradient-light {
    background: linear-gradient(to right, var(--gradient-light-from), var(--gradient-light-to));
}

.hero-bg-custom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(3px);
    transform: scale(1.05); 
}

.backdrop-blur-xl {
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    backdrop-filter: blur(28px) saturate(160%);
}

.backdrop-blur-xl h2,
.backdrop-blur-xl p,
.backdrop-blur-xl span {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   4. 独立网页专属隔离限宽容器（✨ 核心修正：已变更为符合全站标准的 100% 宽度适配）
   ========================================================================== */
.pairs-sub-page-wrapper {
    width: 100% !important;     /* 彻底废弃 70%，采用 100% 让多端完美兼容 */
    max-width: 56rem !important;  /* 统一将最大宽度硬锁在 4xl (896px) */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
    box-sizing: border-box !important;
}

@media (min-width: 640px) {
    .pairs-sub-page-wrapper {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }
}

/* 强效补全底层原子样式（防止卡片变白、边框消失） */
.bg-white\/80 { background-color: rgba(255, 255, 255, 0.8) !important; }
.backdrop-blur-sm { backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; }
.border { border: 1px solid #e5e7eb !important; }
.border-b { border-bottom: 1px solid #e5e7eb !important; }
.border-t { border-top: 1px solid #e5e7eb !important; }
.border-white\/50 { border-color: rgba(255, 255, 255, 0.5) !important; }
.border-pink-200 { border-color: rgb(251, 207, 232) !important; }
.border-gray-200 { border-color: rgb(229, 231, 235) !important; }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important; }
.from-pink-50 { --tw-gradient-stops: #fdf2f8, #faf5ff !important; }
.to-purple-50 { --tw-gradient-stops: #fdf2f8, #faf5ff !important; }
.from-pink-500 { --tw-gradient-stops: #ec4899, #a855f7 !important; }
.to-purple-500 { --tw-gradient-stops: #ec4899, #a855f7 !important; }

/* 完美解决 Pairs 页面多媒体对比无法并排的问题 */
.grid { display: grid !important; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
@media (min-width: 640px) {
    .sm\:grid-cols-2 { 
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 
    }
}

/* ==========================================================================
   5. 实用通用原子类样式组（Tailwind 原版无损注入）
   ========================================================================== */
.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0px}.bottom-0{bottom:0px}.right-0{right:0px}.top-0{top:0px}.z-50{z-index:50}.z-10{z-index:10}.order-1{order:1}.order-2{order:2}.mx-auto{margin-left:auto;margin-right:auto}.-mr-4{margin-right:-1rem}.-mt-4{margin-top:-1rem}.mb-1{margin-bottom:0.25rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:0.5rem}.mb-3{margin-bottom:0.75rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-10{margin-bottom:2.5rem}.mt-10{margin-top:2.5rem}.mt-2{margin-top:0.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.h-8{height:2rem}.h-10{height:2.5rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-20{height:5rem}.h-5{height:1.25rem}.h-4{height:1rem}.h-64{height:16rem}.h-7{height:1.75rem}.h-\[50px\]{height:50px}.h-\[600px\]{height:600px}.h-auto{height:auto}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-8{width:2rem}.w-10{width:2.5rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-20{width:5rem}.w-5{width:1.25rem}.w-4{width:1rem}.w-7{width:1.75rem}.w-\[calc\(100\%\+1\.3px\)\]{width:calc(100% + 1.3px)}.w-full{width:100%}.max-w-5xl{max-width:64rem}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-7xl{max-width:80rem}.flex-shrink-0{flex-shrink:0}
.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-7xl{max-width:80rem}.flex-shrink-0{flex-shrink:0}
.rotate-180{transform:rotate(180deg)}.rotate-6{transform:rotate(6deg)}.-rotate-6{transform:rotate(-6deg)}.resize-none{resize:none}
.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.ログインitems-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.gap-10{gap:2.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-1{gap:0.25rem}
.space-y-4 > :not([hidden]) ~ :not([hidden]){margin-top:1rem}.space-y-6 > :not([hidden]) ~ :not([hidden]){margin-top:1.5rem}
.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-2xl{border-radius:1rem}.rounded-xl{border-radius:0.75rem}
.border-transparent{border-color:transparent}.border-white{border-color:#fff}.border-2{border-width:2px !important}
.bg-black{background-color:#000}.bg-blue-100{background-color:#dbeafe}.bg-blue-50{background-color:#eff6ff}.bg-gray-900{background-color:#111827}.bg-gray-900\/70{background-color:rgb(17 24 39 / 0.7)}.bg-white{background-color:#fff}.bg-white\/10{background-color:rgb(255 255 255 / 0.1)}.bg-gray-50{background-color:#f9fafb}
.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}
.from-black\/40{--tw-gradient-from:rgb(0 0 0 / 0.4);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, rgb(0 0 0 / 0))}.from-blue-100{--tw-gradient-from:#dbeafe;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, rgb(219 234 254 / 0))}.from-blue-300{--tw-gradient-from:#93c5fd;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, rgb(147 197 253 / 0))}.from-blue-500{--tw-gradient-from:#3b82f6;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, rgb(59 130 246 / 0))}.from-gray-900{--tw-gradient-from:#111827;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, rgb(17 24 39 / 0))}.from-purple-100{--tw-gradient-from:#f3e8ff;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, rgb(243 232 255 / 0))}
.via-black\/30{--tw-gradient-stops:var(--tw-gradient-from), rgb(0 0 0 / 0.3) 50%, var(--tw-gradient-to)}.via-gray-900\/90{--tw-gradient-stops:var(--tw-gradient-from), rgb(17 24 39 / 0.9) 50%, var(--tw-gradient-to)}.via-pink-300{--tw-gradient-stops:var(--tw-gradient-from), #f9a8d4 50%, var(--tw-gradient-to)}
.to-black\/60{--tw-gradient-to:rgb(0 0 0 / 0.6)}.to-blue-50{--tw-gradient-to:#eff6ff}.to-gray-900{--tw-gradient-to:#111827}.to-pink-50{--tw-gradient-to:#fdf2f8}.to-pink-500{--tw-gradient-to:#ec4899}.to-purple-300{--tw-gradient-to:#d8b4fe}.to-purple-50{--tw-gradient-to:#faf5ff}
.bg-clip-text{-webkit-background-clip:text;background-clip:text}.fill-gray-900{fill:#111827}.object-cover{object-fit:cover}.p-8{padding:2rem}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-16{padding-bottom:4rem}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.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-base{font-size:1rem;line-height:1.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-extrabold{font-weight:800}.uppercase{text-transform:uppercase}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-0.025em}.tracking-wider{letter-spacing:0.05em}.text-gray-700{color:#372935}.text-white{color:#fff}.text-blue-100{color:#dbeafe}.text-blue-600{color:#2563eb}.text-gray-100{color:#f3f4f6}.text-gray-100\/90{color:rgba(243,244,246,0.9)}.text-gray-300{color:#d1d5db}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-800{color:#1f2937}.text-gray-900{color:#111827}.text-green-400{color:#4ade80}.text-pink-400{color:#f472b6}.text-pink-500{color:#ec4899}.text-red-500{color:#ef4444}.text-transparent{color:transparent}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-30{opacity:0.3}.opacity-50{opacity:0.5}.mix-blend-multiply{mix-blend-mode:multiply}.shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,0.1)}.shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,0.05)}.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,0.25)}.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1)}.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,0.1)}.ring-1{box-shadow:0 0 0 1px rgb(59 130 246 / 0.5)}.ring-4{box-shadow:0 0 0 4px rgb(59 130 246 / 0.5)}.ring-gray-200{--tw-ring-color:#e5e7eb}.ring-white\/20{--tw-ring-color:rgba(255,255,255,0.2)}.drop-shadow-2xl{filter:drop-shadow(0 25px 25px rgba(0,0,0,0.15))}.drop-shadow-lg{filter:drop-shadow(0 10px 8px rgba(0,0,0,0.04))}.drop-shadow-md{filter:drop-shadow(0 4px 3px rgba(0,0,0,0.07))}.drop-shadow-xl{filter:drop-shadow(0 20px 13px rgba(0,0,0,0.03))}
.bg-green-500 { background-color: rgb(34, 197, 94) !important; }.bg-green-500:hover { background-color: rgb(22, 163, 74) !important; }
.hover\:-translate-y-1:hover{transform:translateY(-0.25rem)}.hover\:-translate-y-0\.5:hover{transform:translateY(-0.125rem)}.hover\:bg-gray-100:hover{background-color:#f3f4f6}.hover\:bg-white\/20:hover{background-color:rgba(255,255,255,0.2)}.hover\:from-pink-600:hover{--tw-gradient-from:#db2777}.hover\:to-purple-600:hover{--tw-gradient-to:#9333ea}.hover\:text-blue-600:hover{color:#2563eb}.hover\:text-white:hover{color:#fff}.hover\:text-gray-800:hover{color:#1f2937}.hover\:shadow-lg:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1)}.hover\:shadow-xl:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,0.1)}.focus\:border-blue-400:focus{border-color:#60a5fa}.focus\:outline-none:focus{outline:none}.focus\:ring-2:focus{box-shadow:0 0 0 2px #bfdbfe}.focus\:ring-blue-200:focus{--tw-ring-color:#bfdbfe}

@media (min-width: 640px){.sm\:mb-12{margin-bottom:3rem}.sm\:mb-16{margin-bottom:4rem}.sm\:mb-4{margin-bottom:1rem}.sm\:mb-6{margin-bottom:1.5rem}.sm\:mb-8{margin-bottom:2rem}.sm\:mt-12{margin-top:3rem}.sm\:mt-3{margin-top:0.75rem}.sm\:mt-6{margin-top:1.5rem}.sm\:mt-8{margin-top:2rem}.sm\:block{display:block}.sm\:hidden{display:none}.sm\:h-10{height:2.5rem}.sm\:h-16{height:4rem}.sm\:h-24{height:6rem}.sm\:h-8{height:2rem}.sm\:h-80{height:20rem}.sm\:h-\[700px\]{height:700px}.sm\:h-\[80px\]{height:80px}.sm\:w-10{width:2.5rem}.sm\:w-16{width:4rem}.sm\:w-24{width:6rem}.sm\:w-8{width:2rem}.sm\:w-auto{width:auto}.sm\:flex-row{flex-direction:row}.sm\:items-start{align-items:flex-start}.sm\:gap-10{gap:2.5rem}.sm\:gap-6{gap:1.5rem}.sm\:gap-8{gap:2rem}.sm\:space-y-5 > :not([hidden]) ~ :not([hidden]){margin-top:1.25rem}.sm\:rounded-3xl{border-radius:1.5rem}.sm\:p-8{padding:2rem}.sm\:p-10{padding:2.5rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-5{padding-top:1.25rem;padding-bottom:1.25rem}.sm\:px-10{padding-left:2.5rem;padding-right:2.5rem}.sm\:px-12{padding-left:3rem;padding-right:3rem}.sm\:py-12{padding-top:3rem;padding-bottom:3rem}.sm\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}.sm\:py-16{padding-top:4rem;padding-bottom:4rem}.sm\:py-24{padding-top:6rem;padding-bottom:6rem}.sm\:py-32{padding-top:8rem;padding-bottom:8rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-base{font-size:1rem;line-height:1.5rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-sm{font-size:0.875rem;line-height:1.25rem}}
@media (min-width: 768px){.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-6xl{font-size:3.75rem;line-height:1}}
@media (min-width: 1024px){.lg\:order-1{order:1}.lg\:order-2{order:2}.lg\:h-96{height:24rem}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:gap-16{gap:4rem}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:text-2xl{font-size:1.5rem;line-height:2rem}.lg\:text-4xl{font-size:2.25rem;line-height:2.5rem}.lg\:text-5xl{font-size:3rem;line-height:1}.lg\:text-7xl{font-size:4.5rem;line-height:1}.lg\:max-w-2xl{max-width:42rem}}