:root{
  --bg:#f6f7f9;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --line:#e5e7eb;
  --accent:#2563eb;
}

*{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(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--card);border-bottom:1px solid var(--line);flex-wrap:wrap;gap:8px}
.brand{font-weight:700}
.nav a{margin-left:12px}
.nav a.active{font-weight:700;text-decoration:underline}
.container{max-width:1200px;margin:18px auto;padding:0 14px}
.container-wide{max-width:1560px}
.footer{padding:14px;text-align:center;color:var(--muted)}

.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;margin:12px 0;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row > div{flex:1}
.muted{color:var(--muted)}
.badge{display:inline-block;padding:3px 8px;border:1px solid var(--line);border-radius:999px;font-size:12px;color:var(--muted);background:#fff}

.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.table th{font-size:12px;text-transform:uppercase;color:var(--muted);letter-spacing:.04em}
.actions a{margin-right:10px}

input,select,textarea{width:100%;padding:9px;border:1px solid var(--line);border-radius:8px;background:#fff}
input[type=checkbox]{width:auto;}
textarea{min-height:90px}
.btn{display:inline-block;padding:9px 12px;border-radius:8px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:14px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.danger{background:#b91c1c;border-color:#b91c1c;color:#fff}
.btn + .btn{margin-left:8px}

.small{font-size:13px}