/* Sign-in and join pages */
:root {
  --bg: #eef0ec; --panel: #fafbf8; --fg: #1b1f1c; --muted: #5d655f; --line: #cfd4cc;
  --accent: #2346d6; --accent-fg: #fff; --ok: #1f8a4c; --lock: #c2372b;
  --f-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111412; --panel: #1c211e; --fg: #e8ece7; --muted: #99a39c; --line: #2e3531; --accent: #6f8cff; --accent-fg: #0b1030; --ok: #4cc47f; --lock: #ff6b5e; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--bg); color: var(--fg); font: 15px/1.5 var(--f-body); }
[hidden] { display: none !important; }
main { position: relative; z-index: 1; width: min(100%, 400px); background: color-mix(in srgb, var(--panel) 82%, transparent); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: grid; gap: 16px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18); }
h1 { margin: 0; font-family: var(--f-display); font-size: 22px; letter-spacing: 0.02em; }
p { margin: 0; color: var(--muted); }
form { display: grid; gap: 12px; }
label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
input { font: inherit; min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); padding: 0 12px; }
input:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button { font: inherit; font-weight: 600; min-height: 46px; border-radius: 12px; border: 0; background: var(--accent); color: var(--accent-fg); cursor: pointer; }
button:disabled { opacity: 0.6; cursor: progress; }
.msg { padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.msg.ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--fg); }
.msg.err { background: color-mix(in srgb, var(--lock) 15%, transparent); color: var(--fg); }
.small { font-size: 13px; }
a { color: var(--accent); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { border-radius: 9px; }
/* wallet sign-in */
.wallet { display: grid; gap: 10px; }
.wlist { display: grid; gap: 8px; }
.wbtn { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.wbtn img { border-radius: 6px; }
.wbtn.get { color: var(--muted); font-weight: 400; justify-content: center; border-style: dashed; }
button.quiet { background: none; color: var(--muted); min-height: 36px; font-weight: 400; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
/* password sign-in is going away: shown under the password form when wallet sign-in is on */
.warn { padding: 10px 12px; border-radius: 10px; font-size: 13px; color: var(--fg); background: color-mix(in srgb, #8b5cf6 13%, transparent); border: 1px solid color-mix(in srgb, #8b5cf6 45%, var(--line)); }
/* the live cube behind the form (logincube.js): six faces of the open layer, blurred and turning slowly */
.cubebg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; --s: clamp(300px, 62vmin, 600px); }
/* a phone held upright: the form fills the middle, so the cube is wider than the screen and shows round it */
@media (max-aspect-ratio: 3/4) { .cubebg { --s: 112vw; } }
.cubebg.on { opacity: 1; }
.cubebg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--bg) 10%, transparent) 30%, color-mix(in srgb, var(--bg) 55%, transparent) 80%); }
.cb-scene { position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); perspective: calc(var(--s) * 2.6); filter: blur(9px) saturate(1.15); }
.cb-cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: cbturn 120s linear infinite; }
.cb-face { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; }
.cb-face.f0 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.cb-face.f1 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.cb-face.f2 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.cb-face.f3 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.cb-face.f4 { transform: translateZ(calc(var(--s) / 2)); }
.cb-face.f5 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
@keyframes cbturn { from { transform: rotateX(-22deg) rotateY(0deg); } to { transform: rotateX(-22deg) rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cb-cube { animation: none; transform: rotateX(-22deg) rotateY(-35deg); }
  .cubebg { transition: none; }
}
.livecube { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.livecube i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: livepulse 2s ease-out infinite; flex: none; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
@media (prefers-reduced-motion: reduce) { .livecube i { animation: none; } }