/* 东哥养老金工具箱 - 共享样式 */
:root {
  --bg-primary: #fbfbfd;
  --bg-secondary: #f5f5f7;
  --bg-card: #ffffff;
  --text-primary: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary: #86868b;
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --border: #d2d2d7;
  --radius-sm: 10px;
  --radius-md: 14px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.06);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  padding-top: 52px;
  min-height: 100vh;
}
/* 统一导航 */
.tool-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  background: rgba(251,251,253,0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
.tool-nav .logo { font-size:14px; font-weight:600; text-decoration:none; color:var(--text-primary); }
.tool-nav .logo span { color:var(--accent); }
.tool-nav .back {
  font-size:13px; color:var(--accent); text-decoration:none; font-weight:500;
  display:flex; align-items:center; gap:4px;
}
.tool-nav .back:hover { text-decoration:underline; }
/* 容器 */
.tool-container { max-width:600px; margin:0 auto; padding:32px 20px 60px; }
.tool-container.wide { max-width:720px; }
.tool-container.narrow { max-width:480px; }
.tool-container .page-title { font-size:28px; font-weight:700; letter-spacing:-0.02em; margin-bottom:6px; }
.tool-container .page-sub { color:var(--text-secondary); font-size:14px; margin-bottom:28px; }
/* 卡片 */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 16px;
}
/* 表单 */
label { font-size:13px; font-weight:600; color:var(--text-secondary); display:block; margin-bottom:6px; }
input, select {
  width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:10px;
  font-size:15px; font-family:inherit; outline:none; transition:border-color .2s;
}
input:focus, select:focus { border-color:var(--accent); }
.row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mt { margin-top:16px; }
.btn {
  width:100%; padding:12px; background:var(--accent); color:#fff; border:none; border-radius:10px;
  font-size:15px; font-weight:600; cursor:pointer; font-family:inherit; margin-top:16px; transition:background .2s;
}
.btn:hover { background:var(--accent-hover); }
.btn-outline { background:transparent; color:var(--accent); border:1px solid var(--accent); }
.btn-outline:hover { background:var(--bg-secondary); }
/* 结果框 */
.result-box { background:var(--bg-secondary); border-radius:12px; padding:20px; text-align:center; }
.result-num { font-size:36px; font-weight:700; color:var(--accent); }
.result-label { font-size:13px; color:var(--text-tertiary); margin-top:2px; }
.result-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.result-item { background:var(--bg-secondary); border-radius:10px; padding:14px; text-align:center; }
.result-item .v { font-size:20px; font-weight:700; }
.result-item .l { font-size:11px; color:var(--text-tertiary); margin-top:2px; }
/* 进度条 */
.progress { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.progress-bar { flex:1; height:6px; background:#e8e8ed; border-radius:3px; overflow:hidden; }
.progress-bar .fill { height:100%; background:var(--accent); border-radius:3px; transition:width .4s; }
.progress-text { font-size:13px; font-weight:600; color:var(--text-secondary); white-space:nowrap; }
/* 清单项 */
.check-item {
  display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-bottom:1px solid #f5f5f7; cursor:pointer;
}
.check-item:last-child { border-bottom:none; }
.check-item .box {
  width:22px; height:22px; border:2px solid #c7c7cc; border-radius:6px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:13px; color:#fff;
  transition:all .2s; margin-top:1px;
}
.check-item.done .box { background:var(--accent); border-color:var(--accent); }
.check-item .info { flex:1; }
.check-item .info .title { font-size:15px; font-weight:600; }
.check-item .info .desc { font-size:13px; color:var(--text-tertiary); margin-top:3px; line-height:1.5; }
.tag {
  display:inline-block; padding:2px 10px; border-radius:100px; font-size:11px; font-weight:500;
  background:var(--bg-secondary); color:var(--text-tertiary);
}
.tag.blue { background:#e8f0fe; color:var(--accent); }
.tag.green { background:#e8f8ee; color:#34c759; }
.tag.red { background:#fde8e8; color:#e34; }
/* 响应式 */
@media (max-width:480px) {
  .row { grid-template-columns:1fr; }
  .tool-container { padding:24px 16px 40px; }
  .tool-container .page-title { font-size:24px; }
}