*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f7f7f9; color: #1a1a1a; }
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }

.topnav { display: flex; align-items: center; gap: 1.5rem; padding: 0.75rem 1.25rem; background: #111827; color: #f9fafb; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.topnav .brand { font-weight: 600; letter-spacing: 0.02em; margin-right: 1rem; }
.topnav nav { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.topnav nav a { color: #d1d5db; padding: 0.25rem 0.5rem; border-radius: 6px; }
.topnav nav a:hover { background: #1f2937; color: #fff; text-decoration: none; }
.topnav .logout { margin-left: auto; }
.topnav .logout button { background: transparent; color: #d1d5db; border: 1px solid #374151; padding: 0.35rem 0.8rem; border-radius: 6px; cursor: pointer; }
.topnav .logout button:hover { background: #1f2937; color: #fff; }

main { max-width: 1400px; margin: 0 auto; padding: 1.5rem 1.25rem; }
h1 { margin-top: 0; font-size: 1.6rem; }
.muted { color: #6b7280; font-weight: 400; font-size: 1rem; }
.hint { color: #6b7280; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin: 1rem 0 2rem; }
.card { display: block; padding: 1.25rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; text-decoration: none; color: inherit; transition: transform .05s; }
.card:hover { border-color: #2563eb; text-decoration: none; }
.card-title { font-size: 0.9rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; }
.card-count { font-size: 2rem; font-weight: 600; margin-top: 0.25rem; }
.card-sub { color: #6b7280; font-size: 0.85rem; }

.widgets { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0; align-items: stretch; }
.widget { display: block; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 0.9rem 1.2rem; text-decoration: none; color: inherit; min-width: 180px; transition: border-color .1s; }
.widget:hover { border-color: #2563eb; text-decoration: none; }
.widget.active { border-color: #2563eb; background: #eff6ff; }
.widget-count { font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.widget-label { color: #6b7280; font-size: 0.85rem; margin-top: 0.25rem; }
.widget-clear { align-self: center; color: #6b7280; font-size: 0.9rem; padding: 0.5rem 0.75rem; }

.search { display: flex; gap: 0.5rem; margin: 1rem 0; }
.search input { flex: 1; max-width: 400px; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.95rem; }
.search button { padding: 0.5rem 1rem; background: #2563eb; color: #fff; border: 0; border-radius: 6px; cursor: pointer; }
.search .clear { align-self: center; color: #6b7280; }

.table-wrap { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th, td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid #f1f5f9; white-space: nowrap; }
th { background: #f9fafb; font-weight: 600; color: #374151; position: sticky; top: 0; }
th.sortable a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.25rem; }
th.sortable a:hover { color: #2563eb; text-decoration: none; }
th.sortable.active a { color: #2563eb; }
th .sort-ind { font-size: 0.7rem; opacity: 0.7; }
tr:hover td { background: #f9fafb; }
td { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.right { text-align: right; }

.pager { display: flex; gap: 1rem; align-items: center; justify-content: center; margin: 1rem 0; color: #6b7280; }

.checks { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; }
.checks tr.check-row { cursor: pointer; }
.checks tr.check-row:hover td { background: #eff6ff; }
.checks tr.bad td { color: #b91c1c; font-weight: 500; }
.checks tr.ok td { color: #15803d; }
.checks .table-cell code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; color: #374151; font-size: 0.8rem; }
.checks a { color: inherit; text-decoration: none; }
.checks a:hover { text-decoration: underline; }

.empty { text-align: center; color: #6b7280; padding: 3rem 0; }

.login-body { display: grid; place-items: center; min-height: 100vh; background: #111827; }
form.login { background: #fff; padding: 2rem 2.5rem; border-radius: 12px; width: 100%; max-width: 360px; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
form.login h1 { margin: 0 0 1.5rem; font-size: 1.4rem; text-align: center; }
form.login label { display: block; margin-bottom: 1rem; }
form.login label span { display: block; font-size: 0.85rem; color: #6b7280; margin-bottom: 0.25rem; }
form.login input { width: 100%; padding: 0.6rem 0.8rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1rem; }
form.login button { width: 100%; padding: 0.7rem; background: #2563eb; color: #fff; border: 0; border-radius: 6px; font-size: 1rem; cursor: pointer; }
form.login button:hover { background: #1d4ed8; }
form.login .err { background: #fee2e2; color: #991b1b; padding: 0.6rem 0.8rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.9rem; }