* { box-sizing: border-box; }
body { margin: 0; font-family: PingFang SC, Microsoft YaHei, system-ui, sans-serif; color: #111827; background: #eef0fb; font-size: 14px; }
.topbar { margin: 0; padding: 12px 16px; background: #fff; border-bottom: 1px solid #e5e7eb; font-size: 13px; }
.topbar a { color: #2563eb; text-decoration: none; margin-right: 14px; }
main { max-width: 640px; margin: 0 auto; padding: 24px 16px 40px; }
.card { background: #fff; border-radius: 20px; padding: 28px 24px; box-shadow: 0 10px 30px rgba(99, 102, 241, 0.12); }
h1 { margin: 0 0 10px; font-size: 26px; }
.subtitle { margin: 0 0 20px; color: #64748b; line-height: 1.7; font-size: 14px; }
.tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tab { border: 0; cursor: pointer; border-radius: 999px; padding: 9px 18px; font-size: 14px; font-weight: 600; background: #f1f5f9; color: #334155; }
.tab.active { background: #6558f5; color: #fff; }
.tab-note { color: #94a3b8; font-size: 12px; }
.field-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: #6558f5; margin: 18px 0 8px; }
.input-row { display: flex; gap: 10px; }
input, textarea { width: 100%; padding: 12px 14px; border: 1.5px solid #c7c9f5; border-radius: 12px; font-size: 15px; background: #fff; }
input:focus, textarea:focus { outline: none; border-color: #6558f5; box-shadow: 0 0 0 3px rgba(101, 88, 245, 0.15); }
.paste { flex-shrink: 0; border: 0; cursor: pointer; border-radius: 12px; padding: 0 18px; font-size: 14px; font-weight: 600; background: #eef0ff; color: #6558f5; }
.big { width: 100%; border: 0; cursor: pointer; border-radius: 999px; padding: 14px; margin-top: 14px; font-size: 16px; font-weight: 700; background: #6558f5; color: #fff; }
.big:hover { background: #5749e0; }
.error { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.code-head { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; }
.code-head .field-label { margin: 0; }
.countdown { color: #6558f5; font-size: 13px; font-weight: 600; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 38px; font-weight: 800; letter-spacing: 0.18em; text-align: center; margin: 14px 0 10px; cursor: pointer; }
.progress { height: 8px; background: #eef0ff; border-radius: 999px; overflow: hidden; }
.progress > div { height: 100%; background: #6558f5; transition: width 0.3s linear; }
.actions { display: flex; gap: 10px; margin-top: 16px; }
.copy { flex: 1; border: 0; cursor: pointer; border-radius: 12px; padding: 12px; font-size: 14px; font-weight: 700; background: #eef0ff; color: #6558f5; }
.clear { flex: 1; border: 1px solid #e5e7eb; cursor: pointer; border-radius: 12px; padding: 12px; font-size: 14px; font-weight: 600; background: #fff; color: #334155; }
#batchList { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
#batchList li { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid #eef0ff; border-radius: 12px; padding: 12px 14px; }
.batch-name { font-weight: 700; word-break: break-word; }
.batch-code { font-family: ui-monospace, monospace; font-size: 20px; font-weight: 800; letter-spacing: 0.12em; }
.batch-copy { border: 0; cursor: pointer; border-radius: 10px; padding: 8px 12px; font-weight: 700; background: #eef0ff; color: #6558f5; }
.foot { margin: 22px 0 0; color: #94a3b8; font-size: 12px; line-height: 1.6; }
@media (max-width: 520px) { .code { font-size: 30px; } .card { padding: 22px 16px; } }