:root {
    color-scheme: dark;
    --template-safe-x: clamp(20px, 4vw, 64px);
    --template-radius: 18px;
    --template-ease: cubic-bezier(.2,.75,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #080d18; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.template-page {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.template-page a { text-decoration: none; }
body.template-page img, body.template-page svg { max-width: 100%; }
body.template-page h1, body.template-page h2, body.template-page h3,
body.template-page p { overflow-wrap: normal; word-break: normal; }
body.template-page h1, body.template-page h2 { text-wrap: balance; }
body.template-page p { text-wrap: pretty; }
body.template-page button, body.template-page a { -webkit-tap-highlight-color: transparent; }
body.template-page :focus-visible { outline: 3px solid #38bdf8; outline-offset: 4px; }
body.template-page > #templateContent,
body.template-page > #templateContent > [class$="-w"] { width: 100%; min-width: 0; }
body.template-page [class*="-hero"] > *,
body.template-page [class*="-grid"] > * { min-width: 0; }
.template-generated-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -.12em; }

.template-skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 9999;
    padding: 10px 14px;
    color: #fff;
    background: #0f172a;
    border-radius: 10px;
    transform: translateY(-150%);
}
.template-skip-link:focus { transform: translateY(0); }
.template-mobile-header, .template-mobile-menu { display: none; }

/* t01 的 fixed 侧栏不参与 Grid 排版，原实现令主内容宽度变成 0。 */
body.template-page.template-t01 .t01-w { display: block; width: 100%; }
body.template-page.template-t01 .t01-main {
    width: calc(100% - 240px);
    min-width: 0;
    margin-left: 240px;
}
body.template-page.template-t01 .t01-hero {
    width: 100%;
    grid-template-columns: minmax(300px, .9fr) minmax(420px, 1.1fr);
    padding-inline: clamp(36px, 5vw, 88px);
}
body.template-page.template-t01 .t01-stats-grid,
body.template-page.template-t01 .t01-feat-grid,
body.template-page.template-t01 .t01-chart-row,
body.template-page.template-t01 .t01-test-grid,
body.template-page.template-t01 .t01-foot-grid { margin-inline: auto; }

@media (max-width: 1100px) {
    body.template-page.template-t01 .t01-sidebar { display: none; }
    body.template-page.template-t01 .t01-main { width: 100%; margin-left: 0; }
    body.template-page.template-t01 .t01-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 120px; }
}

@media (max-width: 980px) {
    body.template-page { padding-top: 64px; }
    body.template-page.template-menu-open { overflow: hidden; }
    .template-mobile-header {
        position: fixed;
        inset: 0 0 auto;
        z-index: 2000;
        height: 64px;
        padding: 0 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(7, 12, 23, .86);
        border-bottom: 1px solid rgba(255,255,255,.08);
        backdrop-filter: blur(18px) saturate(130%);
        color: #fff;
    }
    .template-mobile-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .04em; }
    .template-mobile-brand img { width: 30px; height: 30px; }
    .template-menu-toggle { width: 42px; height: 42px; display: grid; place-content: center; gap: 5px; border: 0; border-radius: 12px; color: #fff; background: rgba(255,255,255,.07); }
    .template-menu-toggle span { display: block; width: 20px; height: 2px; border-radius: 3px; background: currentColor; transition: transform .25s ease, opacity .25s ease; }
    .template-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .template-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .template-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .template-mobile-menu {
        position: fixed;
        inset: 64px 0 0;
        z-index: 1999;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 24px 18px max(24px, env(safe-area-inset-bottom));
        background: rgba(7, 12, 23, .97);
        backdrop-filter: blur(24px);
        transform: translateX(105%);
        transition: transform .32s var(--template-ease);
        visibility: hidden;
    }
    .template-mobile-menu.is-open { transform: translateX(0); visibility: visible; }
    .template-mobile-menu a { padding: 15px 16px; border-radius: 13px; color: rgba(255,255,255,.78); font-size: 16px; font-weight: 600; background: rgba(255,255,255,.035); }
    .template-mobile-menu a:hover { color: #fff; background: rgba(255,255,255,.08); }
    .template-mobile-menu .template-mobile-login { margin-top: 10px; color: #fff; text-align: center; background: linear-gradient(135deg,#4a90d9,#00d4aa); }

    body.template-page > #templateContent > [class$="-w"] > nav,
    body.template-page.template-t01 .t01-sidebar { display: none !important; }
    body.template-page [class*="-hero"] { padding-left: 20px !important; padding-right: 20px !important; }
    body.template-page [class*="-hero"] h1 { font-size: clamp(2.15rem, 11vw, 3.2rem) !important; line-height: 1.08 !important; }
    body.template-page [class*="-hero"] p { font-size: 15px !important; line-height: 1.75 !important; }
    body.template-page [class$="-footer"] { padding-left: 20px !important; padding-right: 20px !important; }
    body.template-page.template-t01 .t01-main { width: 100%; margin-left: 0; }
    body.template-page.template-t01 .t01-hero { padding-top: 72px !important; gap: 36px; }
    body.template-page.template-t01 .t01-hero-viz { height: 340px; padding: 20px; }
    body.template-page.template-t01 .t01-btns { flex-direction: column; }
    body.template-page.template-t01 .t01-btns a { width: 100%; text-align: center; }
    body.template-page.template-t01 .t01-stats-grid,
    body.template-page.template-t01 .t01-feat-grid,
    body.template-page.template-t01 .t01-test-grid,
    body.template-page.template-t01 .t01-foot-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    body.template-page [class*="-hero"] { padding-top: 64px !important; padding-bottom: 56px !important; }
    body.template-page.template-t01 .t01-viz-metrics { grid-template-columns: 1fr; gap: 8px; }
    body.template-page.template-t01 .t01-hero-viz { height: 420px; }
}

@media (max-width: 980px) and (max-height: 600px) {
    body.template-page [class*="-hero"] { min-height: auto !important; padding-top: 32px !important; padding-bottom: 48px !important; }
    body.template-page [class*="-hero"] h1 { font-size: clamp(34px, 6vw, 52px) !important; line-height: 1.06 !important; }
    body.template-page [class*="-hero"] p { font-size: 13px !important; line-height: 1.65 !important; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body.template-page *, body.template-page *::before, body.template-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}