* { box-sizing: border-box; }
body { font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: #333; background: #f4f4f4; margin: 0; }
a { color: #2990ea; text-decoration: none; }
.topbar { background: #fff; border-bottom: 1px solid #e1e4e6; padding: 10px 24px;
  display: flex; align-items: center; gap: 14px; }
.topbar img { height: 30px; }
.topbar .title { font-weight: 700; color: #363b3e; font-size: 15px; }
.topbar .sp { flex: 1; }
.topbar .u { color: #9ba0a3; font-size: 13px; }
.wrap { max-width: 1080px; margin: 24px auto; padding: 0 20px; }
.card { background: #fff; border: 1px solid #e1e4e6; border-radius: 10px;
  padding: 22px 26px; margin-bottom: 18px; }
h1 { font-size: 20px; color: #000; margin: 0 0 4px; }
h2 { font-size: 15px; color: #363b3e; border-bottom: 2px solid #000;
  padding-bottom: 6px; margin: 0 0 16px; }
.sub { color: #9ba0a3; font-size: 13px; margin-bottom: 18px; }
label { display: block; font-size: 13px; color: #50575b; margin-bottom: 4px; font-weight: 600; }
input[type=text], input[type=password], input[type=file] {
  width: 100%; padding: 9px 11px; border: 1px solid #ced0d2; border-radius: 7px;
  font-size: 14px; background: #fff; }
input:focus { outline: none; border-color: #2990ea; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.field { margin-bottom: 14px; }
.btn { background: #000; color: #fff; border: none; padding: 11px 22px;
  border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.btn:hover { background: #222; }
.btn.blue { background: #2990ea; }
.btn.ghost { background: #fff; color: #363b3e; border: 1px solid #ced0d2; }

table.roster { width: 100%; border-collapse: collapse; font-size: 13px; }
table.roster th { text-align: left; color: #50575b; font-weight: 600; padding: 6px 6px;
  border-bottom: 1px solid #e1e4e6; font-size: 12px; }
table.roster td { padding: 4px 4px; vertical-align: middle; }
table.roster td.n { color: #9ba0a3; width: 26px; text-align: center; }
table.roster input { padding: 7px 8px; font-size: 13px; }
.hint { font-size: 12px; color: #9ba0a3; margin-top: 6px; line-height: 1.6; }
.hint b { color: #e8a020; }

.login-box { max-width: 360px; margin: 80px auto; }
.login-box .logo { text-align: center; margin-bottom: 20px; }
.login-box img { height: 56px; }
.err { background: #fde9e9; color: #e03939; padding: 9px 12px; border-radius: 7px;
  font-size: 13px; margin-bottom: 14px; }

.statusrow { display: flex; align-items: center; gap: 12px; padding: 12px 10px;
  border-bottom: 1px solid #eee; }
.badge { font-size: 12px; padding: 3px 10px; border-radius: 12px; font-weight: 600; white-space: nowrap; }
.b-queued { background: #eef0f1; color: #6f757a; }
.b-processing { background: #eef3f9; color: #2990ea; }
.b-done { background: #e6f5ec; color: #2e9e5b; }
.b-error { background: #fde9e9; color: #e03939; }
.statusrow .nm { font-weight: 600; color: #363b3e; min-width: 130px; }
.statusrow .meta { color: #9ba0a3; font-size: 12px; flex: 1; }
.spin { display:inline-block; width:12px; height:12px; border:2px solid #cfe0f6;
  border-top-color:#2990ea; border-radius:50%; animation: sp 0.8s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }