/* CivilPal 网页样式。纯 CSS，不引外部字体或脚本（2026-11-05 你确认：网页不引外部资源）。 */
:root { --fg: #222; --muted: #555; --line: #ddd; --accent: #0b57d0; --error: #b00020; --ok: #146c2e; }
* { box-sizing: border-box; }
/* 带 hidden 属性的元素一律不显示：浏览器自带的 [hidden] 隐藏，会被下面给 nav、button、.button 等设的 display 盖过
   （2026-11-07 你发现：未登录打开首页时，顶上的"提交任务、账户"一栏会先闪一下再跳到登录页）。备忘录·特殊设计第 74 条。 */
[hidden] { display: none !important; }
body { margin: 0; font-family: system-ui, sans-serif; color: var(--fg); background: #f6f7f9; line-height: 1.5; }
a { color: var(--accent); }
main { max-width: 52rem; margin: 0 auto; padding: 1rem; }

.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .6rem 1rem; background: #fff; border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; font-size: 1.2rem; text-decoration: none; color: var(--fg); }
.top nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.user { color: var(--muted); }
form.inline { display: inline; margin: 0; }
button.link { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline;
  font: inherit; cursor: pointer; }

.card { background: #fff; border: 1px solid var(--line); border-radius: .5rem; padding: 1rem 1.25rem; margin: 1rem 0; }
h1 { font-size: 1.4rem; margin: .2rem 0 .6rem; }
h2 { font-size: 1.15rem; margin: 1rem 0 .5rem; }
.help { color: var(--muted); font-size: .92rem; }

.field { margin: .9rem 0; }
.field label { display: block; font-weight: 600; }
.field input, .field select { width: 100%; max-width: 30rem; padding: .45rem; font: inherit; }
.field .hint { color: var(--muted); font-size: .88rem; }
.field-error { color: var(--error); font-size: .92rem; min-height: 1.2em; }
[aria-invalid="true"] { border-color: var(--error); outline-color: var(--error); }

button, .button { display: inline-block; padding: .45rem 1.2rem; font: inherit; border: 1px solid var(--accent);
  border-radius: .3rem; background: var(--accent); color: #fff; text-decoration: none; cursor: pointer; }
button[disabled] { opacity: .5; cursor: default; }
.pager button { background: #fff; color: var(--accent); padding: .3rem .8rem; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .8rem; }
#job-cancel { background: #fff; color: var(--error); border-color: var(--error); }

/* 页面加载中（三个页面的 page-loading）：居中一个转圈的细圆环，下面一行"正在加载…"。
   先透明，等 0.3 秒再用 0.2 秒淡入：网络快、0.3 秒内就加载完的，什么都看不到（2026-11-07 你选的样式和"稍等 0.3 秒再淡入"）。
   圆环直径 2.2em、线宽 3px，一段主色、其余浅灰，0.8 秒转一圈；离页头 30vh（屏幕高度的 30%）。备忘录·特殊设计第 75 条。 */
.page-loading { display: flex; flex-direction: column; align-items: center; gap: .8rem; padding-top: 30vh;
  color: var(--muted); font-size: .95rem; opacity: 0; animation: page-loading-in .2s ease-out .3s forwards; }
.spinner { width: 2.2em; height: 2.2em; border: 3px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes page-loading-in { to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

.message { padding: .5rem .75rem; border-radius: .3rem; background: #eef3fd; }
.message.error { background: #fdecee; color: var(--error); }

table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.mono { font-family: ui-monospace, monospace; word-break: break-all; }
.status { font-weight: 700; }
progress { width: 100%; max-width: 30rem; height: 1.1rem; vertical-align: middle; }
.lines { padding-left: 1.2rem; }
.actions { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; }
.balance { font-size: 1.3rem; font-weight: 700; }