:root { --gap:12px; --fg:#222; --muted:#777; --bg:#fff; --brand:#0a7; }
* { box-sizing: border-box; }
html,body {margin:0; padding:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;}
body { background: var(--bg); color: var(--fg); }
.container { max-width: 1060px; margin: 0 auto; padding: 16px; }
.header { display:flex; align-items:center; justify-content:space-between; gap: var(--gap); flex-wrap: wrap; margin-bottom: 12px; }
.header h1 { font-size: 18px; margin:0; }
.nav a { text-decoration:none; margin-right:10px; color: var(--brand); }
.card { background:#f7f7f7; padding:16px; border-radius:10px; }
.row { display:flex; gap:var(--gap); flex-wrap:wrap; }
.row > .field { flex:1 1 180px; min-width: 160px; }
label { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }
input, select, textarea, button { width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:8px; font-size:14px; }
button { background:#0a7; color:#fff; border:none; cursor:pointer; }
button.secondary { background:#444; }
table { width:100%; border-collapse: collapse; font-size:14px; background:#fff; }
th, td { border:1px solid #e7e7e7; padding:8px; text-align:right; }
th:first-child, td:first-child { text-align:center; }
tfoot td { font-weight:700; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 720px) {
  th, td { padding:10px 6px; }
}
.footer { margin-top:18px; font-size:12px; color:#888; text-align:center; }
.alert { padding:10px 12px; border-radius:8px; background:#fff1c7; border:1px solid #ffe082; margin-bottom:12px;}
.login { max-width: 360px; margin: 10vh auto; }
.badge { display:inline-block; padding:2px 6px; background:#0a7; color:#fff; border-radius:6px; font-size:12px; }