/* The same night-sky colours as web/style.css, so the login and admin pages feel like Lunara. */
:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #171421; color: #f6ecd9; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #34283f, #171421); }
main { width: min(44rem, 100%); padding: 1.25rem; text-align: center; }
h1 { color: #eed095; font-size: clamp(1.6rem, 5vw, 2.6rem); margin: 0 0 1rem; }
h2 { color: #eed095; font-size: 1.1rem; margin: 0 0 .5rem; }
#message { background: #252033; border: 1px solid #9a8057; border-radius: .5rem; padding: .6rem; }
.cards { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
form { flex: 1 1 16rem; display: flex; flex-direction: column; gap: .7rem; padding: 1rem;
  background: #252033; border-radius: .75rem; text-align: left; }
label { display: flex; flex-direction: column; gap: .25rem; color: #c4bacd; font-size: .9rem; }
input { font: inherit; padding: .5rem; border: 1px solid #6b5a74; border-radius: .4rem; background: #171421; color: #f6ecd9; }
input:focus-visible, button:focus-visible { outline: 3px solid #eed095; outline-offset: 2px; }
button { font: inherit; border: 1px solid #9a8057; border-radius: .5rem; padding: .5rem .9rem;
  background: #5b4158; color: #fff3d7; cursor: pointer; }
button:hover { background: #60465b; }
.card { flex: 1 1 16rem; padding: 1rem; background: #252033; border-radius: .75rem; text-align: left; }
.card ul { margin: 0; padding-left: 1.2rem; line-height: 1.7; }
.note { font-size: .85rem; color: #c4bacd; }
a { color: #eed095; }