:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; background: #07111f; color: #f5f8ff; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at top, #19355f, #07111f 60%); }
main { width: min(88vw, 34rem); padding: 3rem 2rem; }
.eyebrow { color: #78d9ff; letter-spacing: .16em; text-transform: uppercase; font-size: .78rem; }
h1 { margin: .3rem 0; font-size: clamp(3rem, 12vw, 6rem); }
.tagline { font-size: 1.25rem; color: #c7d5e9; }
nav { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1.5rem 0; }
form, #member, .view, #call-panel { padding: 1.2rem; border: 1px solid #29466d; border-radius: 1rem; background: #0b192c; }
label { display: grid; gap: .35rem; margin: .8rem 0; color: #c7d5e9; }
input, select, button { font: inherit; border-radius: .6rem; padding: .75rem; }
input, select { color: #f5f8ff; background: #07111f; border: 1px solid #45658f; }
button { border: 0; background: #78d9ff; color: #07111f; font-weight: 700; cursor: pointer; }
button[disabled] { opacity: .55; cursor: not-allowed; margin-right: .6rem; }
#call-panel { margin: 1rem 0; }
#incoming-actions, #outgoing-actions { display: flex; gap: .6rem; margin: .8rem 0; }
#notice { min-height: 1.5rem; color: #ffd585; }
code { overflow-wrap: anywhere; }