/* ===== 退休工具箱专用样式 v1（绿色养老主题） ===== */

/* --- 主题色：替换 gupiao.css 的蓝色主色为养老绿 --- */
#header h1:before { background: linear-gradient(180deg,#059669,#34d399); }
.gp-explain { background: linear-gradient(135deg,#ecfdf5 0%,#d1fae5 100%); border: 1px solid #a7f3d0; border-left: 4px solid #059669; }
.gp-explain h4 { color: #047857; }
.gp-sec-title i { background: linear-gradient(135deg,#059669,#10b981); }
.gp-sec-title .t { background: linear-gradient(90deg,#064e3b,#059669); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gp-col h3, .gp-layout-main h3 { border-left: 4px solid #059669; background: linear-gradient(90deg,rgba(5,150,105,.08),transparent); }
.gp-form-group input:focus, .gp-form-group select:focus { border-color: #059669; box-shadow: 0 0 0 3px rgba(5,150,105,.15); }
.gp-btn { background: linear-gradient(135deg,#059669,#10b981); box-shadow: 0 2px 6px rgba(5,150,105,.25); }
.gp-btn:hover { box-shadow: 0 5px 14px rgba(5,150,105,.35); background: linear-gradient(135deg,#047857,#059669); }
.gp-btn-reset { background:#fff; color:#64748b; border:1.5px solid #d1d5db; box-shadow:none; }
.gp-result { border-left: 4px solid #059669; }
.gp-result .primary { color: #059669; }
.gp-table th, .gp-record-table th { background: linear-gradient(180deg,#f0fdf4,#dcfce7); }
.gp-table tr:hover td, .gp-record-table tr:hover td { background: #ecfdf5; }
.tool-card:before { background: linear-gradient(90deg,#059669,#34d399); }
.tool-card:hover { border-color: #059669; box-shadow: 0 8px 20px rgba(5,150,105,.12); }
.tool-card .tool-icon { color: #059669; }
.glossary-item h3 { color: #047857; }
.glossary-item:hover { border-color: #6ee7b7; box-shadow: 0 4px 14px rgba(5,150,105,.08); }
.gp-stat-num { color: #059669; }
.gp-side-title { background: linear-gradient(90deg,#047857,#059669); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; border-left: 3px solid #059669; }
.notice a { color: #059669; }
.notice a:hover { color: #047857; }

/* --- 页头 logo 主题 --- */
.content .header .m .logo .logo-icon { color: #059669; }

/* --- 养老金结果大数字卡 --- */
.tx-big-result { text-align: center; padding: 22px 18px; background: linear-gradient(135deg,#064e3b,#059669); border: none; border-radius: 14px; margin: 14px 0; box-shadow: 0 6px 18px rgba(5,150,105,.25); }
.tx-big-result .num { font-size: 42px; font-weight: 800; color: #ffffff; letter-spacing: 1px; }
.tx-big-result .num small { font-size: 18px; font-weight: 600; }
.tx-big-result .lbl { font-size: 13px; color: #d1fae5; margin-top: 4px; }
.tx-big-result .sub { font-size: 12px; color: #a7f3d0; margin-top: 6px; }

/* --- 结果明细行 --- */
.tx-detail { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.tx-detail .cell { flex: 1; min-width: 130px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; text-align: center; }
.tx-detail .cell .v { font-size: 17px; font-weight: 700; color: #1e293b; }
.tx-detail .cell .k { font-size: 12px; color: #94a3b8; margin-top: 4px; }

/* --- 参数提示卡 --- */
.tx-tip { background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid #f59e0b; border-radius: 8px; padding: 10px 14px; margin: 12px 0; font-size: 12.5px; line-height: 1.8; color: #78350f; }

/* --- 政策时间线 --- */
.tx-timeline { margin: 12px 0 6px; }
.tx-timeline .tl-item { position: relative; padding: 0 0 14px 22px; border-left: 2px solid #a7f3d0; margin-left: 6px; }
.tx-timeline .tl-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.tx-timeline .tl-item:before { content:''; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%; background:#10b981; border:2px solid #fff; box-shadow:0 0 0 2px #a7f3d0; }
.tx-timeline .tl-item .t { font-size: 13px; font-weight: 700; color: #1e293b; }
.tx-timeline .tl-item .d { font-size: 12px; color: #64748b; margin-top: 2px; line-height: 1.7; }

/* --- 对比表格 --- */
.tx-compare { width: 100%; border-collapse: separate; border-spacing: 0; margin: 12px 0; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.tx-compare th { background: linear-gradient(180deg,#f0fdf4,#dcfce7); font-weight: 600; color: #065f46; padding: 10px 12px; font-size: 13px; border-bottom: 1px solid #e2e8f0; }
.tx-compare td { padding: 9px 12px; text-align: center; font-size: 13px; border-top: 1px solid #eef2f7; color: #475569; }
.tx-compare tr:nth-child(even) td { background: #fafbfc; }
.tx-compare tr:hover td { background: #ecfdf5; }
.tx-compare .hl { color: #059669; font-weight: 700; }
.tx-compare .warn { color: #e74c3c; font-weight: 600; }
.tx-compare .good { color: #059669; font-weight: 600; }

/* --- 复选组（养老金构成） --- */
.tx-check-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 8px; }
.tx-check-row label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #475569; cursor: pointer; }
.tx-check-row input[type=checkbox] { width: 15px; height: 15px; accent-color: #059669; }

/* --- 表格表单（社保） --- */
.tx-sb-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 10px 0; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.tx-sb-table th { background: linear-gradient(180deg,#f0fdf4,#dcfce7); font-weight: 600; color: #065f46; padding: 9px 12px; font-size: 13px; border-bottom: 1px solid #e2e8f0; }
.tx-sb-table td { padding: 9px 12px; text-align: right; font-size: 13px; border-top: 1px solid #eef2f7; color: #475569; }
.tx-sb-table td:first-child { text-align: left; }
.tx-sb-table tr:nth-child(even) td { background: #fafbfc; }
.tx-sb-table tr.total td { background: #ecfdf5; font-weight: 700; color: #065f46; }

/* --- 帮助按钮/开关 --- */
.gp-form-group .unit { font-size: 12px; color: #94a3b8; margin-left: 6px; }
.gp-form-group select.wide { width: 280px; }

/* --- 首页政策横幅 --- */
.tx-hero { background: linear-gradient(135deg,#065f46 0%,#059669 60%,#34d399 100%); border-radius: 14px; padding: 26px 22px; color: #fff; margin-bottom: 20px; position: relative; overflow: hidden; }
.tx-hero h2 { font-size: 22px; font-weight: 800; margin: 0 0 8px; }
.tx-hero p { font-size: 13.5px; line-height: 1.9; opacity: .95; margin: 0; max-width: 860px; }
.tx-hero .tag { display: inline-block; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); padding: 2px 10px; border-radius: 999px; font-size: 12px; margin-right: 6px; margin-top: 6px; color: #fff; font-weight: 600; }

/* --- 相关阅读 --- */
.tx-reading { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 8px; }
.tx-reading a { display: block; background: #fff; border: 1px solid #e9ecef; border-radius: 12px; padding: 14px 16px; text-decoration: none; transition: all .25s; }
.tx-reading a:hover { border-color: #6ee7b7; box-shadow: 0 4px 14px rgba(5,150,105,.08); transform: translateY(-2px); }
.tx-reading a .t { font-size: 14px; font-weight: 600; color: #1e293b; margin-bottom: 4px; }
.tx-reading a .d { font-size: 12px; color: #94a3b8; line-height: 1.6; }

/* --- 页头 LOGO 右侧 BANNER 广告条 --- */
.content .header { height: auto; min-height: 90px; padding: 12px 0; }
.content .header .m .logo { flex: 0 0 auto; min-width: 300px; white-space: nowrap; }
.content .header .m .logo .logo-text { flex: 0 0 auto; min-width: 0; }
.content .header .m .header-intro { position: relative; overflow: hidden; text-align: left; flex: 1 1 auto; max-width: 600px; margin-left: 20px; background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border: 1px solid #a7f3d0; border-radius: 10px; padding: 9px 16px 7px 18px; box-shadow: 0 3px 12px rgba(5, 150, 105, .14); }
.header-intro .hi-title { font-size: 16px; font-weight: 800; color: #065f46; }
.header-intro .hi-desc { font-size: 12px; color: #475569; margin-top: 2px; line-height: 1.5; }
.header-intro .hi-tags { margin-top: 4px; }
.header-intro .hi-tags span { display: inline-block; background: #fff; color: #047857; border: 1px solid #a7f3d0; padding: 1px 9px; border-radius: 999px; font-size: 11px; margin-left: 6px; font-weight: 600; }

/* --- 底部整行：缴费年限折线图(左) + 退休前后收入对比(右) --- */
.tx-side-row { display: flex; gap: 12px; align-items: stretch; background: linear-gradient(135deg, #fef2f2, #fce7e7); border: 1px solid #fecaca; border-radius: 14px; padding: 20px 22px 14px; margin-top: 26px; box-shadow: 0 2px 10px rgba(239, 68, 68, .08); }
.tx-side-left, .tx-side-right { flex: 1; min-width: 0; }
.tx-side-left .gp-side-title, .tx-side-right .gp-side-title { margin-top: 0; }
.tx-side-left .gp-chart, .tx-side-right .gp-chart { max-width: none; height: 320px; margin: 0 0 6px; }

/* --- 响应式 --- */
@media (max-width: 768px) {
  .tx-big-result .num { font-size: 32px; }
  .tx-detail .cell { min-width: 45%; }
  .tx-side-row { flex-direction: column; }
  .tx-side-right { width: 100%; }
  .content .header .m .header-intro { display: none; }
}

/* ================= 全局视觉统一（美化 v8） ================= */
/* 页面底色：浅灰，衬托白色主卡 */
body { background: #f3f6fa; }

/* --- 顶部登录栏 --- */
.loginbar-nav .item .hd i { color: #059669; }
.loginbar-welcome p { color: #475569; }

/* --- LOGO 绿色系 --- */
.content .header .m .logo { color: #059669; }
.content .header .m .logo .logo-icon { color: #059669; }
.content .header .m .logo .logo-text .main-text { color: #065f46; }
.content .header .m .logo .logo-text .sub-text { color: #94a3b8; }

/* --- 导航栏：绿色渐变 --- */
.content .navbar { background: linear-gradient(90deg, #065f46, #059669); box-shadow: 0 2px 10px rgba(5, 150, 105, .22); }
.content .navbar ul { justify-content: flex-start; gap: 2px; }
.content .navbar ul li { font-size: 15px; }
.content .navbar ul li:hover { background: rgba(255, 255, 255, .14); }
.content .navbar ul li.on { background: rgba(255, 255, 255, .16); }
.content .navbar ul li a { padding: 0 22px; letter-spacing: 1px; }
.content .navbar ul li a.hot { font-weight: 800; }
.content .navbar ul li:has(a.hot) { background: rgba(255, 255, 255, .2); }
.content .navbar ul li:has(a.hot):hover { background: rgba(255, 255, 255, .28); }
.content .navbar ul li a[href="yanchi.html"] { color: #fb923c; font-weight: 700; }
.content .navbar ul li a[href="yanchi.html"]:hover { color: #fb923c; }

/* --- 页面标题 --- */
#header h1 { font-size: 24px; color: #0f172a; }

/* --- 表单分区卡片化 --- */
.gp-col { background: #fff; border: 1px solid #eef2f7; border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(15, 23, 42, .04); }

/* --- 右侧辅助信息卡（关于社平工资 / 测算口径等）：浅绿底 --- */
.gp-side-card { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border: 1px solid #bbf7d0; border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.gp-side-card h4 { color: #065f46; }
#main .gp-side-card h4 { color: #065f46; }

/* --- 养老金构成卡片：淡紫渐变底 --- */
.tx-chart-card { background: linear-gradient(135deg, #fdf4ff, #fae8ff); border: 1px solid #f5d0fe; border-radius: 12px; padding: 14px 14px 8px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(192, 132, 252, .08); }

/* --- 双栏布局修复：改用 Grid，避免窄视口右侧面板被挤到下方 --- */
@media (min-width: 901px) {
  .gp-layout { display: grid; grid-template-columns: 1fr 390px; gap: 22px; align-items: start; }
  .gp-layout-main { min-width: 0; }
  .gp-layout-side { width: auto; position: static; }
  .gp-form-group { flex-wrap: wrap; row-gap: 4px; }
}

/* --- 表单控件统一 --- */
.gp-form-group input, .gp-form-group select { height: 40px; border-radius: 8px; }
.gp-form-group input:hover, .gp-form-group select:hover { border-color: #6ee7b7; }
.gp-form-group input[type="radio"], .gp-form-group input[type="checkbox"] { width: auto; height: auto; }

/* --- 图表/结果卡片圆角统一 --- */
.gp-chart, .gp-layout-side .gp-chart { border-radius: 12px; border-color: #eef2f7; box-shadow: 0 2px 8px rgba(15, 23, 42, .05); }
.gp-result { border-radius: 12px; }

/* --- 明细结果区（基础养老金/个人账户/替代率/参数）：深绿渐变底 --- */
#tuixiuDetail { background: linear-gradient(135deg, #064e3b, #059669); border: none; border-left: 4px solid #34d399; color: #ecfdf5; box-shadow: 0 4px 14px rgba(5, 150, 105, .2); }
#tuixiuDetail b { color: #d1fae5; }
#tuixiuDetail .primary { color: #86efac; font-weight: 600; }
#tuixiuDetail .down { color: #4ade80; font-weight: 600; }
#tuixiuDetail .up { color: #fca5a5; font-weight: 600; }
#tuixiuDetail span[style*="94a3b8"] { color: #a7f3d0 !important; }

/* --- notice 链接 --- */
.notice dd.type-list a, .notice dd a:hover { color: #059669; }
.notice dt { font-weight: 600; }

/* --- 页脚深绿 --- */
.footer { background: linear-gradient(180deg, #0f3d2e, #064e3b); }
.footer .footer-top { border-bottom-color: #1f5c46; }
.footer .footer-col h5 { color: #d1fae5; }
.footer .footer-col ul li a, .footer a { color: #a7c4b8; }
.footer .footer-col ul li a:hover, .footer a:hover, .footer .footer-links a:hover { color: #34d399; }
.footer .footer-bottom p { color: #7fa08f; }

@media (max-width: 768px) {
  .content .navbar ul { justify-content: flex-start; overflow-x: auto; }
  .content .navbar ul li a { padding: 0 14px; font-size: 14px; }
  .gp-form-group select.wide { width: 100%; }
}