:root { --accent: #6965db; --line: #e3e3e8; --muted: #71717a; }

html, body { height: 100%; margin: 0; font-family: system-ui, sans-serif; color: #1a1a1e; }
input, button, textarea { font: inherit; }
input, button { padding: .5rem .6rem; border: 1px solid #ccc; border-radius: 6px; }
button { background: var(--accent); color: #fff; border-color: var(--accent); cursor: pointer; }
button.ghost { background: none; color: var(--muted); border-color: var(--line); }
[hidden] { display: none !important; }

#bar { position: fixed; z-index: 10; bottom: 12px; left: 50%; transform: translateX(-50%);
       background: #fff; border: 1px solid #ddd; border-radius: 20px; padding: .35rem .9rem;
       font-size: .8rem; color: var(--muted); box-shadow: 0 2px 8px rgba(0,0,0,.12);
       display: flex; gap: .8rem; align-items: center; }
#bar a { color: var(--accent); }
#bar.warn { background: #fff4e6; border-color: #ffa94d; color: #a1541a; }

#login { display: grid; place-content: center; height: 100%; }
#login form { display: grid; gap: .6rem; width: 260px; }
#login h1 { font-size: 1.1rem; margin: 0 0 .4rem; }
#error { color: #c92a2a; font-size: .85rem; min-height: 1.2em; }