/* ==========================================================================
   app.css —— 前台站点公用样式（不经过 Tailwind 编译）
   Tailwind 编译产物见 tailwind.min.css；编辑器专用样式见 editor.css。
   ========================================================================== */

/* 自定义滚动条（深色页头与编辑器上更协调） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #64748b; background-clip: padding-box; border: 2px solid transparent; }

:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }

/* 首页数字跳动 */
.count-animate { animation: countUp 0.5s ease-out; }
@keyframes countUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 滚动出现动效（[data-reveal]，见 app.js） */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* 透明棋盘格（首页示例图、编辑器共用）——中灰版，深色/浅色图标都看得清 */
.ie-checker {
    background-color: #2b3646;
    background-image:
        linear-gradient(45deg, #3d4a5e 25%, transparent 25%),
        linear-gradient(-45deg, #3d4a5e 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #3d4a5e 75%),
        linear-gradient(-45deg, transparent 75%, #3d4a5e 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
/* 浅色棋盘格（营销页白底上使用） */
.ie-checker-light {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #e2e8f0 25%, transparent 25%),
        linear-gradient(-45deg, #e2e8f0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e2e8f0 75%),
        linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

/* 首页 Hero 背景：网格 + 光晕 */
.hero-bg {
    background-color: #0b1220;
    background-image:
        radial-gradient(60% 50% at 50% 0%, rgba(59,130,246,.35) 0%, rgba(59,130,246,0) 70%),
        linear-gradient(rgba(148,163,184,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.07) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
}

/* 首页里“编辑器截图”式的示意窗口 */
.mock-window { box-shadow: 0 30px 80px -30px rgba(59,130,246,.45), 0 20px 40px -20px rgba(0,0,0,.6); }
.mock-pixels { image-rendering: pixelated; }

/* FAQ 手风琴箭头 */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform .2s ease; }