/* ==========================================================================
   YunBala (云巴拉) - AI 英语学习企业站设计系统
   Style reference: LearnBe template (Tailwind CSS v4 + Quicksand + 紫靛渐变)
   ========================================================================== */

/* 1. Design Tokens
   ========================================================================== */
:root {
    --font-primary: 'Quicksand', -apple-system, BlinkMacSystemFont, 'PingFang SC',
        'Hiragino Sans GB', 'Microsoft YaHei', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --color-primary: #667eea;
    --color-primary-dark: #764ba2;
    --color-secondary: #f093fb;
    --color-secondary-dark: #f5576c;
    --color-accent: #4facfe;
    --color-accent-dark: #00f2fe;
    --color-ink: #1f2337;
    --color-body: #5b627a;

    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-hero: linear-gradient(135deg, #5b6fe0 0%, #8a5fc4 55%, #c05f9f 100%);

    --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, .05);
    --shadow-md: 0 6px 20px -4px rgba(15, 23, 42, .10), 0 2px 6px -2px rgba(15, 23, 42, .06);
    --shadow-lg: 0 16px 40px -8px rgba(15, 23, 42, .14), 0 4px 12px -4px rgba(15, 23, 42, .08);
    --shadow-glow: 0 10px 30px rgba(102, 126, 234, .35);

    --radius-md: .625rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    --transition-fast: .15s ease;
    --transition-normal: .3s ease;
    --transition-slow: .6s cubic-bezier(.4, 0, .2, 1);
}

/* 2. Base
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    color: var(--color-body);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    background: #ffffff;
}

.dark body {
    background: #0b1020;
    color: #aab2d0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    color: var(--color-ink);
    line-height: 1.25;
    letter-spacing: -.02em;
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
    color: #f4f6ff;
}

::selection {
    background: rgba(102, 126, 234, .25);
}

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background: #f1f3fa;
}

.dark ::-webkit-scrollbar-track {
    background: #131a30;
}

::-webkit-scrollbar-thumb {
    background: #c3cbe8;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9aa6d8;
}

/* 3. 工具类
   ========================================================================== */
.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.text-gradient-accent {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.bg-soft {
    background: #f6f8ff;
}

.dark .bg-soft {
    background: #101735;
}

.bg-gradient-brand {
    background: var(--gradient-primary);
}

.bg-gradient-accent {
    background: var(--gradient-accent);
}

/* 4. 导航栏
   ========================================================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    transition: all .35s ease;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
}

.dark .navbar {
    background: rgba(11, 16, 32, .82);
}

.navbar.scrolled {
    border-bottom-color: rgba(102, 126, 234, .14);
    box-shadow: 0 8px 30px -12px rgba(15, 23, 42, .12);
}

.nav-link {
    position: relative;
    color: #454c6b;
    font-weight: 500;
    font-size: .95rem;
    padding: .5rem .25rem;
    transition: color var(--transition-normal);
}

.dark .nav-link {
    color: #c6cde8;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--gradient-primary);
    transition: width var(--transition-normal);
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-primary-dark);
}

.dark .nav-link:hover,
.dark .nav-link.active {
    color: #a5b4ff;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.brand-badge {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .8rem;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 8px 20px -6px rgba(102, 126, 234, .55);
    transition: transform var(--transition-normal);
}

a:hover .brand-badge {
    transform: scale(1.06) rotate(-3deg);
}

/* 移动端菜单遮罩 */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(255, 255, 255, .98);
    backdrop-filter: blur(16px);
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
}

.dark .mobile-menu {
    background: rgba(11, 16, 32, .98);
}

.mobile-menu.open {
    transform: translateX(0);
}

.m-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1.1rem;
    border-radius: .8rem;
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--color-ink);
    transition: all var(--transition-fast);
}

.dark .m-link {
    color: #eef1ff;
}

.m-link:hover,
.m-link.active {
    background: rgba(102, 126, 234, .1);
    color: var(--color-primary-dark);
}

.dark .m-link:hover,
.dark .m-link.active {
    background: rgba(140, 158, 255, .12);
    color: #a5b4ff;
}

.m-sub {
    display: block;
    padding: .55rem 1.1rem;
    border-radius: .7rem;
    font-size: .92rem;
    color: var(--color-body);
    transition: all var(--transition-fast);
}

.dark .m-sub {
    color: #aab2d0;
}

.m-sub:hover {
    background: rgba(102, 126, 234, .08);
    color: var(--color-primary-dark);
}

/* 桌面端产品下拉菜单 */
.drop-parent {
    position: relative;
}

.dropdown-panel {
    position: absolute;
    top: calc(100% + .8rem);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 300px;
    background: #fff;
    border: 1px solid rgba(120, 130, 180, .14);
    border-radius: 1.1rem;
    box-shadow: var(--shadow-lg);
    padding: .55rem;
    opacity: 0;
    visibility: hidden;
    transition: all .28s cubic-bezier(.4, 0, .2, 1);
    z-index: 40;
}

.dark .dropdown-panel {
    background: #121a36;
    border-color: rgba(150, 168, 255, .16);
}

.drop-parent:hover .dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.drop-link {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .65rem .75rem;
    border-radius: .85rem;
    transition: all var(--transition-fast);
}

.drop-link:hover {
    background: rgba(102, 126, 234, .08);
}

.dark .drop-link:hover {
    background: rgba(140, 158, 255, .12);
}

.drop-link .drop-title {
    font-weight: 600;
    font-size: .93rem;
    color: var(--color-ink);
}

.dark .drop-link .drop-title {
    color: #eef1ff;
}

.drop-link:hover .drop-title {
    color: var(--color-primary-dark);
}

.drop-link .drop-desc {
    font-size: .78rem;
    color: var(--color-body);
    margin-top: .1rem;
}

.dark .drop-link .drop-desc {
    color: #8d96bd;
}

/* 5. 按钮
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-weight: 600;
    font-size: .95rem;
    padding: .8rem 1.75rem;
    border-radius: var(--radius-full);
    transition: all var(--transition-normal);
    cursor: pointer;
    border: none;
    line-height: 1.4;
}

.btn-primary {
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: 0 8px 22px -8px rgba(102, 126, 234, .6);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -8px rgba(102, 126, 234, .7);
}

.btn-secondary {
    background: var(--gradient-secondary);
    color: #fff;
    box-shadow: 0 8px 22px -8px rgba(240, 147, 251, .55);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -8px rgba(240, 147, 251, .7);
}

.btn-outline {
    background: transparent;
    color: var(--color-primary-dark);
    border: 1.5px solid rgba(102, 126, 234, .5);
}

.dark .btn-outline {
    color: #b9c4ff;
    border-color: rgba(150, 168, 255, .45);
}

.btn-outline:hover {
    background: rgba(102, 126, 234, .08);
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.btn-white {
    background: #fff;
    color: var(--color-primary-dark);
    box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .35);
}

.btn-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -10px rgba(0, 0, 0, .4);
}

.btn-lg {
    padding: 1rem 2.25rem;
    font-size: 1.05rem;
}

/* 6. Section 标题
   ========================================================================== */
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-primary-dark);
    padding: .42rem 1rem;
    border-radius: var(--radius-full);
    background: rgba(102, 126, 234, .1);
    border: 1px solid rgba(102, 126, 234, .22);
}

.dark .section-eyebrow {
    color: #a5b4ff;
    background: rgba(102, 126, 234, .16);
    border-color: rgba(140, 158, 255, .3);
}

.section-title {
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--color-ink);
}

.dark .section-title {
    color: #f4f6ff;
}

.section-sub {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    color: var(--color-body);
    font-size: 1.05rem;
}

/* 7. 卡片
   ========================================================================== */
.card {
    background: #fff;
    border: 1px solid rgba(120, 130, 180, .12);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.dark .card {
    background: #121a36;
    border-color: rgba(150, 168, 255, .12);
}

.card-hover:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(102, 126, 234, .35);
}

.icon-tile {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: .95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    transition: transform var(--transition-normal);
}

.card-hover:hover .icon-tile {
    transform: scale(1.08) rotate(-4deg);
}

/* 8. Hero
   ========================================================================== */
.hero {
    position: relative;
    background: var(--gradient-hero);
    color: #fff;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(600px 380px at 12% 18%, rgba(255, 255, 255, .16), transparent 62%),
        radial-gradient(520px 360px at 88% 22%, rgba(240, 147, 251, .28), transparent 60%),
        radial-gradient(640px 420px at 72% 88%, rgba(79, 172, 254, .30), transparent 62%),
        radial-gradient(460px 320px at 20% 86%, rgba(0, 242, 254, .18), transparent 60%);
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    opacity: .5;
    animation: float-orb 9s ease-in-out infinite;
    pointer-events: none;
}

@keyframes float-orb {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-26px) scale(1.06); }
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .86rem;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--radius-full);
    padding: .45rem 1.1rem;
    backdrop-filter: blur(6px);
}

.hero-title {
    font-size: clamp(2.4rem, 5.6vw, 4rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.035em;
    color: #fff;
}

.hero-sub {
    font-size: clamp(1.02rem, 1.6vw, 1.2rem);
    color: rgba(255, 255, 255, .85);
    line-height: 1.8;
}

.stat-number {
    font-size: clamp(1.7rem, 2.6vw, 2.3rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
}

.dark .stat-number {
    color: #fff;
}

/* 内页 Hero */
.page-hero {
    position: relative;
    background: var(--gradient-hero);
    color: #fff;
    padding-top: 9.5rem;
    padding-bottom: 5.5rem;
    overflow: hidden;
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(560px 340px at 84% 20%, rgba(240, 147, 251, .30), transparent 60%),
        radial-gradient(520px 360px at 10% 90%, rgba(0, 242, 254, .20), transparent 60%);
}

.page-hero h1 {
    color: #fff;
    font-size: clamp(2rem, 4.6vw, 3.2rem);
    font-weight: 700;
    letter-spacing: -.03em;
}

.page-hero .crumb {
    color: rgba(255, 255, 255, .72);
    font-size: .92rem;
}

.page-hero .crumb a {
    color: #fff;
    font-weight: 600;
}

.page-hero .crumb a:hover {
    text-decoration: underline;
}

/* 9. 分隔装饰
   ========================================================================== */
.divider-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    line-height: 0;
}

/* 10. 滚动显现动画
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .8s cubic-bezier(.4, 0, .2, 1), transform .8s cubic-bezier(.4, 0, .2, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

/* 11. FAQ 手风琴
   ========================================================================== */
.faq-item {
    border: 1px solid rgba(120, 130, 180, .16);
    border-radius: var(--radius-lg);
    background: #fff;
    overflow: hidden;
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.dark .faq-item {
    background: #121a36;
    border-color: rgba(150, 168, 255, .14);
}

.faq-item.open {
    border-color: rgba(102, 126, 234, .45);
    box-shadow: var(--shadow-md);
}

.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.4rem;
    text-align: left;
    font-weight: 600;
    color: var(--color-ink);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 1rem;
}

.dark .faq-q {
    color: #eef1ff;
}

.faq-icon {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(102, 126, 234, .12);
    color: var(--color-primary-dark);
    transition: transform .35s ease, background .3s ease;
}

.dark .faq-icon {
    color: #a5b4ff;
    background: rgba(140, 158, 255, .16);
}

.faq-item.open .faq-icon {
    transform: rotate(45deg);
    background: var(--gradient-primary);
    color: #fff;
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .45s ease;
}

.faq-a-inner {
    padding: 0 1.4rem 1.3rem;
    font-size: .97rem;
}

/* 12. 页脚
   ========================================================================== */
.site-footer {
    background: #10142b;
    color: #9aa3c7;
}

.site-footer h4 {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1.1rem;
}

.site-footer a {
    color: #9aa3c7;
    transition: color var(--transition-fast);
}

.site-footer a:hover {
    color: #fff;
}

.footer-social {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .08);
    color: #c3cbe8 !important;
    transition: all var(--transition-normal);
}

.footer-social:hover {
    background: var(--gradient-primary);
    color: #fff !important;
    transform: translateY(-3px);
}

/* 13. 其他组件
   ========================================================================== */
/* 特性列表项 */
.feature-check {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(52, 211, 153, .16);
    color: #10b981;
    flex-shrink: 0;
    margin-top: .2rem;
}

.dark .feature-check {
    background: rgba(52, 211, 153, .2);
    color: #34d399;
}

/* 数据卡片 */
.kpi-card {
    position: relative;
    overflow: hidden;
}

.kpi-card::after {
    content: "";
    position: absolute;
    right: -1.6rem;
    top: -1.6rem;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(102, 126, 234, .16), transparent 70%);
}

/* 手机样机 */
.phone-frame {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 9 / 19;
    border-radius: 2.4rem;
    background: linear-gradient(160deg, #1e2440, #0d1124);
    border: 6px solid #2a3152;
    box-shadow: 0 30px 60px -18px rgba(15, 23, 42, .5);
    overflow: hidden;
}

/* 时间线 */
.timeline {
    position: relative;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 1.05rem;
    top: .4rem;
    bottom: .4rem;
    width: 2px;
    background: linear-gradient(180deg, #667eea, #f093fb, #4facfe);
    border-radius: 2px;
    opacity: .5;
}

.timeline-dot {
    position: absolute;
    left: 0;
    top: .35rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #667eea;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .78rem;
    color: #667eea;
    z-index: 1;
}

.dark .timeline-dot {
    background: #101735;
}

/* 呼吸光晕按钮（hero 主 CTA） */
.btn-glow {
    position: relative;
    animation: glow-pulse 2.6s ease-in-out infinite;
}

@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .35), 0 12px 30px -8px rgba(0, 0, 0, .35); }
    50% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0), 0 12px 30px -8px rgba(0, 0, 0, .35); }
}

/* 13b. Tailwind 兼容工具类（补齐编译产物中缺失的类）
   ========================================================================== */
.md\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }
.pb-24 { padding-bottom: 6rem; }
.md\:mt-0 { margin-top: 0; }
.md\:w-1\/2 { width: 50%; }
.lg\:w-1\/2 { width: 50%; }
.w-14 { width: 3.5rem; }
.h-14 { height: 3.5rem; }
.sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dark\:bg-gray-100 { background-color: #f3f4f6; }
.z-30 { z-index: 30; }
.z-60 { z-index: 60; }
.tracking-widest { letter-spacing: .1em; }
.list-none { list-style: none; }
.border-none { border: none; }
.text-current { color: currentColor; }
.stroke-current { stroke: currentColor; }

@media (min-width: 768px) {
    .md\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }
}

@media (min-width: 1024px) {
    .lg\:w-1\/2 { width: 50%; }
}

/* 带透明度的背景 */
.bg-white\/80 { background-color: rgb(255 255 255 / .8); }
.bg-white\/90 { background-color: rgb(255 255 255 / .9); }
.bg-black\/40 { background-color: rgb(0 0 0 / .4); }
.bg-black\/50 { background-color: rgb(0 0 0 / .5); }
.bg-black\/60 { background-color: rgb(0 0 0 / .6); }
.bg-black\/70 { background-color: rgb(0 0 0 / .7); }

.backdrop-blur-lg {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* 品牌色文字 hover */
.link-primary {
    transition: color var(--transition-fast);
}

.link-primary:hover {
    color: var(--color-primary-dark);
}

.dark .link-primary:hover {
    color: #a5b4ff;
}

/* 14. 响应式
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   15. Tailwind 兼容工具类（编译产物缺失项的完整补充）
   ========================================================================== */
/* ---- 文本任意尺寸 ---- */
.text-\[0\.62rem\] { font-size: .62rem; }
.text-\[0\.65rem\] { font-size: .65rem; }
.text-\[0\.68rem\] { font-size: .68rem; }
.text-\[0\.7rem\] { font-size: .7rem; }
.text-\[0\.72rem\] { font-size: .72rem; }
.text-\[0\.98rem\] { font-size: .98rem; }

/* ---- 间距 ---- */
.gap-7 { gap: 1.75rem; }
.gap-14 { gap: 3.5rem; }
.p-3\.5 { padding: .875rem; }
.p-7 { padding: 1.75rem; }
.p-9 { padding: 2.25rem; }
.pt-36 { padding-top: 9rem; }
.pt-7 { padding-top: 1.75rem; }
.pb-24 { padding-bottom: 6rem; }
.pl-14 { padding-left: 3.5rem; }
.mb-0\.5 { margin-bottom: .125rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-7 { margin-bottom: 1.75rem; }
.mb-9 { margin-bottom: 2.25rem; }
.mb-14 { margin-bottom: 3.5rem; }
.mt-0\.5 { margin-top: .125rem; }
.mt-9 { margin-top: 2.25rem; }
.py-1\.5 { padding-top: .375rem; padding-bottom: .375rem; }
.h-1\.5 { height: .375rem; }
.h-2\.5 { height: .625rem; }
.h-3\.5 { height: .875rem; }
.h-11 { height: 2.75rem; }
.h-36 { height: 9rem; }
.h-44 { height: 11rem; }
.h-56 { height: 14rem; }
.w-3\.5 { width: .875rem; }
.w-36 { width: 9rem; }
.w-44 { width: 11rem; }
.w-56 { width: 14rem; }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }
.space-y-10 > :not([hidden]) ~ :not([hidden]) { margin-top: 2.5rem; }
.opacity-70 { opacity: .7; }
.opacity-80 { opacity: .8; }

/* ---- 负偏移 ---- */
.-bottom-14 { bottom: -3.5rem; }
.-left-8 { left: -2rem; }
.-right-10 { right: -2.5rem; }

/* ---- 其他缺失工具类 ---- */
.flex-row-reverse { flex-direction: row-reverse; }
.mx-0 { margin-left: 0; margin-right: 0; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.text-cyan-300 { color: #67e8f9; }
.hover\:\!bg-white\/10:hover { background-color: rgb(255 255 255 / .1) !important; }

/* ---- hover / focus ---- */
.hover\:underline:hover { text-decoration: underline; }
.hover\:bg-gray-100:hover { background-color: #f3f4f6; }
.focus\:outline-none:focus { outline: none; }
.focus\:ring-2:focus { --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width, 0px) var(--tw-ring-offset-color, #fff); --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, #6366f1); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.focus\:ring-indigo-400\/60:focus { --tw-ring-color: rgb(129 140 248 / .6); }
.focus\:border-indigo-400:focus { border-color: #818cf8; }
.border-red-400 { border-color: #f87171; }

/* ---- 白色透明度色板 ---- */
.bg-white\/5 { background-color: rgb(255 255 255 / .05); }
.bg-white\/10 { background-color: rgb(255 255 255 / .1); }
.bg-white\/12 { background-color: rgb(255 255 255 / .12); }
.bg-white\/15 { background-color: rgb(255 255 255 / .15); }
.bg-white\/20 { background-color: rgb(255 255 255 / .2); }
.border-white\/10 { border-color: rgb(255 255 255 / .1); }
.border-white\/25 { border-color: rgb(255 255 255 / .25); }
.border-white\/50 { border-color: rgb(255 255 255 / .5); }
.text-white\/60 { color: rgb(255 255 255 / .6); }
.text-white\/70 { color: rgb(255 255 255 / .7); }
.text-white\/75 { color: rgb(255 255 255 / .75); }
.text-white\/80 { color: rgb(255 255 255 / .8); }
.text-white\/85 { color: rgb(255 255 255 / .85); }
.text-white\/90 { color: rgb(255 255 255 / .9); }
.bg-emerald-300 { background-color: #6ee7b7; }
.bg-amber-300\/40 { background-color: rgb(252 211 77 / .4); }
.bg-red-400\/40 { background-color: rgb(248 113 113 / .4); }

/* ---- 重要修饰符 ---- */
.\!py-2\.5 { padding-top: .625rem !important; padding-bottom: .625rem !important; }
.\!px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.\!text-sm { font-size: .875rem !important; }
.\!text-white { color: #fff !important; }
.\!border-white\/50 { border-color: rgb(255 255 255 / .5) !important; }
.min-w-40 { min-width: 10rem; }

/* ---- 深色模式工具类 ---- */
.dark .dark\:hidden { display: none; }
.dark .dark\:block { display: block; }
.dark .dark\:opacity-0 { opacity: 0; }
.dark .dark\:bg-gray-800 { background-color: #1f2937; }
.dark .dark\:border-gray-700 { border-color: #374151; }
.dark .dark\:hover\:bg-gray-800:hover { background-color: #1f2937; }
.dark .dark\:text-gray-300 { color: #d1d5db; }
.dark .dark\:text-gray-400 { color: #9ca3af; }
.dark .dark\:text-white { color: #fff; }
.dark .dark\:text-emerald-300 { color: #6ee7b7; }
.dark .dark\:text-emerald-400 { color: #34d399; }
.dark .dark\:text-indigo-300 { color: #a5b4fc; }
.dark .dark\:text-pink-300 { color: #f9a8d4; }

/* ---- 响应式工具类 ---- */
@media (min-width: 640px) {
    .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .sm\:flex-row { flex-direction: row; }
    .sm\:inline-flex { display: inline-flex; }
    .sm\:gap-3 { gap: .75rem; }
    .sm\:gap-4 { gap: 1rem; }
    .sm\:w-24 { width: 6rem; }
}

@media (min-width: 768px) {
    .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\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }
    .md\:pb-28 { padding-bottom: 7rem; }
}

@media (min-width: 1024px) {
    .lg\:flex { display: flex; }
    .lg\:hidden { display: none; }
    .lg\:flex-row { flex-direction: row; }
    .lg\:h-20 { height: 5rem; }
    .lg\:pt-44 { padding-top: 11rem; }
    .lg\:pb-32 { padding-bottom: 8rem; }
    .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
    .lg\:px-16 { padding-left: 4rem; padding-right: 4rem; }
    .lg\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
    .lg\:p-10 { padding: 2.5rem; }
    .lg\:p-12 { padding: 3rem; }
    .lg\:p-14 { padding: 3.5rem; }
    .lg\:gap-10 { gap: 2.5rem; }
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
    .lg\:col-span-3 { grid-column: span 3 / span 3; }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lg\:text-sm { font-size: .875rem; }
    .lg\:text-lg { font-size: 1.125rem; }
    .lg\:text-2xl { font-size: 1.5rem; }
    .lg\:text-4xl { font-size: 2.25rem; }
    .lg\:w-96 { width: 24rem; }
    .lg\:w-auto { width: auto; }
    .lg\:min-w-40 { min-width: 10rem; }
}