/* 关键 CSS：构建时内联到每个页面 head，仅含首屏渲染必需样式。
   目标：< 4KB gzipped。所有非首屏样式放 main.css 异步加载。 */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-relaxed);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--color-primary);text-decoration:none}
a:hover{color:var(--color-primary-dark);text-decoration:underline}
button,input,select,textarea{font:inherit}
:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}
.skip-nav{position:absolute;left:-9999px;top:0;background:var(--color-primary);color:#fff;padding:12px 16px;z-index:1000}
.skip-nav:focus{left:8px;top:8px}

/* 容器 */
.container{width:100%;max-width:var(--container-base);margin:0 auto;padding:0 var(--space-4)}
.container-narrow{max-width:var(--container-narrow)}
.container-wide{max-width:var(--container-wide)}

/* 标题（首屏可见） */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--fw-bold);line-height:var(--lh-tight);color:var(--color-text);margin:0 0 var(--space-4)}
h1{font-size:var(--fs-2xl);letter-spacing:-0.01em}
h2{font-size:var(--fs-xl);margin-top:var(--space-8)}
h3{font-size:var(--fs-lg);margin-top:var(--space-5)}
@media (min-width:768px){h1{font-size:var(--fs-3xl)}h2{font-size:var(--fs-2xl)}}
@media (min-width:1024px){h1{font-size:var(--fs-hero)}}
p{margin:0 0 var(--space-4);max-width:70ch}

/* Header（首屏） */
.site-header{position:sticky;top:0;z-index:var(--z-header);background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border)}
.site-header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.site-logo{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-md);color:var(--color-primary);text-decoration:none}
.site-logo:hover{text-decoration:none;color:var(--color-primary-dark)}
.logo-mark{width:32px;height:32px;flex-shrink:0}
.site-nav{display:none}
@media (min-width:1024px){.site-nav{display:flex;align-items:center;gap:var(--space-4);flex-wrap:nowrap;min-width:0}.site-nav .nav-group{display:flex;align-items:center;gap:var(--space-3);min-width:0}.site-nav .nav-group-trades{display:none}.site-nav .nav-label{display:none}}
.site-nav a{color:var(--color-text);font-weight:var(--fw-medium);padding:8px 6px;font-size:var(--fs-sm);white-space:nowrap}
.site-nav a:hover{color:var(--color-primary);text-decoration:none}
.menu-toggle{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:transparent;border:0;cursor:pointer;color:var(--color-text)}
@media (min-width:1024px){.menu-toggle{display:none}}

/* Hero（首屏） */
.hero{padding:var(--space-10) 0 var(--space-8);background:linear-gradient(160deg,var(--color-primary-soft) 0%,#fff 70%);border-bottom:1px solid var(--color-border)}
.hero h1{margin-bottom:var(--space-4)}
.hero-lead{font-size:var(--fs-md);color:var(--color-text-secondary);max-width:60ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}

/* 按钮（首屏） */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:48px;padding:12px 24px;border-radius:var(--radius-md);font-weight:var(--fw-semibold);font-size:var(--fs-sm);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast)}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--color-accent);color:var(--color-text);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--color-accent-dark);box-shadow:var(--shadow-md);color:var(--color-text)}
.btn-secondary{background:#fff;color:var(--color-primary);border-color:var(--color-primary)}
.btn-secondary:hover{background:var(--color-primary-soft);color:var(--color-primary-dark)}

/* 面包屑（首屏） */
.breadcrumb{padding:var(--space-3) 0;font-size:var(--fs-xs);color:var(--color-text-muted)}
.breadcrumb ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.breadcrumb li:not(:last-child)::after{content:"›";margin-left:var(--space-2);color:var(--color-text-muted)}
.breadcrumb a{color:var(--color-text-muted)}
.breadcrumb a:hover{color:var(--color-primary)}

/* 工具页 H1 区 */
.page-intro{padding:var(--space-5) 0 var(--space-3)}
.page-intro .h1-suffix{display:inline-block;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--cluster-color,var(--color-primary));text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-2)}
.page-lead{font-size:var(--fs-md);color:var(--color-text-secondary);max-width:65ch}
