:root {
    font-family: Inter, Arial, sans-serif;
    color: #172033;
    background: #f5f7fb;
}
* { box-sizing: border-box; }
body { margin: 0; background: #f5f7fb; }
a { color: #175cd3; }
.container { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.topbar { background: #101828; color: #fff; padding: 16px 0; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav nav { display: flex; gap: 16px; flex-wrap: wrap; }
.nav a { color: #fff; text-decoration: none; }
main { padding: 30px 0 60px; }
h1 { margin-top: 0; }
.card, .auth-card, .verify-card {
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(16,24,40,.06);
}
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat { background: #fff; border: 1px solid #e4e7ec; border-radius: 14px; padding: 20px; }
.stat span { display: block; color: #667085; margin-bottom: 10px; }
.stat strong { font-size: 30px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.full { grid-column: 1 / -1; }
label { display: grid; gap: 8px; font-weight: 600; }
input, select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    font: inherit;
}
small, .muted { color: #667085; font-weight: 400; }
button, .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    padding: 12px 18px;
    background: #175cd3;
    color: #fff;
    text-decoration: none;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.button.secondary { background: #e4e7ec; color: #344054; }
.alert { border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; }
.alert.success { background: #ecfdf3; color: #027a48; }
.alert.error { background: #fef3f2; color: #b42318; }
.filter { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 12px; align-items: end; }
.actions { display: flex; justify-content: space-between; align-items: center; margin: 18px 0; gap: 12px; }
.table-wrap { overflow-x: auto; background: #fff; border-radius: 14px; border: 1px solid #e4e7ec; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #eaecf0; white-space: nowrap; }
th { background: #f9fafb; }
.pagination { display: flex; gap: 6px; margin-top: 20px; }
.pagination a { padding: 8px 12px; background: #fff; border: 1px solid #d0d5dd; border-radius: 8px; text-decoration: none; }
.pagination a.active { background: #175cd3; color: #fff; }
.auth-page, .verify-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}
.auth-card { width: min(440px, 100%); }
.auth-card form, .verify-form { display: grid; gap: 16px; }
.verify-card { width: min(680px, 100%); }
.verification { margin-top: 24px; border-radius: 14px; padding: 24px; text-align: center; }
.verification.valid { background: #ecfdf3; border: 1px solid #abefc6; }
.verification.invalid { background: #fef3f2; border: 1px solid #fecdca; }
.status-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto; border-radius: 50%; font-size: 34px; font-weight: 800; }
.valid .status-icon { color: #027a48; background: #d1fadf; }
.invalid .status-icon { color: #b42318; background: #fee4e2; }
dl { text-align: left; margin: 20px 0; }
dl div { display: grid; grid-template-columns: 170px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
dt { color: #667085; }
dd { margin: 0; font-weight: 700; }
.warning { background: #fffaeb; border: 1px solid #fedf89; color: #93370d; padding: 14px; border-radius: 10px; text-align: left; }
.first-check { color: #027a48; font-weight: 700; }
@media (max-width: 800px) {
    .stats { grid-template-columns: 1fr 1fr; }
    .form-grid, .filter { grid-template-columns: 1fr; }
    .full { grid-column: auto; }
    .nav { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 520px) {
    .stats { grid-template-columns: 1fr; }
    dl div { grid-template-columns: 1fr; }
}