:root { color-scheme: light dark; font: 17px/1.5 system-ui,sans-serif; background: light-dark(#f3f5f8,#111820); color: light-dark(#17232d,#e7eef4); }
* { box-sizing: border-box; } body { margin: 0; } main { max-width: 700px; margin: auto; padding: 28px 20px 48px; }
header,aside { overflow-wrap: anywhere; }
h1 { font-size: 2.5rem; margin: 0; letter-spacing: -.04em; } h2 { margin-top: 0; } .eyebrow { letter-spacing: .12em; font-size: .8rem; }
section { background: light-dark(white,#202b35); border-radius: 20px; padding: 24px; margin: 20px 0; }
aside { border-left: 4px solid #df951a; padding: 14px 18px; margin: 24px 0; background: light-dark(#fff4d8,#352d1c); }
label { display: block; margin: 16px 0; font-weight: 600; } input { display: block; width: 100%; font: inherit; padding: 12px; border: 1px solid #7c8793; border-radius: 10px; margin-top: 6px; }
fieldset { min-width: 0; border: 1px solid #7c8793; border-radius: 12px; margin: 20px 0; }
select { width: 100%; min-height: 48px; font: inherit; border-radius: 10px; padding: 8px; }
button,.button { display: inline-block; min-height: 48px; border: 0; border-radius: 12px; padding: 12px 16px; font: inherit; color: light-dark(#004888,#b8dcff); background: light-dark(#e1efff,#183d5c); text-decoration: none; cursor: pointer; }
button:disabled { opacity: .5; cursor: wait; } .actions { display: flex; flex-wrap: wrap; gap: 10px; } .danger { color: light-dark(#a91324,#ffb4bd); }
li { margin: 12px 0; } li button { margin-left: 10px; } a { color: light-dark(#005ca9,#94cdff); } #message { white-space: pre-wrap; } [hidden] { display: none !important; }
article { border-top: 1px solid light-dark(#ccd5df,#526170); margin-top: 24px; padding-top: 20px; overflow-wrap: anywhere; }
article code { display: block; font-size: .85rem; overflow-wrap: anywhere; }
details { border-top: 1px solid light-dark(#ccd5df,#526170); margin: 20px 0; padding-top: 16px; min-width: 0; }
summary { cursor: pointer; min-height: 48px; font-weight: 650; padding: 10px 0; }
#signed-in { overflow-wrap: anywhere; }
#users { display: grid; gap: 10px; margin: 16px 0; }
#users button { text-align: left; min-width: 0; }
#account-audit { padding-left: 22px; }
input,select,button { max-width: 100%; min-width: 0; }
@media (max-width: 480px) { h1 { font-size: 2rem; } section { padding: 18px; } #user-editor { padding: 12px; } }