/* ===== 两页共用的壳层样式 =====
   测算页（index.html）和核验对照页（duizhao.html）的外框长得一样：同一套配色变量、
   同一个蓝色渐变页头、同一种卡片、同一批按钮。这些原先在两页的 <style> 里各抄了一份，
   改配色得记着改两处，漏一处两页就花了。

   这里只放**两边逐字相同**的那部分。两页确实不一样的地方（页头高矮、标题字号、
   正文最大宽度、按钮高矮之类）仍旧留在各自页面的页内样式里，就摆在本文件之后，
   照常盖过这里 —— 所以搬过来之后两页渲染出来跟原先一模一样，不是"统一"成一种。

   加载顺序要紧：本文件必须排在 plan.css、login.css 之后、页面自己那段页内样式之前。
   原先这些规则就写在页内样式里（即最靠后），排到那两个 css 之后才不会改变谁盖谁。 */

*{box-sizing:border-box}

:root{
  --bg:#f2f6fc;
  --card:#ffffff;
  --line:#dbe4f0;
  --text:#16233a;
  --muted:#6b7d99;
  --brand:#1d4ed8;
  --brand2:#3b82f6;
  --brand-dark:#1e3a8a;
}
/* --login-bg（登录页背景图）两页不同，各自页面里定 */

html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Microsoft YaHei","PingFang SC","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;line-height:1.6;
}

/* 页头：底色和居中两页一样，padding 和 h1 字号各页自己定 */
header.top{
  background:linear-gradient(120deg,var(--brand-dark),var(--brand2));
  color:#fff;text-align:center;
}
header.top h1{margin:0;letter-spacing:.5px}

/* 正文与卡片：max-width、卡片间距各页自己定 */
main{margin:0 auto;padding:22px 18px 60px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;box-shadow:0 1px 3px rgba(20,50,110,.06);
}
.card > h2{
  margin:0 0 14px;font-size:15px;display:flex;align-items:center;gap:8px;
  padding-bottom:10px;border-bottom:1px dashed var(--line);
}
.card > h2 .dot{width:8px;height:16px;border-radius:4px;background:linear-gradient(var(--brand-dark),var(--brand2))}
.card > h2 small{font-weight:400;color:var(--muted);font-size:12px}
.spacer{flex:1}

/* 按钮：高矮各页自己定 */
button{
  padding:0 14px;border-radius:9px;border:1px solid var(--line);
  background:#fff;color:var(--text);cursor:pointer;font-size:13px;
}
button:hover{border-color:var(--brand);color:var(--brand)}
button.primary{background:var(--brand);border-color:var(--brand);color:#fff}
button.primary:hover{background:var(--brand-dark);color:#fff}

/* 窄屏收一收内边距。两页这一段完全一样；对照页还有一段 900px 的，在它自己页面里，
   排在本文件之后，所以更窄的时候仍旧以那一段为准。 */
@media (max-width:1360px){
  main{padding:22px 10px 60px}
  .card{padding:18px 12px}
}