* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, "Microsoft YaHei", sans-serif; background: #f5f6fa; color: #333; line-height: 1.6; }
a { color: #3498db; text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 900px; margin: 30px auto; padding: 0 20px; }

h1 { text-align: center; margin-bottom: 24px; font-size: 24px; color: #2c3e50; }
h2 { font-size: 20px; margin-bottom: 16px; color: #2c3e50; }

.topnav { background: #2c3e50; padding: 0 20px; display: flex; align-items: center; height: 50px; }
.topnav .brand { color: #fff; font-weight: bold; margin-right: 30px; }
.topnav a { color: #bdc3c7; padding: 0 15px; line-height: 50px; display: inline-block; }
.topnav a:hover { color: #fff; text-decoration: none; }
.topnav a.active { color: #fff; border-bottom: 2px solid #3498db; }
.topnav .user { margin-left: auto; color: #bdc3c7; font-size: 13px; }
.topnav .user a { display: inline; padding: 0; }

.search-box { display: flex; gap: 10px; max-width: 500px; margin: 0 auto 24px; }
.search-box input { flex: 1; padding: 12px 16px; border: 1px solid #ddd; border-radius: 8px; font-size: 15px; }
.search-box button, .btn-primary { padding: 12px 24px; background: #3498db; color: #fff; border: none; border-radius: 8px; font-size: 15px; cursor: pointer; }
.search-box button:hover, .btn-primary:hover { background: #2980b9; text-decoration: none; }

.form-card { background: #fff; padding: 24px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); max-width: 500px; }
.form-card label { display: block; margin-bottom: 14px; font-size: 14px; color: #555; }
.form-card input[type=text], .form-card input[type=password], .form-card input[type=date], .form-card textarea {
    width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; margin-top: 4px;
}
.form-card textarea { font-family: monospace; }
.form-card .checkbox-label { display: flex; align-items: center; gap: 8px; }
.form-card .checkbox-label input { width: auto; margin: 0; }
.form-card small { color: #999; }

.result { max-width: 500px; margin: 20px auto; padding: 24px; border-radius: 10px; text-align: center; }
.result.ok { background: #e8f8f0; border: 1px solid #2ecc71; }
.result.fail { background: #fde8e8; border: 1px solid #e74c3c; }
.result-icon { font-size: 40px; margin-bottom: 8px; }
.result.ok .result-icon { color: #27ae60; }
.result.fail .result-icon { color: #e74c3c; }

.info-table { width: 100%; margin-top: 16px; text-align: left; border-collapse: collapse; }
.info-table td { padding: 8px 12px; border-bottom: 1px solid #eee; font-size: 14px; }
.info-table td:first-child { color: #888; width: 100px; }

.data-table { width: 100%; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-collapse: collapse; }
.data-table th { background: #f8f9fa; padding: 12px; text-align: left; font-size: 14px; color: #666; border-bottom: 2px solid #eee; }
.data-table td { padding: 12px; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
.data-table tr:hover td { background: #fafbfc; }

.tag-green { background: #2ecc71; color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 12px; }
.tag-red { background: #e74c3c; color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 12px; }

.error { background: #fde8e8; color: #c0392b; padding: 12px; border-radius: 8px; margin: 12px 0; text-align: center; }
.notice { background: #e8f4fd; color: #2980b9; padding: 12px; border-radius: 8px; margin-bottom: 16px; }

.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.footer { text-align: center; margin-top: 30px; font-size: 13px; color: #999; }