* { box-sizing: border-box; }
body { font-family: -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; background: #f4f5f7; color: #1c1e21; }
.topbar { display:flex; justify-content:space-between; align-items:center; background:#20232a; color:#fff; padding: 14px 24px; }
.topbar a { color: #9ecbff; }
main { max-width: 960px; margin: 24px auto; padding: 0 16px; }
.card { background:#fff; border-radius:8px; padding:20px; margin-bottom:20px; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
h1 { font-size:18px; margin:0; }
h2 { font-size:16px; margin-top:0; }
table { width:100%; border-collapse: collapse; font-size:14px; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid #eee; }
.row-disabled { opacity:.55; }
.badge { padding:2px 8px; border-radius:12px; font-size:12px; }
.badge-active { background:#e3f7e9; color:#1a7f37; }
.badge-disabled { background:#fdeaea; color:#c22; }
.actions { display:flex; gap:6px; flex-wrap:wrap; }
.inline-action { display:inline; }
.inline-form { display:flex; gap:8px; flex-wrap: wrap; }
input { padding:8px; border:1px solid #ccc; border-radius:6px; font-size:14px; }
button { padding:8px 12px; border:none; border-radius:6px; background:#2563eb; color:#fff; cursor:pointer; font-size:13px; }
.btn-warn { background:#d97706; }
.btn-ok { background:#059669; }
.btn-danger { background:#dc2626; }
.flash { padding:10px 14px; border-radius:6px; }
.flash.ok { background:#e3f7e9; color:#1a7f37; }
.flash.error { background:#fdeaea; color:#c22; }
.login-page { display:flex; align-items:center; justify-content:center; height:100vh; }
.login-box { background:#fff; padding:32px; border-radius:10px; box-shadow:0 2px 12px rgba(0,0,0,.15); display:flex; flex-direction:column; gap:12px; width:280px; }
.login-box label { display:flex; flex-direction:column; gap:4px; font-size:13px; }
.error { color:#c22; font-size:13px; }