:root { font-family: system-ui, "Microsoft JhengHei", sans-serif; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #101827; color: #edf4ff; padding: 24px; }
.card { width: min(100%, 460px); background: #1b2940; border: 1px solid #344765; border-radius: 16px; padding: 30px; box-shadow: 0 16px 50px #0005; }
h1 { margin: 0 0 10px; font-size: 28px; }
h2 { font-size: 19px; margin-top: 30px; }
.lead { color: #b8c9dc; line-height: 1.6; }
#message { min-height: 1.5em; color: #ffca7a; }
[hidden] { display: none !important; }
form { display: grid; gap: 16px; }
label { display: grid; gap: 7px; font-size: 14px; }
input { width: 100%; padding: 11px; border-radius: 8px; border: 1px solid #50627c; color: white; background: #101827; font: inherit; }
button, .primary { border: 0; border-radius: 8px; padding: 11px 16px; font: inherit; font-weight: 600; cursor: pointer; background: #3785ef; color: white; text-decoration: none; display: inline-block; text-align: center; }
button:hover, .primary:hover { filter: brightness(1.12); }
.secondary { background: #394c66; margin-left: 8px; }
.tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.tabs button { flex: 1; background: #394c66; }
.tabs button.selected { background: #3785ef; }
#member p { line-height: 1.6; }
.request { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #344765; padding: 12px 0; }
.request span { overflow-wrap: anywhere; }
.request button { padding: 7px 10px; font-size: 13px; }
.request .deny { background: #744050; }
.actions { display: flex; gap: 6px; }