/* The site's one bar on top (a computer) and its tab bar (a phone): the same on every page, signed in or not. */
.rxn, .rxn * { box-sizing: border-box; }
.rxn { position: sticky; top: 0; z-index: 60; height: 52px; display: flex; align-items: center; gap: 18px; padding: 0 max(20px, calc((100vw - 1080px) / 2));
  background: rgba(0,0,0,.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif; color: #f5f5f7; letter-spacing: -0.01em; }
.rxn a { color: inherit; text-decoration: none; }
.rxn button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.rxn-brand { font-weight: 700; font-size: 17px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.rxn-brand .rxn-mark { width: 22px; height: 21px; flex: none; color: #fff; }
.rxn-links { display: flex; gap: 28px; margin: 0 auto; font-size: 13px; color: #d2d2d7; }
.rxn-links a:hover, .rxn-links a.on { color: #fff; }
.rxn-right { display: flex; align-items: center; gap: 14px; }
.rxn-lang { display: flex; gap: 2px; background: rgba(255,255,255,.06); border-radius: 999px; padding: 3px; }
.rxn-lang a { padding: 4px 9px; border-radius: 999px; font-size: 12px; color: #86868b; }
.rxn-lang a.on { background: rgba(255,255,255,.14); color: #fff; }
.rxn-signin { font-size: 13px; padding: 7px 14px; border-radius: 999px; background: #fff; color: #000 !important; font-weight: 600; white-space: nowrap; }
.rxn-me { display: none; align-items: center; gap: 8px; position: relative; }
.rxn-credits { font-size: 12px; color: #d2d2d7; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rxn-ava { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: none;
  background: linear-gradient(135deg, #2997ff, #7a5cff); color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.12); }
.rxn.signed .rxn-signin { display: none; } .rxn.signed .rxn-me { display: flex; }

.rxn-pop { position: fixed; top: 58px; right: max(16px, calc((100vw - 1080px) / 2)); width: 300px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif; letter-spacing: -0.01em; box-sizing: border-box; background: rgba(28,28,30,.94); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.6); opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; transition: .22s cubic-bezier(.2,.8,.2,1); color: #f5f5f7; z-index: 70; }
.rxn-pop.open { opacity: 1; transform: none; pointer-events: auto; }
.rxn-pop * { box-sizing: border-box; }
.rxn-pop a { color: inherit; text-decoration: none; }
.rxn-pop button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.rxn-who { display: flex; align-items: center; gap: 12px; }
.rxn-pop .rxn-ava { width: 42px; height: 42px; font-size: 17px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; flex: none; background: linear-gradient(135deg, #2997ff, #7a5cff); color: #fff; }
.rxn-who b { display: block; font-size: 15px; }
.rxn-who small { color: #86868b; font-size: 12px; }
.rxn-bal { margin: 16px 0 6px; display: flex; justify-content: space-between; align-items: baseline; }
.rxn-bal b { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.rxn-bal span { color: #86868b; font-size: 12px; }
.rxn-meter { height: 4px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.rxn-meter i { display: block; height: 100%; background: linear-gradient(90deg, #2997ff, #7a5cff); border-radius: inherit; }
.rxn-rows { margin-top: 14px; display: grid; gap: 2px; }
.rxn-rows a, .rxn-rows button { display: flex; padding: 10px; border-radius: 10px; font-size: 14px; text-align: left; width: 100%; color: #f5f5f7; }
.rxn-rows a:hover, .rxn-rows button:hover { background: rgba(255,255,255,.06); }
.rxn-rows .accent { color: #2997ff; }
.rxn-rows .langrow { gap: 6px; padding: 8px 10px; display: none; }
.rxn-rows .langrow a { width: auto; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.06); font-size: 12px; color: #86868b; }
.rxn-rows .langrow a.on { background: rgba(255,255,255,.16); color: #fff; }

.rxn-tabs { display: none; }
@media (max-width: 760px) {
  .rxn { padding: 0 16px; }
  .rxn-links { display: none; }
  .rxn-lang a { padding: 4px 7px; font-size: 11px; }
  .rxn-right { gap: 10px; }
  .rxn-right { margin-left: auto; }
  body.rxn-app { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .rxn-tabs { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; inset: auto 0 0 0; z-index: 60; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: rgba(18,18,20,.84); backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px); border-top: 1px solid rgba(255,255,255,.08);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif; }
  .rxn-tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 10.5px; color: #86868b; font-weight: 500; text-decoration: none; }
  .rxn-tabs a.on { color: #fff; }
  .rxn-tabs svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .rxn-pop { position: fixed; top: auto; bottom: calc(76px + env(safe-area-inset-bottom)); left: 12px; right: 12px; width: auto; }
}