* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --navy: #0f2f5c;
  --navy2: #1a4a86;
  --blue: #2470d4;
  --blue-l: #e8f1fd;
  --cyan: #0f9fa8;
  --teal-l: #e2f6f7;
  --amber: #e08b1e;
  --amber-l: #fdf2e0;
  --green: #16884c;
  --green-l: #e4f5ea;
  --red: #cf3a3a;
  --red-l: #fdeaeb;
  --purple: #6b4bb0;
  --purple-l: #efeaf9;
  --ink: #1e2733;
  --ink2: #526072;
  --ink3: #8b97a7;
  --line: #dfe6ef;
  --bg: #eef2f8;
}
body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; }
a { color: var(--blue); text-decoration: none; }
button { font-family: inherit; }

/* ---------- 按钮 ---------- */
.btn { display: inline-block; background: linear-gradient(135deg, var(--blue) 0%, var(--navy2) 100%); color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-size: 15px; cursor: pointer; box-shadow: 0 2px 6px rgba(28, 84, 158, .22); transition: .15s; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn.ghost { background: #fff; color: var(--navy2); border: 1px solid #b9cdea; box-shadow: none; }
.btn.ghost:hover { background: var(--blue-l); }
.btn.danger { background: linear-gradient(135deg, #e05656 0%, #b52b2b 100%); }
.btn.sm { padding: 5px 11px; font-size: 13px; border-radius: 6px; }

/* ---------- 卡片 / 表单 ---------- */
.card { background: #fff; border-radius: 14px; padding: 18px; margin-bottom: 14px; box-shadow: 0 2px 10px rgba(19, 44, 82, .07); border: 1px solid #e7edf6; }
.input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 15px; background: #fff; transition: .15s; }
.input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36, 112, 212, .13); }
textarea { min-height: 90px; }
.label { font-size: 13px; color: var(--ink2); margin: 10px 0 4px; display: block; font-weight: 600; }
.err { color: var(--red); font-size: 14px; margin-top: 8px; min-height: 18px; }
.okmsg { color: var(--green); font-size: 14px; margin-top: 8px; }

/* ---------- 顶栏 ---------- */
.topbar { background: linear-gradient(115deg, #0c2647 0%, var(--navy2) 55%, #14607a 100%); color: #fff; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 5; box-shadow: 0 2px 12px rgba(12, 38, 71, .3); }
.topbar .title { font-size: 17px; font-weight: 600; letter-spacing: .5px; display: flex; align-items: center; gap: 10px; }
.topbar .t-name { line-height: 1.3; }
.topbar .logo { width: 40px; height: 40px; flex: none; border-radius: 9px; background: #fff; box-shadow: 0 2px 8px rgba(5, 18, 38, .35); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.topbar .logo img { width: 82%; height: 82%; object-fit: contain; }
.topbar .sub { font-size: 12px; opacity: .8; margin-top: 2px; font-weight: 400; }
.topbar .who { font-size: 13px; opacity: .95; text-align: right; }
.topbar a { color: #ffd88a; }

.wrap { max-width: 720px; margin: 0 auto; padding: 16px; }
.wrap.wide { max-width: 1160px; }

/* ---------- 工种卡 / 选项 ---------- */
.job-card { display: flex; justify-content: space-between; align-items: center; border: 1px solid #e3e8f0; border-left: 4px solid var(--blue); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; background: #fff; box-shadow: 0 2px 8px rgba(19, 44, 82, .05); }
.job-card:nth-child(3n+2) { border-left-color: var(--cyan); }
.job-card:nth-child(3n) { border-left-color: var(--amber); }
.job-card .info { font-size: 13px; color: var(--ink2); margin-top: 4px; line-height: 1.7; }
.badge { display: inline-block; font-size: 12px; border-radius: 5px; padding: 2px 7px; margin-right: 4px; font-weight: 600; }
.badge.dan { background: var(--blue-l); color: var(--navy2); }
.badge.duo { background: var(--amber-l); color: #9a5c00; }
.badge.pan { background: var(--green-l); color: var(--green); }
.badge.lv1 { background: var(--purple-l); color: var(--purple); }
.badge.lv2 { background: var(--cyan-l, var(--teal-l)); color: #0a7a80; }
.badge.lv3 { background: var(--blue-l); color: var(--navy2); }
.badge.off { background: var(--red-l); color: var(--red); }
.badge.on { background: var(--green-l); color: var(--green); }

.option { display: block; border: 1px solid #d7deea; border-radius: 9px; padding: 11px 13px; margin: 8px 0; cursor: pointer; font-size: 15px; background: #fff; transition: .12s; }
.option:hover { border-color: var(--blue); }
.option.sel { border-color: var(--blue); background: var(--blue-l); box-shadow: inset 0 0 0 1px var(--blue); }
.option.right { border-color: var(--green); background: var(--green-l); }
.option.wrong { border-color: var(--red); background: var(--red-l); }
.q-title { font-size: 16px; line-height: 1.65; margin-bottom: 8px; }

/* ---------- 计时 / 进度 ---------- */
.timer { font-weight: 700; color: #ffd88a; font-size: 17px; font-variant-numeric: tabular-nums; }
.timer.danger { color: #ff8080; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .45; } }
.progress { height: 7px; background: #e6ebf3; border-radius: 4px; overflow: hidden; margin: 8px 0 2px; }
.progress > div { height: 100%; background: linear-gradient(90deg, var(--blue) 0%, var(--cyan) 100%); width: 0; transition: width .25s; }

/* ---------- 表格 ---------- */
table.list { width: 100%; border-collapse: collapse; font-size: 14px; }
table.list th, table.list td { border-bottom: 1px solid #eaeff6; padding: 9px 7px; text-align: left; }
table.list th { background: linear-gradient(180deg, #f7f9fd 0%, #eef2f8 100%); font-weight: 700; color: var(--navy); font-size: 13px; }
table.list tbody tr:hover, table.list tr:hover td { background: #f6faff; }

/* ---------- 标签页 ---------- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; background: #fff; padding: 6px; border-radius: 12px; box-shadow: 0 2px 8px rgba(19, 44, 82, .06); border: 1px solid #e7edf6; }
.tabs button { border: none; background: transparent; border-radius: 8px; padding: 9px 18px; font-size: 14px; cursor: pointer; color: var(--ink2); font-weight: 600; transition: .15s; }
.tabs button:hover { background: var(--blue-l); color: var(--navy2); }
.tabs button.on { background: linear-gradient(135deg, var(--blue) 0%, var(--navy2) 100%); color: #fff; box-shadow: 0 2px 6px rgba(28, 84, 158, .3); }
.tabs button.lock { opacity: .38; cursor: not-allowed; }

/* ---------- 弹窗 ---------- */
.modal-mask { position: fixed; inset: 0; background: rgba(12, 26, 48, .5); display: none; align-items: center; justify-content: center; z-index: 20; padding: 16px; }
.modal-mask.show { display: flex; }
.modal { background: #fff; border-radius: 16px; padding: 22px; width: 100%; max-width: 580px; max-height: 90vh; overflow: auto; box-shadow: 0 16px 48px rgba(12, 26, 48, .28); }
.modal > b { display: block; font-size: 17px; color: var(--navy); border-bottom: 2px solid var(--blue-l); padding-bottom: 10px; margin-bottom: 6px; }

/* ---------- 登录 ---------- */
.login-page { min-height: 100vh; background: linear-gradient(150deg, #0c2647 0%, #143d6b 45%, #12617a 100%); display: flex; align-items: center; padding: 24px 16px; }
.login-box { max-width: 420px; margin: 0 auto; width: 100%; }
.login-box .brand { text-align: center; color: #fff; margin-bottom: 18px; }
.login-box .brand .ico { width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 18px; background: #fff; border: 1px solid rgba(255, 255, 255, .55); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 8px 24px rgba(5, 18, 38, .35); }
.login-box .brand .ico img { width: 78%; height: 78%; object-fit: contain; }
.login-box h1 { font-size: 19px; text-align: center; line-height: 1.55; color: #fff; font-weight: 700; }
.login-box h2.sys-line { font-size: 17px; text-align: center; line-height: 1.5; color: rgba(255, 255, 255, .95); font-weight: 600; margin-top: 4px; }
.expire-tip { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff; font-size: 12px; font-weight: 600; }
.expire-tip.warn { background: #e67e00; color: #fff; }
.login-box p.sub { text-align: center; color: rgba(255, 255, 255, .72); font-size: 13px; margin: 8px 0 16px; }
.login-box .card { border: none; box-shadow: 0 14px 40px rgba(6, 20, 40, .32); }
.login-box .foot { text-align: center; color: rgba(255, 255, 255, .82); font-size: 13px; margin-top: 16px; line-height: 1.8; font-weight: 600; }
.login-box .note { text-align: center; color: rgba(255, 255, 255, .55); font-size: 12px; margin-top: 6px; }

/* ---------- 其他 ---------- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chk-jobs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chk-jobs label { font-size: 13px; border: 1px solid #d7deea; border-radius: 7px; padding: 5px 9px; cursor: pointer; background: #fff; }
.chk-jobs label.on { background: var(--blue-l); border-color: var(--blue); color: var(--navy2); font-weight: 600; }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.stat-cards .card { margin: 0; text-align: center; padding: 18px 12px; color: #fff; border: none; }
.stat-cards .card:nth-child(4n+1) { background: linear-gradient(135deg, #2470d4, #143d6b); }
.stat-cards .card:nth-child(4n+2) { background: linear-gradient(135deg, #0fa39c, #0a6f74); }
.stat-cards .card:nth-child(4n+3) { background: linear-gradient(135deg, #e08b1e, #b96410); }
.stat-cards .card:nth-child(4n) { background: linear-gradient(135deg, #6b4bb0, #46306f); }
.stat-cards .num { font-size: 30px; font-weight: 800; color: #fff; line-height: 1.2; }
.stat-cards .lbl { font-size: 13px; color: rgba(255, 255, 255, .85); margin-top: 5px; }
.score-big { font-size: 46px; font-weight: 800; color: var(--blue); text-align: center; }
.muted { color: var(--ink3); font-size: 13px; }
.pager { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 12px; }
.sheet { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } .wrap { padding: 10px; } .topbar .who { font-size: 12px; } }

.icp-foot { text-align: center; padding: 16px 10px 24px; font-size: 12px; color: #8b97a7; }
.icp-foot a { color: #8b97a7; text-decoration: none; }
.icp-foot a:hover { text-decoration: underline; }
.login-page .icp-foot { color: rgba(255,255,255,.55); }
.login-page .icp-foot a { color: rgba(255,255,255,.75); }