/* Login / account popup and the deposit-arriving panel (wallet-ui.js) for pages that don't load liquid.css (gates.html).
   Same look as liquid.css, but every rule is scoped to .modal / .arrive so it can't touch the page's own .chip or .btn. */
.modal, .arrive {
  --deep-0: #0b2420; --deep-2: #0f3a33; --deep-3: #183c47;
  --line: rgba(151, 252, 228, 0.12); --line-2: rgba(151, 252, 228, 0.22);
  --ink: #f6efe4; --mist: #b8c9c3; --mist-2: #7f9a92; --mint: #97fce4; --lilac: #c9b3ff;
  --gold: #e8c170; --gold-hi: #f6dc9e;
  --display: "Fredoka", system-ui, sans-serif;
  --spring: cubic-bezier(.3, 1.6, .5, 1);
  font-family: "Manrope", "Fredoka", system-ui, sans-serif; color: var(--ink);
}
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(4, 14, 20, 0.66); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal[hidden] { display: none; }
.modal *, .arrive * { box-sizing: border-box; }
.modal__card { position: relative; width: min(380px, 100%); padding: 28px 24px 22px; border-radius: 24px; background: linear-gradient(180deg, #10303a, #0b2029); border: 1px solid var(--line-2); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); animation: mPopIn 320ms var(--spring); }
.modal__body { display: grid; justify-items: center; gap: 8px; text-align: center; }
.modal__x { position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--mist); cursor: pointer; }
.modal__x:hover { color: var(--ink); }
.modal__img { width: 84px; height: 84px; object-fit: contain; }
.modal__title { margin: 4px 0 8px; font: 700 28px/1.1 var(--display); color: var(--ink); }
.modal__btn { width: 100%; }
.modal__note { margin: 0 0 10px; font-size: 14px; color: var(--mist); }
.modal__addr { margin: 0; font-size: 13px; font-weight: 800; color: var(--mint); word-break: break-all; }
.modal__big { margin: 0; font: 700 34px/1.1 var(--display); color: var(--mint); }
.modal__who { margin: 0; font-size: 14px; font-weight: 700; color: var(--mist); }
.modal__link { border: 0; background: none; padding: 6px; color: var(--mist); font: inherit; font-size: 14px; cursor: pointer; }
.modal__link b { color: var(--mint); font-weight: 800; }
.modal__link:hover b { text-decoration: underline; }
.modal__chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; width: 100%; }
.modal__tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); width: 100%; }
.modal__tabs button { flex: 1; border: 0; border-radius: 9px; padding: 8px 10px; background: none; color: var(--mist); font-weight: 700; cursor: pointer; }
.modal__tabs button[aria-selected="true"] { background: var(--deep-2); color: var(--ink); box-shadow: 0 0 0 1px var(--line-2); }
.modal__wallet img { width: 22px; height: 22px; border-radius: 6px; }
.modal .btn, .arrive .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; cursor: pointer;
  padding: 10px 18px; border-radius: 12px; border: 1px solid transparent; font-weight: 800; text-decoration: none;
  transition: transform 180ms var(--spring), background 160ms ease, border-color 160ms ease, filter 160ms ease;
}
.modal .btn:active { transform: scale(0.96); }
.modal .btn:disabled { opacity: 0.55; cursor: wait; transform: none; }
.modal .btn--gold { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #2a1d05; box-shadow: 0 6px 22px rgba(232, 193, 112, 0.22); }
.modal .btn--gold:hover { filter: brightness(1.06); }
.modal .btn--ghost, .arrive .btn--ghost { background: var(--deep-2); border-color: var(--line-2); color: var(--ink); }
.modal .btn--ghost:hover, .arrive .btn--ghost:hover { border-color: var(--mint); }
.modal .chip { padding: 8px 13px; border-radius: 10px; background: var(--deep-2); border: 1px solid var(--line); color: var(--mist); font: inherit; font-weight: 700; cursor: pointer; }
.modal .chip[aria-checked="true"] { background: var(--mint); color: #0b2420; border-color: var(--mint); }
.modal .input { display: grid; gap: 6px; margin-bottom: 12px; width: 100%; text-align: left; }
.modal .input__l { font-size: 13px; font-weight: 700; color: var(--mist); }
.modal .input__box { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; background: var(--deep-0); border: 1px solid var(--line-2); }
.modal .input__box:focus-within { border-color: var(--mint); }
.modal .input__box input { flex: 1; min-width: 0; padding: 12px 0; background: none; border: 0; outline: 0; font: inherit; font-weight: 700; font-size: 16px; color: var(--ink); }
.modal .input__box span { color: var(--mist-2); font-size: 13px; font-weight: 700; }
.arrive {
  position: fixed; right: 24px; bottom: 24px; z-index: 30; width: min(360px, calc(100vw - 32px)); display: flex; gap: 12px; align-items: flex-start;
  padding: 16px; border-radius: 20px; background: linear-gradient(180deg, #10303a, #0b2029); border: 1px solid var(--line-2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); animation: mPopIn 320ms var(--spring);
}
.arrive.is-done { border-color: var(--mint); }
.arrive__img { width: 48px; height: 48px; object-fit: contain; }
.arrive__main { flex: 1; min-width: 0; display: grid; gap: 6px; }
.arrive__t { margin: 0; font: 700 19px/1.15 var(--display); color: var(--ink); }
.arrive.is-done .arrive__t { color: var(--mint); }
.arrive__s { margin: 0; font-size: 13px; color: var(--mist); }
.arrive__s b { color: var(--ink); }
.arrive__bar { height: 6px; border-radius: 6px; background: var(--deep-3); overflow: hidden; }
.arrive__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--mint)); transform-origin: left; transform: scaleX(0); transition: transform 1s linear; }
.arrive__acts { display: flex; gap: 6px; flex-wrap: wrap; }
.arrive__acts .btn { padding: 7px 12px; font-size: 13px; border-radius: 10px; }
@keyframes mPopIn { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .arrive { right: 16px; left: 16px; bottom: 16px; width: auto; } }