/* 通用计算器页（/tools/<key>/，limitation/severance/interest/period/rate/compensation）
 * 与分享快照页的样式。设计语言与诉讼费计算器（tools_fee.css 的 .fee-page）一致：
 * 深蓝渐变 hero + 白卡片双栏 + 金色点缀；全部选择器收在 .tool-page 作用域下，
 * 不会与 app.css 的表格/卡片默认版式互相污染。
 */

main.page-tools { max-width: none; padding: 0; }

.tool-page {
  --tool-navy: #0d2540;
  --tool-navy-2: #14355c;
  --tool-navy-3: #1d4a7c;
  --tool-gold: #c8a45c;
  --tool-ink: #24292f;
  --tool-muted: #6a737d;
  --tool-line: #e4e8ee;
  --tool-radius: 14px;
  --tool-shadow: 0 10px 32px rgba(13, 37, 64, .10);
  color: var(--tool-ink);
}

/* ===== 头部 ===== */
.tool-page .tool-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--tool-navy) 0%,var(--tool-navy-2) 55%,var(--tool-navy-3) 100%);color:#fff;padding:26px 16px 78px;text-align:center}
.tool-page .tool-hero::after{content:'🧮';position:absolute;right:-20px;top:-30px;font-size:170px;opacity:.06;transform:rotate(-10deg)}
.tool-page .tool-hero h1{font-size:26px;font-weight:800;letter-spacing:1px;position:relative;margin:0;color:#fff}
.tool-page .tool-hero p{margin:8px auto 0;max-width:46rem;opacity:.85;font-size:14px;position:relative}

/* ===== 布局 ===== */
.tool-page .tool-wrap{max-width:1120px;margin:-46px auto 30px;padding:0 16px;display:grid;grid-template-columns:430px 1fr;gap:26px;align-items:start;position:relative}
.tool-page .tool-wrap.single{grid-template-columns:minmax(0,64rem)}
/* 全站搜索的「左法规 / 右案例」两栏。
   注意：不用 .tool-wrap 的 430px+1fr —— 那是给工具页「左筛选栏 + 右结果」
   设计的；结果卡按源序塞进去会蛇形错落（左一张、右三张），语义全乱。
   这里单独开一个 .tool-cols，两条等宽或略偏左的列，各自竖排。 */
.tool-page .tool-cols{display:grid;grid-template-columns:1.15fr 1fr;gap:22px;align-items:start}
.tool-page .tool-col{display:flex;flex-direction:column;gap:22px;min-width:0}
@media(max-width:860px){.tool-page .tool-cols{grid-template-columns:1fr}}
.tool-page .tool-card{background:#fff;border-radius:var(--tool-radius);box-shadow:var(--tool-shadow);border:1px solid var(--tool-line);padding:22px;animation:tool-fade-up .5s ease both}
.tool-page .result-panel{animation-delay:.08s}
@keyframes tool-fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:960px){.tool-page .tool-wrap{grid-template-columns:1fr;margin-top:-36px}}

/* ===== 卡片小节标题（金色短杠，与诉讼费页一致） ===== */
.tool-page .result-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.tool-page .result-head h2{font-size:16px;font-weight:800;margin:0;color:var(--tool-navy)}
.tool-page .result-head h2::before{content:'';display:inline-block;width:4px;height:16px;border-radius:2px;background:var(--tool-gold);margin-right:8px;vertical-align:-2px}

/* ===== 表单 ===== */
.tool-page .f-row{margin-bottom:15px}
.tool-page .f-row > label{display:block;font-size:13px;font-weight:600;color:#475569;margin-bottom:5px}
.tool-page .f-row > label em{color:#b45309;font-style:normal;margin-left:2px}
.tool-page .f-row input[type="text"],.tool-page .f-row input[type="date"],
.tool-page .f-row input[type="number"],.tool-page .f-row select{
  width:100%;padding:9px 12px;border:1.5px solid var(--tool-line);border-radius:9px;font-size:14px;
  font-family:inherit;color:#0f1b33;background:#fbfcfe;outline:none;transition:border-color .15s, box-shadow .15s;box-sizing:border-box}
.tool-page .f-row input:focus,.tool-page .f-row select:focus{border-color:var(--tool-navy-2);box-shadow:0 0 0 4px rgba(13,37,64,.10);background:#fff}
.tool-page .f-help{font-size:12px;color:#94a3b8;margin:5px 0 0;line-height:1.6}
.tool-page .f-err{font-size:12px;color:#d93026;margin:5px 0 0;font-weight:600}
.tool-page .f-bool{display:flex;align-items:center;gap:9px;background:#f8fafd;border:1px solid var(--tool-line);border-radius:10px;padding:10px 13px}
.tool-page .f-bool > label{margin:0;font-size:13px;font-weight:600;color:#334155;flex:1;cursor:pointer}
.tool-page .f-bool input[type="checkbox"]{width:17px;height:17px;accent-color:var(--tool-navy-2);cursor:pointer;flex:none}
.tool-page .tool-page-form button[type="submit"]{
  width:100%;margin-top:6px;padding:12px;border:none;border-radius:10px;cursor:pointer;font-family:inherit;
  font-size:15px;font-weight:700;color:#fff;background:linear-gradient(120deg,var(--tool-navy),var(--tool-navy-2));
  box-shadow:0 6px 16px rgba(13,37,64,.22);transition:filter .15s}
.tool-page .tool-page-form button[type="submit"]:hover{filter:brightness(1.15)}
.tool-page .f-back{margin:12px 0 0;text-align:center;font-size:13px}
.tool-page .f-back a{color:var(--tool-muted)}
.tool-page .f-back a:hover{color:var(--tool-navy)}

/* ===== 结果 ===== */
.tool-page .result-empty{text-align:center;color:#94a3b8;font-size:13.5px;padding:34px 10px;background:#f8fafd;border:1px dashed var(--tool-line);border-radius:12px}

/* 全站搜索：hero 内的检索条 */
.tool-page .unified-bar{margin:16px auto 0;max-width:640px;display:flex;gap:8px;position:relative;z-index:2}
.tool-page .unified-bar input{flex:1;padding:11px 16px;border:none;border-radius:999px;font-size:15px;font-family:inherit;outline:none;color:#0f1b33;background:#fff}
.tool-page .unified-bar button{border:none;border-radius:999px;padding:0 26px;font-size:15px;font-weight:700;color:#4c3a10;background:var(--tool-gold);cursor:pointer;font-family:inherit}
.tool-page .unified-bar button:hover{filter:brightness(1.08)}

/* 卡片内的结果列表：压平成行式，避免卡中卡 */
.tool-page .rows{gap:0;margin:0}
.tool-page .rows > li{box-shadow:none;border:none;border-bottom:1px solid #f1f5f9;border-radius:0;padding:.7rem .3rem}
.tool-page .rows > li:last-child{border-bottom:none}
.tool-page .f-warn{font-size:12.5px;color:#b45309;background:#fdf3e3;border:1px solid #f0ddb5;border-radius:9px;padding:8px 12px;margin:0 0 12px}

/* 全站搜索：跨服务来源标记（法规全库 / 法条两个补充区块用） */
.tool-page .src-tag{font-size:11.5px;font-weight:600;color:#7c6a3f;background:#faf5e8;border:1px solid #efe3c6;border-radius:999px;padding:2px 10px;white-space:nowrap}
/* 法条区块的正文片段：给 3 行截断，避免长条文把卡片撑得过高 */
.tool-page .row-snippet{margin:6px 0 0;font-size:13px;line-height:1.75;color:#475569;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tool-page .row-snippet a{color:#334155;text-decoration:none}
.tool-page .row-snippet a:hover{color:var(--tool-navy)}
.tool-page .row-snippet em{font-style:normal;font-weight:700;color:#b45309;background:#fdf3e3;border-radius:3px;padding:0 2px}
.tool-page .row-title em{font-style:normal;font-weight:700;color:#b45309;background:#fdf3e3;border-radius:3px;padding:0 2px}
.tool-page .kv-table{width:100%;border-collapse:collapse;font-size:13.5px;margin:0 0 14px;background:#fff;border:1px solid var(--tool-line);border-radius:10px;overflow:hidden}
.tool-page .kv-table th,.tool-page .kv-table td{padding:9px 13px;border-bottom:1px solid #f1f5f9;text-align:left;vertical-align:top}
.tool-page .kv-table tr:last-child th,.tool-page .kv-table tr:last-child td{border-bottom:none}
.tool-page .kv-table th{width:45%;font-weight:600;color:var(--tool-muted);background:#fcfdff}
.tool-page .kv-table td{font-weight:600;color:#0f1b33;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tool-page .kv-table td ul{margin:0;padding-left:16px}
.tool-page .kv-table td ul li{margin:2px 0}

.tool-page .tbl-card{border:1px solid var(--tool-line);border-radius:10px;overflow:hidden;margin:0 0 14px}
.tool-page .tbl-title{font-size:13px;font-weight:700;padding:10px 13px;background:#f8fafd;color:#1e293b;border-bottom:1px solid #eef2f7}
.tool-page .tbl-card table{width:100%;border-collapse:collapse;font-size:12.5px;margin:0}
.tool-page .tbl-card th{text-align:left;font-weight:600;color:#8b93a7;padding:8px 13px;background:#fcfdff;border-bottom:1px solid #f1f5f9}
.tool-page .tbl-card td{padding:8px 13px;border-bottom:1px solid #f6f8fb;color:#334155;font-variant-numeric:tabular-nums}
.tool-page .tbl-card tr:last-child td{border-bottom:none}

.tool-page .snapshot-box{margin-top:16px;padding-top:14px;border-top:1px dashed var(--tool-line)}
.tool-page .snapshot-box form{margin:0}
.tool-page .snapshot-box button[type="submit"]{
  width:100%;padding:10px;border:1px solid var(--tool-gold);border-radius:10px;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:700;color:#4c3a10;background:var(--tool-gold);transition:background .15s}
.tool-page .snapshot-box button[type="submit"]:hover{background:#dbb875}
.tool-page .snapshot-login{text-align:center;font-size:13px;margin:14px 0 0}

.tool-page .tool-disclaimer{margin:16px 0 0;font-size:11.5px;color:#9aa3b5;line-height:1.7;background:#f8fafd;border:1px dashed var(--tool-line);border-radius:12px;padding:10px 14px}
.tool-page .result-head.spaced{margin-top:18px}
.tool-page .tool-wrap.single .tool-card > .tool-back{margin:14px 0 0}
.tool-page .tool-back{margin:0 16px 18px;font-size:13px}
.tool-page .tool-back a{color:var(--tool-muted)}
.tool-page .tool-back a:hover{color:var(--tool-navy)}

@media(max-width:960px){
  .tool-page .tool-hero h1{font-size:22px}
}

/* ===== 省份选择页（外部 Go 服务家族页 /tools/regional/<key>/） =====
   一个功能（如交通事故赔偿）下的各省份实现。可进入的省份是实心卡片，
   未接入的省份是灰底 chip —— 视觉上必须一眼分得清「能点」和「还不能点」，
   否则用户会反复点灰色卡片然后以为坏了。
   全部选择器收在 .tool-page 下，不影响其它页面。 */
.tool-page .region-hint{margin:0 0 14px;font-size:13px;color:var(--tool-muted);line-height:1.75}
.tool-page .region-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.tool-page .region-card{
  border:1px solid var(--tool-line);border-radius:11px;background:#fbfcfe;
  padding:12px 8px;text-align:center;
  transition:border-color .15s, box-shadow .15s, background .15s}
.tool-page .region-card .region-name{display:block;font-size:14px;font-weight:700;color:#0f1b33}
.tool-page .region-card .region-note{display:block;margin-top:3px;font-size:11.5px;color:#94a3b8}
.tool-page .region-card--on{background:#fff;border-color:#cfdcec}
.tool-page .region-card--on a{display:block;text-decoration:none}
.tool-page .region-card--on .region-note{color:#0e8a5f;font-weight:700}
.tool-page .region-card--on:hover{border-color:var(--tool-navy-2);box-shadow:0 6px 16px rgba(13,37,64,.12)}
.tool-page .region-card--on:hover .region-name{color:var(--tool-navy-2)}
.tool-page .region-card--off{opacity:.7}
/* 全国版（jtsg）：一个实现覆盖 31 省，不是「第 32 个省」——
   横跨两列 + 深蓝底 + 金色副题，一眼与分省实现区分开。
   ★ 用 span 2 而不是固定宽度：网格是 auto-fill，窄屏自动降为单列，
     Grid 会把 span 钳到可用列数，不会撑破容器。 */
.tool-page .region-card--national{
  grid-column:span 2;background:var(--tool-navy);border-color:var(--tool-navy)}
.tool-page .region-card--national .region-name{color:#fff;font-size:15px;letter-spacing:.5px}
.tool-page .region-card--national .region-note{color:var(--tool-gold)}
.tool-page .region-card--national:hover{border-color:var(--tool-navy-3);box-shadow:0 8px 20px rgba(13,37,64,.26)}
.tool-page .region-card--national:hover .region-name{color:var(--tool-gold)}
.tool-page .region-foot{
  margin:16px 0 0;font-size:11.5px;color:#9aa3b5;line-height:1.7;
  background:#f8fafd;border:1px dashed var(--tool-line);border-radius:12px;padding:10px 14px}