/* ============================================================
 * style.css —— 个税计算器网（仅本站使用）
 * 深蓝计算器风格：浅蓝底 + 白卡片 + 大数字结果。
 * ============================================================ */
:root {
  --gs-blue: #1d4ed8;
  --gs-blue-dark: #1e3a8a;
  --gs-blue-soft: #dbeafe;
  --gs-bg: #eff6ff;
  --gs-text: #1e293b;
  --gs-muted: #64748b;
  --gs-line: #dbe4f0;
  --gs-green: #15803d;
  --gs-radius: 14px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--gs-bg); color: var(--gs-text);
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  line-height: 1.6;
}
.gs-wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }
a { color: inherit; }

/* ---------- 品牌条 ---------- */
.gs-top { background: linear-gradient(135deg, var(--gs-blue), var(--gs-blue-dark)); color: #fff; padding: 18px 0 22px; }
.gs-top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gs-brand { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: 1px; }
.gs-slogan { margin: 4px 0 0; font-size: 13px; opacity: .92; }
.gs-mini {
  flex: 0 0 auto; margin: 0; text-align: center; font-size: 11px; opacity: .95;
  border: 1px dashed rgba(255, 255, 255, .55); border-radius: 10px; padding: 8px 10px; max-width: 170px; line-height: 1.7;
}
@media (max-width: 520px) { .gs-mini { display: none; } }

/* ---------- 广告位（≤90px） ---------- */
.gs-ad {
  min-height: 60px; max-height: 90px; margin: 14px 0;
  border: 1px dashed var(--gs-line); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gs-muted); font-size: 12.5px; background: #fff; overflow: hidden;
}

/* ---------- 计算器面板 ---------- */
.gs-hero { padding: 10px 0 4px; }
.gs-hero h1 { font-size: 24px; margin: 0 0 6px; color: var(--gs-blue-dark); }
.gs-hero h1 b { color: var(--gs-blue); }
.gs-sub { margin: 0 0 16px; font-size: 14px; color: var(--gs-muted); }

.gs-calc {
  background: #fff; border: 1px solid var(--gs-line); border-radius: var(--gs-radius);
  box-shadow: 0 1px 3px rgba(30, 58, 138, .06), 0 10px 28px rgba(30, 58, 138, .08);
  padding: 24px;
}
.gs-amount-label { display: block; font-size: 13px; font-weight: 600; color: var(--gs-muted); margin-bottom: 8px; }
.gs-amount-box {
  display: flex; align-items: center; gap: 8px;
  border: 2px solid var(--gs-blue); border-radius: 12px; padding: 0 16px; background: #fff;
}
.gs-yen { font-size: 22px; font-weight: 700; color: var(--gs-blue); }
.gs-amount-box input {
  flex: 1; height: 56px; border: none; outline: none; font-size: 26px; font-weight: 700;
  color: var(--gs-blue-dark); background: transparent; min-width: 0;
}
.gs-hint { margin: 8px 2px 0; font-size: 12.5px; color: var(--gs-muted); }
/* 专项附加扣除次级输入框：紧凑版（主收入框仍为大号） */
.gs-sub-box { border-color: var(--gs-line); border-radius: 10px; margin-top: 4px; }
.gs-sub-box .gs-yen { font-size: 16px; color: var(--gs-muted); }
.gs-sub-box input { height: 44px; font-size: 18px; }

/* 结果：三卡 + 明细行 */
.gs-result { margin-top: 18px; }
.gs-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.gs-card {
  background: var(--gs-blue-soft); border-radius: 12px; padding: 14px 16px; text-align: center;
}
.gs-card-main { background: var(--gs-blue); color: #fff; }
.gs-card-green { background: var(--gs-green); }
.gs-card-k { margin: 0 0 4px; font-size: 12.5px; opacity: .85; }
.gs-card-v { margin: 0; }
.gs-card-v em { font-style: normal; font-size: 26px; font-weight: 800; }
.gs-v-sm em { font-size: 18px; }
.gs-unit { font-size: 12px; opacity: .85; margin-left: 2px; }
.gs-detail { margin-top: 14px; border: 1px solid var(--gs-line); border-radius: 10px; overflow: hidden; }
.gs-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 9px 14px; font-size: 13.5px; background: #fff;
}
.gs-row + .gs-row { border-top: 1px solid var(--gs-line); }
.gs-k { color: var(--gs-muted); }
.gs-v { font-weight: 700; color: var(--gs-blue-dark); }
.gs-note { margin: 12px 0 0; font-size: 12px; color: var(--gs-muted); line-height: 1.7; }
.gs-meta { margin: 6px 0 0; font-size: 12px; color: var(--gs-muted); }

.gs-actions { margin-top: 16px; }
.gs-btn {
  height: 42px; padding: 0 22px; border: 1px solid var(--gs-line); border-radius: 10px;
  background: #fff; color: var(--gs-muted); font-size: 14px; font-weight: 600; cursor: pointer;
}
.gs-btn:hover { border-color: var(--gs-blue); color: var(--gs-blue); }

/* ---------- 相关查询 ---------- */
.gs-links { margin: 26px 0 8px; }
.gs-links h2, .gs-content h2, .gs-cities h2 { font-size: 16px; margin: 0 0 10px; color: var(--gs-blue-dark); }
.gs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gs-chips a {
  padding: 8px 14px; background: #fff; border: 1px solid var(--gs-line);
  border-radius: 999px; font-size: 13.5px; text-decoration: none; color: var(--gs-text);
}
.gs-chips a:hover { border-color: var(--gs-blue); color: var(--gs-blue); }

/* ---------- FAQ 内容区（构建期生成，类名 gs-content / gs-ai-badge / gs-src-note） ---------- */
.gs-content {
  margin: 26px 0; background: #fff; border: 1px solid var(--gs-line);
  border-radius: var(--gs-radius); padding: 18px 20px;
}
.gs-content article { margin-bottom: 14px; }
.gs-content article:last-child { margin-bottom: 0; }
.gs-content h3 { font-size: 14.5px; margin: 0 0 6px; }
.gs-content p { font-size: 13.5px; color: #475569; margin: 0 0 4px; }
.gs-src-note { font-size: 12px; color: var(--gs-muted); }
.gs-ai-badge {
  display: inline-block; padding: 1px 8px; margin-left: 6px;
  font-size: 11px; font-weight: 600; vertical-align: 1px;
  color: #6d28d9; background: #f3e8ff; border: 1px solid #ddd6fe; border-radius: 999px;
}

/* ---------- 月收入档矩阵 ---------- */
.gs-cities { margin: 26px 0; }
.gs-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.gs-grid a {
  padding: 6px 14px; background: #fff; border: 1px solid var(--gs-line);
  border-radius: 8px; font-size: 13px; text-decoration: none; color: var(--gs-text);
}
.gs-grid a:hover { border-color: var(--gs-blue); color: var(--gs-blue); }

/* ---------- 合规页脚（构建期生成：gs-foot / gs-links / gs-disc / gs-src / gs-ai） ---------- */
.gs-foot { background: #fff; border-top: 1px solid var(--gs-line); margin-top: 24px; }
.gs-foot .gs-wrap { padding-top: 24px; padding-bottom: 32px; }
.gs-foot .gs-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; font-size: 13px; }
.gs-foot a { color: inherit; text-decoration: none; }
.gs-foot a:hover { color: var(--gs-blue); text-decoration: underline; }
.gs-foot .gs-strong { font-weight: 600; color: var(--gs-text); }
.gs-foot .gs-disc, .gs-foot .gs-src, .gs-foot .gs-ai { margin: 0 0 6px; font-size: 12.5px; color: var(--gs-muted); line-height: 1.9; }

/* ---------- 移动适配 ---------- */
@media (max-width: 520px) {
  .gs-calc { padding: 18px 16px; }
  .gs-cards { grid-template-columns: 1fr 1fr; }
  .gs-card-main:first-child { grid-column: 1 / -1; }
  .gs-amount-box input { font-size: 22px; }
}
