:root { color: #1e293b; background: #f5f8fd; font-family: Arial, "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; } body { margin: 0; } .inner { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.topbar { background: #0b5cab; color: #fff; padding: 16px 0 0; box-shadow: 0 1px 0 #084783; } .toolbar, .topbar nav, .row, .inline-form, .result { display: flex; align-items: center; gap: 18px; }
.toolbar { justify-content: space-between; padding-bottom: 16px; } .brand strong { font-size: 21px; display: block; } .brand span { color: #d9eaff; font-size: 13px; display: block; margin-top: 3px; }
.summary { display: flex; gap: 16px; color: #d9eaff; font-size: 12px; } .summary b { color: #fff; font-size: 13px; }
.topbar nav { gap: 26px; } .topbar a { color: #d9eaff; text-decoration: none; font-size: 15px; padding: 11px 2px; border-bottom: 3px solid transparent; } .topbar a:hover, .topbar a.active { color: #fff; border-bottom-color: #fff; }
section { background: #fff; border: 1px solid #d8e3f1; border-radius: 6px; padding: 22px; margin: 20px 0; box-shadow: 0 1px 2px rgb(15 79 145 / 4%); } h2 { color: #123a68; font-size: 18px; margin: 0 0 10px; } h3 { color: #27496f; font-size: 15px; margin: 24px 0 10px; }
label { display: block; font-size: 14px; margin: 12px 0; } input[type="text"], input:not([type]), textarea, input[type="file"] { width: 100%; } input, textarea { margin-top: 6px; padding: 10px; border: 1px solid #b7c9dd; border-radius: 4px; font: inherit; } textarea { resize: vertical; }
button, .button { display: inline-block; background: #0b66c3; color: #fff; border: 0; border-radius: 4px; padding: 10px 16px; font: inherit; cursor: pointer; text-decoration: none; } button:hover, .button:hover { background: #084f99; } .inline-form input { margin: 0; }
.notice, .result { padding: 12px; border-radius: 4px; } .notice.success, .result { background: #edf6ff; color: #14579d; border: 1px solid #c9e0fa; } .notice.error { background: #fff0f0; color: #b42318; } .result { justify-content: space-between; margin-top: 14px; } .muted { color: #62748a; font-size: 14px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; } .data-table th, .data-table td { border: 1px solid #d8e3f1; padding: 8px; text-align: left; vertical-align: top; } .data-table th { background: #edf5ff; color: #234e7e; white-space: nowrap; }
@media (max-width: 720px) { .toolbar { align-items: flex-start; gap: 12px; } .summary { flex-direction: column; gap: 3px; text-align: right; } .topbar nav { gap: 14px; overflow-x: auto; } .topbar a { white-space: nowrap; } .inline-form, .result { display: block; } .inline-form button { margin-top: 8px; } }