/* Sign in / invite sign-up. The background is the liquidation heat scale, slowly breathing - the same material as the
   chart, not a stock gradient. */
:root { --bg: #07070B; --card: rgba(14, 13, 22, .86); --line: rgba(255, 255, 255, .1); --text: #ECECF1; --dim: #9C9CA8;
        --v: #7A5CFF; --v2: #9B83FF; --red: #FF5A6A; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--text); font: 15px/1.5 Manrope, system-ui, sans-serif; display: grid; place-items: center;
       min-height: 100vh; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); overflow-x: hidden; -webkit-font-smoothing: antialiased; }

.heat { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: grid; grid-template-rows: repeat(5, 1fr); opacity: .5; }
.heat i { display: block; margin: 6vh -10vw; filter: blur(48px); border-radius: 40px; animation: breathe 9s ease-in-out infinite; }
.heat i:nth-child(1) { background: linear-gradient(90deg, transparent, rgba(68, 1, 84, .7), transparent 70%); }
.heat i:nth-child(2) { background: linear-gradient(90deg, transparent 20%, rgba(59, 82, 139, .55), transparent); animation-delay: -2s; }
.heat i:nth-child(3) { background: linear-gradient(90deg, transparent 35%, rgba(33, 145, 140, .45), rgba(94, 201, 98, .35), transparent 85%); animation-delay: -4s; }
.heat i:nth-child(4) { background: linear-gradient(90deg, transparent 50%, rgba(253, 231, 37, .3), transparent); animation-delay: -6s; }
.heat i:nth-child(5) { background: linear-gradient(90deg, rgba(122, 92, 255, .35), transparent 60%); animation-delay: -1s; }
@keyframes breathe { 0%, 100% { opacity: .55; transform: translateX(0); } 50% { opacity: 1; transform: translateX(3vw); } }
@media (prefers-reduced-motion: reduce) { .heat i { animation: none; } }

.card { position: relative; z-index: 1; width: min(400px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 18px;
        padding: 28px 24px 22px; box-shadow: 0 24px 80px rgba(0, 0, 0, .55); backdrop-filter: blur(14px); }
.mark { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: italic 800 17px Outfit, sans-serif; letter-spacing: .08em; }
.mark span { display: inline-block; width: 30px; height: 17px; background: url(/assets/mark.svg) left center/contain no-repeat; }
.mark b { display: none; }
.beta { margin: 6px 0 18px; color: var(--dim); font: 500 12px "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }

.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 11px; margin-bottom: 18px; }
.tabs button { all: unset; text-align: center; padding: 9px 6px; border-radius: 8px; font: 600 13.5px Manrope, sans-serif; color: var(--dim); cursor: pointer; }
.tabs button[aria-selected="true"] { background: rgba(122, 92, 255, .2); color: #fff; }
.tabs button:focus-visible { outline: 2px solid var(--v2); }

label { display: block; font: 600 12.5px Manrope, sans-serif; color: var(--dim); margin-bottom: 12px; }
label[hidden] { display: none; }
input { display: block; width: 100%; margin-top: 6px; padding: 12px 13px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .35);
        color: var(--text); font: 500 16px Manrope, sans-serif; outline: none; transition: border-color .2s; }
input:focus { border-color: var(--v2); }
#code { font-family: "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.hint { margin: -6px 0 10px; color: var(--dim); font-size: 12.5px; }
.err { margin: 0 0 12px; padding: 10px 12px; border-radius: 9px; background: rgba(255, 90, 106, .12); color: #FFB3BC; font-size: 13.5px; }
.go { all: unset; box-sizing: border-box; display: block; width: 100%; text-align: center; padding: 13px; border-radius: 11px; background: var(--v); color: #fff;
      font: 700 15px Manrope, sans-serif; cursor: pointer; box-shadow: 0 8px 28px rgba(122, 92, 255, .35); margin-top: 4px; }
.go:hover { background: #8A6FFF; } .go[disabled] { opacity: .6; cursor: wait; }
.go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.foot { margin: 18px 0 0; color: var(--dim); font-size: 13px; }
.legal { margin: 10px 0 0; font-size: 12px; } .legal a { color: var(--dim); }
.checks { margin: 4px 0 12px; display: grid; gap: 10px; }
.checks[hidden] { display: none; }
label.ck { display: flex; gap: 10px; align-items: flex-start; margin: 0; font: 500 13px/1.45 Manrope, sans-serif; color: var(--dim); cursor: pointer; }
label.ck input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--v); padding: 0; }
label.ck b { color: var(--text); }
label.ck a { color: var(--v2); }

.ok{margin:0 0 12px;font-size:13px;line-height:1.5;color:var(--dim,#A9A9B8)}
.ok a,.err a{color:inherit;text-decoration:underline}
[hidden]{display:none!important}