:root { --bg:#f4f5f7; --card:#fff; --text:#1f2328; --muted:#6b7280; --accent:#4f46e5; --border:#d0d7de; --error:#b42318; }
@media (prefers-color-scheme: dark) { :root { --bg:#0d1117; --card:#161b22; --text:#e6edf3; --muted:#8b949e; --accent:#818cf8; --border:#30363d; --error:#f97066; } }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; background:var(--bg); color:var(--text); font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
main { width:100%; max-width:400px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:28px; }
main.wide { max-width:760px; }
h1 { font-size:20px; margin:0 0 4px; }
h2 { font-size:16px; margin:28px 0 8px; }
a { color:var(--accent); }
.sub, .muted { color:var(--muted); margin-top:0; }
.error, .danger { color:var(--error); }
.info { color:var(--accent); }
.small { font-size:13px; margin:6px 0 0; }

label { display:block; font-weight:600; margin:14px 0 6px; }
input { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:transparent; color:inherit; font:inherit; }
select { padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--card); color:inherit; font:inherit; }
button { padding:10px 16px; border:1px solid var(--border); border-radius:8px; background:transparent; color:inherit; font:inherit; cursor:pointer; }
button.primary, a.button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.danger { color:var(--error); }
form > button.primary { width:100%; margin-top:20px; }
a.button { display:inline-block; padding:10px 16px; border:1px solid var(--border); border-radius:8px; color:inherit; text-decoration:none; }

.actions { display:flex; gap:12px; justify-content:flex-end; margin-top:20px; }
.links { display:flex; justify-content:space-between; margin:16px 0 0; font-size:14px; }
.row { display:flex; gap:12px; } .row > div { flex:1; min-width:0; }
form.provider > button { width:100%; margin-bottom:8px; }
.divider { text-align:center; color:var(--muted); font-size:13px; margin:8px 0 0; }
section { border-top:1px solid var(--border); margin-top:20px; }
.badge { display:inline-block; padding:1px 8px; border-radius:999px; border:1px solid var(--border); font-size:12px; color:var(--muted); }

/* Organization lists: name (link) + an action on the right */
ul.orgs { list-style:none; padding:0; margin:0; }
ul.orgs li { display:flex; align-items:center; border:1px solid var(--border); border-radius:8px; margin-bottom:8px; }
ul.orgs .go { flex:1; display:flex; justify-content:space-between; gap:8px; padding:10px 12px; text-decoration:none; }
ul.orgs .manage { padding:10px 12px; border-left:1px solid var(--border); font-size:13px; }
ul.orgs button.manage { border:0; border-left:1px solid var(--border); border-radius:0; }

/* Member administration */
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--border); vertical-align:middle; }
th { color:var(--muted); font-weight:600; }
td form { display:inline; }
td select, td button { padding:6px 10px; font-size:13px; }
.table-wrap { overflow-x:auto; }
.inline { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }
.inline > div { flex:1; min-width:180px; }
.inline > div.role-field { flex:0; min-width:130px; }
.inline label { margin-top:0; }
.inline > button.primary { width:auto; margin-top:0; }
details summary { cursor:pointer; font-size:13px; list-style:none; }
details[open] summary { margin-bottom:6px; }
td .badge { margin-left:6px; }