:root { --bg:#f6f7f9; --card:#fff; --line:#dde1e6; --text:#1b1f24; --accent:#2563eb; --danger:#dc2626; --warn-bg:#fef3c7; --err-bg:#fee2e2; }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); }
main { max-width:960px; margin:1.5rem auto; padding:0 1rem; }
.topbar { display:flex; align-items:center; gap:1.5rem; padding:.6rem 1rem; background:var(--card); border-bottom:1px solid var(--line); }
.topbar nav { display:flex; gap:1rem; }
.topbar nav a { text-decoration:none; color:var(--text); padding:.25rem .5rem; border-radius:6px; }
.topbar nav a.active { background:var(--accent); color:#fff; }
.instance-select { margin-left:auto; }
.instance-select select { padding:.35rem .5rem; border:1px solid var(--line); border-radius:6px; }
.banner { padding:.6rem 1rem; }
.banner.error { background:var(--err-bg); }
.banner.warn { background:var(--warn-bg); }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:8px; }
th, td { text-align:left; padding:.55rem .75rem; border-bottom:1px solid var(--line); }
.badge { display:inline-block; padding:.1rem .5rem; border-radius:999px; font-size:.75rem; background:#e5e7eb; margin-right:.25rem; }
.badge.community { background:#dbeafe; }
.badge.announce { background:#fef9c3; }
.badge.linked { background:#dcfce7; }
.badge.admin { background:#ede9fe; }
button { padding:.4rem .8rem; border:1px solid var(--line); border-radius:6px; background:var(--accent); color:#fff; cursor:pointer; }
button.danger { background:var(--danger); }
button.ghost { background:transparent; color:var(--text); }
button:disabled { opacity:.45; cursor:not-allowed; }
a.btn { display:inline-block; padding:.4rem .8rem; border:1px solid var(--line); border-radius:6px; background:var(--accent); color:#fff; text-decoration:none; }
input[type=text], input[type=password] { padding:.45rem .6rem; border:1px solid var(--line); border-radius:6px; }
.login { max-width:320px; margin-top:6rem; text-align:center; }
.login form { display:flex; flex-direction:column; gap:.75rem; }
.flash { padding:.4rem .75rem; background:var(--card); border-left:3px solid var(--accent); margin:.25rem 0; }
.hint { color:#6b7280; }
.community-card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:1rem; margin-bottom:1rem; }
.add-member { display:flex; gap:.5rem; margin:.75rem 0; }
.error { color:var(--danger); }
.meta { color:#6b7280; }
code { font-size:.85em; }
.sb-ctrl { display:flex; gap:.5rem; align-items:center; margin:.5rem 0; }
.sb-search { padding:.45rem .6rem; border:1px solid var(--line); border-radius:6px; margin:.5rem 0; width:100%; max-width:360px; display:block; }
#sb-overlay { position:fixed; inset:0; background:rgba(255,255,255,.6); display:none; align-items:center; justify-content:center; z-index:1000; }
#sb-overlay.on { display:flex; }
#sb-overlay .sb-msg { margin-left:.75rem; color:var(--text); }
.sb-spin { width:38px; height:38px; border:4px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:sb-rot .8s linear infinite; }
@keyframes sb-rot { to { transform:rotate(360deg); } }
.htmx-request { cursor:progress; }
.htmx-request button[type=submit] { opacity:.55; pointer-events:none; }
.sb-building { display:flex; align-items:center; gap:.75rem; margin:1rem 0; color:var(--text); }