:root {
    --blue: #173f73;
    --green: #237a57;
    --red: #b42318;
    --yellow: #a15c00;
    --bg: #f5f7fb;
    --card: #ffffff;
    --text: #1d2939;
    --muted: #667085;
    --border: #d0d5dd;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}
a { color: var(--blue); text-decoration: none; }
.topbar {
    background: var(--blue);
    color: white;
    padding: 14px 28px;
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
}
.topbar a { color: white; margin-right: 14px; }
.brand { font-weight: 800; font-size: 1.25rem; }
.container { max-width: 1080px; margin: 28px auto; padding: 0 18px; }
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 18px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
}
.notice { border-left: 5px solid var(--green); }
.hero {
    background: linear-gradient(135deg, #173f73, #2364a8);
    color: white;
    border-radius: 22px;
    padding: 42px;
}
.hero a { color: white; border: 1px solid white; padding: 10px 16px; border-radius: 10px; display: inline-block; margin-top: 12px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
label { display: block; font-weight: 650; margin-top: 14px; }
input, select, textarea {
    width: 100%;
    padding: 11px 12px;
    margin-top: 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: white;
}
button, .btn {
    border: 0;
    background: var(--blue);
    color: white;
    padding: 11px 16px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-block;
    margin-top: 16px;
}
.btn.secondary { background: #475467; }
.btn.danger { background: var(--red); }
.badge { padding: 5px 10px; border-radius: 999px; font-weight: 700; display: inline-block; }
.badge.valid { background: #dcfae6; color: var(--green); }
.badge.warn { background: #fef0c7; color: var(--yellow); }
.badge.bad { background: #fee4e2; color: var(--red); }
table { width: 100%; border-collapse: collapse; background: white; border-radius: 12px; overflow: hidden; }
th, td { padding: 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.footer { color: var(--muted); padding: 24px; text-align: center; }
.validation-summary-errors { color: var(--red); }
.small { color: var(--muted); font-size: .92rem; }
.qr { width: 230px; height: 230px; border: 1px solid var(--border); padding: 10px; border-radius: 12px; background: white; }
.page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 18px 0; }
.stat { border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: #f9fafb; }
.stat span { display: block; color: var(--muted); font-size: .9rem; }
.stat strong { font-size: 1.5rem; }
.filter-bar { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 12px; align-items: end; margin: 18px 0; }
.filter-actions { display: flex; gap: 8px; align-items: end; }
.compact-card { box-shadow: none; margin-bottom: 16px; }
.review-form textarea { min-height: 110px; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.inline-form { border-top: 1px solid var(--border); margin-top: 18px; padding-top: 14px; }
.inline-form select { max-width: 280px; }
@media (max-width: 760px) {
    .filter-bar { grid-template-columns: 1fr; }
    table { display: block; overflow-x: auto; }
}