* { box-sizing: border-box; }
body {
    font-family: -apple-system, Segoe UI, Roboto, sans-serif;
    max-width: 1000px;
    margin: 0 auto;
    padding: 1.5rem;
    color: #1a1a1a;
    background: #fafafa;
}
nav { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; border-bottom: 1px solid #ddd; padding-bottom: .75rem; }
nav a { text-decoration: none; color: #333; font-size: .9rem; }
nav a:hover { color: #000; text-decoration: underline; }
table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9rem; }
th, td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid #e5e5e5; overflow-wrap: anywhere; }
th { background: #f0f0f0; }
input, select, textarea, button {
    font: inherit; padding: .4rem .6rem; border: 1px solid #ccc; border-radius: 4px;
}
textarea { width: 100%; min-height: 8rem; }
button { background: #222; color: #fff; border: none; cursor: pointer; }
button:hover { background: #444; }
button.secondary { background: #888; }
button.danger { background: #b3261e; }
.badge { padding: .1rem .5rem; border-radius: 10px; font-size: .75rem; color: #fff; }
.badge-ok { background: #2e7d32; }
.badge-warn { background: #b26a00; }
.badge-bad { background: #b3261e; }
.card { background: #fff; border: 1px solid #e5e5e5; border-radius: 6px; padding: 1rem; margin-bottom: 1rem; overflow: hidden; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
form.inline { display: inline; }
.error { color: #b3261e; }
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
code { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
details { max-width: 100%; }

@media (max-width: 640px) {
    body { padding: 1rem; }
    th, td { min-width: 7rem; }
    button, input, select { max-width: 100%; }
}