* { box-sizing: border-box }
body { margin: 0; font: 14px/1.5 system-ui, sans-serif; color: #222; background: #f5f6f8 }
#bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background: #fff; border-bottom: 1px solid #ddd }
main { max-width: 960px; margin: 0 auto; padding: 20px }
button { font: inherit; padding: 5px 12px; border: 1px solid #bbb; border-radius: 4px; background: #fff; cursor: pointer }
button:disabled { opacity: .5; cursor: default }
button.primary { background: #2563eb; border-color: #2563eb; color: #fff }
.tabs { display: flex; gap: 4px; margin-bottom: 16px }
.tabs button[aria-selected=true] { background: #2563eb; border-color: #2563eb; color: #fff }
.err { color: #b91c1c; background: #fee2e2; padding: 8px 12px; border-radius: 4px }
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px }
.card { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: #fff; border: 1px solid #ddd; border-radius: 8px }
.card .body { display: flex; flex-direction: column; flex: 1 }
.card .body span { color: #666 }
.icon { width: 48px; height: 48px; border-radius: 10px; object-fit: contain }
.icon.fallback { display: flex; align-items: center; justify-content: center; background: #e5e7eb; font-weight: 700; font-size: 20px }
table { width: 100%; border-collapse: collapse; background: #fff; margin-bottom: 16px }
th, td { padding: 6px 10px; border-bottom: 1px solid #eee; text-align: left }
form.col { display: flex; flex-direction: column; gap: 8px; max-width: 480px }
form.col label { display: flex; flex-direction: column; gap: 2px }
input, textarea { font: inherit; padding: 5px 8px; border: 1px solid #bbb; border-radius: 4px }
.login { max-width: 320px; margin: 40px auto; display: flex; flex-direction: column; gap: 8px }