:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { font: 16px/1.5 system-ui, sans-serif; max-width: 46rem; margin: 0 auto; padding: 1rem; }
header h1 { margin: 0; font-size: 1.6rem; }
header p { margin: .1rem 0 1rem; color: #888; }
h2 { margin-top: 1.5rem; }
h3 { margin-top: 1.75rem; border-bottom: 1px solid #8884; padding-bottom: .25rem; }
a { color: #3a6ea5; }
a.btn, button { display: inline-block; padding: .5rem 1rem; border: 1px solid #8886; border-radius: .4rem;
  background: #3a6ea5; color: #fff; text-decoration: none; cursor: pointer; font: inherit; }
ul.guilds, ul.channels { list-style: none; padding: 0; }
ul.guilds li, ul.channels li { padding: .35rem 0; }
.setting { display: flex; align-items: flex-end; gap: .75rem; margin: .6rem 0; flex-wrap: wrap; }
.setting label { display: flex; flex-direction: column; flex: 1 1 20rem; font-weight: 600; }
.setting .hint { font-weight: 400; font-size: .82rem; color: #888; }
.setting input, .setting select { padding: .4rem; font: inherit; margin-top: .2rem; }
.setting button { flex: 0 0 auto; }
.stat { display: flex; gap: .75rem; align-items: baseline; padding: .3rem 0; }
.stat .k { flex: 1 1 auto; font-weight: 600; }
.stat .note { color: #888; font-size: .82rem; }
.muted { color: #888; font-size: .9rem; }
.flash { padding: .6rem .9rem; border-radius: .4rem; margin: .8rem 0; }
.flash.ok { background: #2e7d3222; border: 1px solid #2e7d32; }
.flash.err { background: #c6282822; border: 1px solid #c62828; }