html, body { height: 100%; margin: 0; }
.wrap { max-width: 960px; margin: 0 auto; padding: 16px 16px 112px; }
.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.toolbar mdui-select { flex: 0 0 240px; }
.toolbar mdui-text-field { flex: 1 1 200px; }
.meta { font-size: .875rem; color: rgb(var(--mdui-color-on-surface-variant)); margin: 4px 4px 8px; min-height: 1.25em; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 500; font-size: .8125rem; color: rgb(var(--mdui-color-on-surface-variant)); padding: 10px 12px; border-bottom: 1px solid rgb(var(--mdui-color-outline-variant)); white-space: nowrap; }
td { padding: 6px 12px; border-bottom: 1px solid rgba(var(--mdui-color-outline-variant), .5); vertical-align: middle; font-variant-numeric: tabular-nums; }
td.type { font-weight: 500; color: rgb(var(--mdui-color-primary)); }
td.name { font-weight: 500; overflow-wrap: anywhere; }
td.content { overflow-wrap: anywhere; max-width: 360px; }
td.act { white-space: nowrap; text-align: right; }
.note { display: block; font-size: .8125rem; font-weight: 400; color: rgb(var(--mdui-color-on-surface-variant)); }
.empty { padding: 48px 16px; text-align: center; color: rgb(var(--mdui-color-on-surface-variant)); }
.form { display: flex; flex-direction: column; gap: 16px; min-width: min(420px, 78vw); padding-top: 8px; }
.form label { display: flex; align-items: center; gap: 12px; }
#add { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 5; }
@media (max-width: 640px) { .hide-sm { display: none; } .toolbar mdui-select { flex-basis: 100%; } }