* { box-sizing: border-box; }
body.tools-page { margin: 0; background: var(--zh-bg-subtle); color: var(--zh-text); font-family: var(--zh-font-sans); }
a { color: var(--zh-color-primary-text); }
.tools-topbar { display:flex; align-items:center; justify-content:space-between; gap:var(--zh-space-4); padding:var(--zh-space-4) max(var(--zh-space-4), calc((100% - 76rem)/2)); border-bottom:1px solid var(--zh-border); background:var(--zh-bg-elevated); }
.tools-brand,.tools-nav,.tools-footer { display:flex; align-items:center; gap:var(--zh-space-4); }
.tools-brand { color:var(--zh-text); font-weight:700; text-decoration:none; flex:none; white-space:nowrap; } /* 品牌区不收缩、不换行：手机上「工具」两个字原来会竖着排 */
.tools-brand-mark { background:var(--zh-color-primary); color:var(--zh-on-primary); padding:var(--zh-space-1) var(--zh-space-2); border-radius:var(--zh-radius-sm); }
.tools-nav a { color:var(--zh-text-secondary); font-size:calc(var(--zh-font-base) * .875); text-decoration:none; white-space:nowrap; }
.tools-main { max-width:76rem; margin:auto; padding:var(--zh-space-8) var(--zh-space-4); }
.tools-intro { margin-bottom:var(--zh-space-6); }
.tools-intro h1 { margin:var(--zh-space-2) 0; font-size:clamp(1.5rem, 4vw, 2rem); }
.tools-intro p,.tool-note,.tools-footer,.subtitle { color:var(--zh-text-secondary); }
.tools-eyebrow { font-size:calc(var(--zh-font-base) * .875); }
.tool-panel,.card { border:1px solid var(--zh-border); border-radius:var(--zh-radius-lg); background:var(--zh-bg-elevated); padding:var(--zh-space-6); margin-bottom:var(--zh-space-5); min-width:0; }
.tool-grid,.main-content { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--zh-space-5); }
.tool-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.tool-field { min-width:0; margin-bottom:var(--zh-space-4); }
.tool-field label { display:block; margin-bottom:var(--zh-space-2); font-weight:600; }
.tool-field small,.tool-note { display:block; margin-top:var(--zh-space-2); font-size:calc(var(--zh-font-base) * .875); }
.zh-input,.zh-textarea { width:100%; }
.zh-textarea { min-height:14rem; resize:vertical; }
.tool-actions,.btn-group,.input-header { display:flex; flex-wrap:wrap; gap:var(--zh-space-2); align-items:center; }
.tool-actions { margin-top:var(--zh-space-4); }
.input-header { justify-content:space-between; margin-bottom:var(--zh-space-4); }
h2,h3 { margin-top:0; }
.stats-section,.analysis-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--zh-space-3); }
.stat-card,.analysis-item { border:1px solid var(--zh-border); border-radius:var(--zh-radius-md); background:var(--zh-bg-subtle); padding:var(--zh-space-4); }
.stat-value { font-size:2.5rem; font-weight:700; color:var(--zh-color-primary-text); overflow-wrap:anywhere; }
.analysis-value { font-size:1.75rem; font-weight:700; color:var(--zh-color-primary-text); }
.analysis-section { margin-top:var(--zh-space-6); }
.tools-footer { max-width:76rem; padding:var(--zh-space-5) var(--zh-space-4); margin:auto; justify-content:space-between; font-size:calc(var(--zh-font-base) * .875); }
.tool-error { padding:var(--zh-space-3); color:var(--zh-text-danger); border:1px solid var(--zh-border); border-radius:var(--zh-radius-md); margin:var(--zh-space-4) 0; }
[hidden] { display:none!important; }
.zh-tabs { margin-bottom:var(--zh-space-5); }
.zh-table td { overflow-wrap:anywhere; }
@media(max-width:48rem) { .tool-grid,.tool-grid--3,.main-content { grid-template-columns:minmax(0,1fr); } .tools-topbar { align-items:flex-start; } .tools-nav { justify-content:flex-end; flex-wrap:wrap; gap:var(--zh-space-2); flex:1 1 0; min-width:0; } .tool-panel,.card { padding:var(--zh-space-4); } .tools-main { padding-top:var(--zh-space-5); } }