/* Mobile-first styling that follows the legacy MDS H5 pages
   (static.mds.org/css/common.css and css/market/login.css). */
:root {
  --text: #1c1c1e;
  --muted: #6d6d72; /* legacy #8a8a8f, darkened for WCAG AA on white and #f7f7fa */
  --line: #dddce0;
  --hairline: 0.5px solid var(--line);
  --bg-group: #f7f7fa;
  --primary: #5ac8fa;
  --link: #007aff;
  --warn: #b35900;
  --danger: #e0352b;
  --ok: #1f8a3b;
  --foot-h: 44px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: #fff;
  /* room for the fixed footer */
  padding-bottom: calc(var(--foot-h) + env(safe-area-inset-bottom));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
p { margin: 0 0 8px; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { border: 0; }

:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* ---------- header ---------- */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: #fff;
  border-bottom: var(--hairline);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -.01em;
}
.brand:hover { text-decoration: none; }
.brand img { width: 24px; height: 24px; }
.inline { display: inline; margin: 0; }

/* ---------- buttons ---------- */
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button.link {
  border: none;
  background: none;
  padding: 4px 0;
  color: var(--link);
  font-size: 14px;
}
.top button.link { font-size: 13px; font-weight: 500; }
button.link:hover { text-decoration: underline; }

.next {
  display: inline-block;
  padding: 10px 24px;
  border: none;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  user-select: none;
  cursor: pointer;
}
.next:hover { text-decoration: none; filter: brightness(.96); }
.next:disabled, .next.disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.wide { display: block; width: 100%; }

/* ---------- flash ---------- */
.flash { margin: 12px 16px 0; padding: 10px 12px; border-radius: 12px; }
.flash.ok { background: #eaf8ee; color: var(--ok); }
.flash.err { background: #fdecea; color: var(--danger); }

/* ---------- generic page parts ---------- */
.page { padding: 48px 16px; }
.page.center { text-align: center; }
.page-head { padding: 24px 16px 16px; }
h3 { margin: 0 0 8px; font-size: 22px; font-weight: 600; line-height: 28px; letter-spacing: -.02em; }
h4 { margin: 0 0 8px; font-size: 15px; font-weight: 400; line-height: 22px; }
.muted { color: var(--muted); }
.warn { color: var(--warn); }
.hint { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.hint:empty { display: none; }
.field-err { margin: 6px 0 0; color: var(--danger); font-size: 13px; }
.tip { margin-top: 48px; color: var(--muted); font-size: 13px; line-height: 20px; }
.empty { padding: 0 16px; color: var(--muted); }

/* ---------- login ---------- */
.login { text-align: center; }
.login h4 { font-size: 15px; line-height: 22px; }
.login form { margin-top: 24px; text-align: left; }
.input-group {
  display: flex;
  align-items: center;
  margin-top: 24px;
  border-bottom: var(--hairline);
}
.input-group label {
  flex: 0 0 auto;
  width: 9em;
  padding: 10px 12px 10px 0;
  border-right: var(--hairline);
  font-size: 15px;
  font-weight: 500;
}
.input-group input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 0 10px 16px;
  border: none;
  background: transparent;
  font-size: 16px;
  outline: none;
}
.input-group:focus-within { border-bottom: 1px solid var(--link); }
.input-group input:focus-visible { outline: none; }
.input-group .send {
  flex: 0 0 auto;
  padding: 10px 0 10px 12px;
  border: none;
  background: none;
  color: var(--link);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.input-group .send:disabled { color: var(--muted); cursor: not-allowed; }
.login .next { margin-top: 32px; }
.switch { margin: 24px 0 0; }
#captcha-element:empty { display: none; }

/* ---------- country picker (legacy H5 style) ---------- */
.select-country {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 24px;
  padding: 10px 24px 10px 0;
  border: none;
  border-bottom: var(--hairline);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M7 4l6 6-6 6' fill='none' stroke='%23c7c7cc' stroke-width='2'/%3E%3C/svg%3E") no-repeat right center / 20px;
  font-size: 16px;
  text-align: left;
  color: var(--text);
}
.select-country .field-label { color: var(--muted); font-size: 14px; }
body.no-scroll { overflow: hidden; }
.country {
  position: fixed;
  inset: 0;
  z-index: 3000;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--bg-group);
}
.country-head {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 16px;
  background: #fff;
  border-bottom: var(--hairline);
}
.country-head input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: var(--bg-group);
  font-size: 16px;
}
.country-body { flex: 1 1 auto; overflow-y: auto; padding-right: 24px; }
.country-group ul { margin: 0; padding: 0 16px; list-style: none; background: #fff; }
.country-group li + li { border-top: var(--hairline); }
.list-group-title { margin: 0; padding: 4px 16px; color: var(--muted); font-size: 14px; font-weight: 400; line-height: 16px; }
.list-group-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0 12px 32px;
  border: none;
  background: transparent;
  font-size: 16px;
  line-height: 20px;
  text-align: left;
  color: var(--text);
}
.list-group-item .dial { color: var(--muted); font-variant-numeric: tabular-nums; }
.list-group-item.active {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M3 9l4 4 8-8' fill='none' stroke='%235ac8fa' stroke-width='2'/%3E%3C/svg%3E") no-repeat 4px center / 18px;
}
.list-shortcut {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  padding-right: 4px;
}
.list-shortcut .item {
  padding: 1px 6px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 12px;
  line-height: 16px;
}

/* ---------- chain cards ---------- */
/* Each chain (and the video section) is its own card so groups do not run together. */
.group {
  margin: 0 16px 16px;
  padding: 0;
  min-width: 0;
  border: 1px solid #e5e5ea;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.group-title {
  display: block;
  float: left; /* lets <legend> span the card like a block header */
  width: 100%;
  margin: 0;
  padding: 10px 16px;
  border-bottom: 1px solid #e5e5ea;
  background: var(--bg-group);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.chain-label { color: var(--muted); font-weight: 400; }
.group-note { clear: both; margin: 0; padding: 10px 16px; background: #fff8ec; border-bottom: 1px solid #f3e3c6; font-size: 13px; }
.list { clear: both; margin: 0; padding: 0 16px; list-style: none; background: #fff; }
.row-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: var(--hairline);
  font-size: 15px;
  line-height: 20px;
}
.row-item > span:first-child { font-weight: 500; }
.row-item:last-child { border-bottom: none; }
.num { font-variant-numeric: tabular-nums; text-align: right; word-break: break-all; }
.list + .fields { border-top: 1px solid #e5e5ea; }
.notice {
  margin: 8px 0 0;
  padding: 10px 12px 10px 28px;
  border-radius: 12px;
  background: #fff8ec;
  color: var(--warn);
  font-size: 13px;
  line-height: 18px;
}
.notice li + li { margin-top: 6px; }

/* ---------- status card ---------- */
.status {
  margin: 0 16px 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--bg-group);
}
.status p:last-child { margin-bottom: 0; }
.status-title { font-size: 16px; font-weight: 500; }
.status strong { font-weight: 600; }
.status.completed strong { color: var(--ok); }
.status.rejected strong { color: var(--danger); }
.status.submitted strong { color: var(--link); }

/* ---------- apply form ---------- */
.fields { clear: both; padding: 4px 16px 16px; }
.field { display: block; margin-top: 12px; }
.field-label { display: block; color: var(--muted); font-size: 13px; font-weight: 500; }
.field input {
  display: block;
  width: 100%;
  padding: 10px 0;
  border: none;
  border-bottom: var(--hairline);
  border-radius: 0;
  background: transparent;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; /* a 42-character EVM / bech32 address fits inside a card on a 375px screen */
  outline: none;
}
.field input::placeholder { font-family: -apple-system, Roboto, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; color: #b0b0b5; }
.field input:focus { border-bottom: 1px solid var(--link); }
.code-box {
  margin: 12px 0;
  padding: 16px;
  border-radius: 12px;
  background: var(--bg-group);
  text-align: center;
}
.code-box .muted { display: block; font-size: 13px; }
.code {
  display: block;
  margin-top: 4px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 4px;
  word-break: break-all;
}
/* ---------- video upload ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.upload { margin-top: 12px; }
.upload-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 16px;
  border: 1px dashed #b8b8bf;
  border-radius: 12px;
  background: var(--bg-group);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.upload-box:hover { border-color: var(--primary); background: #f0f9fe; }
#video:focus-visible + .upload-box { outline: 2px solid var(--link); outline-offset: 2px; }
.upload-box.busy { pointer-events: none; opacity: .7; }
.upload-box.has-file { border-style: solid; border-color: var(--primary); background: #f0f9fe; }
.upload-icon {
  width: 32px; height: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%235ac8fa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3Cpath d='M16 10l6-3v10l-6-3z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.upload-text { color: var(--link); font-size: 16px; font-weight: 500; }
.upload-sub { color: var(--muted); font-size: 13px; }
.upload-progress { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.upload-progress span { flex: 0 0 3em; color: var(--muted); font-size: 13px; }
progress {
  flex: 1 1 auto;
  width: 100%;
  height: 6px;
  border: none;
  border-radius: 3px;
  background: #e5e5ea;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}
progress::-webkit-progress-bar { background: #e5e5ea; border-radius: 3px; }
progress::-webkit-progress-value { background: var(--primary); border-radius: 3px; }
progress::-moz-progress-bar { background: var(--primary); border-radius: 3px; }
.hint.ok { color: var(--ok); }
.hint.ok::before { content: "\2713  "; }
.upload-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
button.upload-box { width: 100%; font: inherit; }
button.upload-box:disabled { opacity: .6; cursor: not-allowed; }
.rec-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%235ac8fa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
}
.recorder { margin-top: 12px; }
.cam-wrap { position: relative; overflow: hidden; border-radius: 12px; background: #000; }
.cam-wrap video { display: block; width: 100%; max-height: 420px; object-fit: contain; }
.cam-code, .cam-rec {
  position: absolute;
  top: 10px;
  padding: 2px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.cam-code { left: 10px; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 2px; }
.cam-rec { right: 10px; }
.cam-rec::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--danger); vertical-align: 1px; animation: rec-blink 1s step-end infinite; }
@keyframes rec-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cam-rec::before { animation: none; } }
.rec-buttons { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 12px; }
.rec-stop { background: var(--danger); }
.example {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin: 12px 0;
  padding: 12px;
  border-radius: 12px;
  background: var(--bg-group);
}
.example img { flex: 1 1 200px; max-width: 280px; height: auto; margin: 0 auto; }
.example figcaption { flex: 1 1 200px; font-size: 13px; line-height: 20px; }
.example strong { display: block; margin-bottom: 4px; font-size: 14px; }
.example ul { margin: 0; padding-left: 18px; color: var(--muted); }
.preview { margin: 12px 0 0; }
.preview video { display: block; width: 100%; max-height: 360px; border-radius: 12px; background: #000; }
.preview figcaption { margin-top: 6px; }

/* ---------- status steps & submitted addresses ---------- */
.steps {
  display: flex;
  margin: 12px 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  position: relative;
  flex: 1 1 0;
  padding-top: 28px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  top: 0; left: 50%;
  z-index: 1;
  width: 22px; height: 22px;
  margin-left: -11px;
  border-radius: 50%;
  background: #e5e5ea;
  color: var(--muted);
  font-size: 12px;
  line-height: 22px;
}
.steps li + li::after {
  content: "";
  position: absolute;
  top: 10px; left: -50%; right: 50%;
  height: 2px;
  background: #e5e5ea;
}
.steps li.done::before { content: "\2713"; background: var(--primary); color: #fff; }
.steps li.done, .steps li.current { color: var(--text); }
.steps li.done::after, .steps li.current::after { background: var(--primary); }
.steps li.current::before { background: #fff; color: var(--link); box-shadow: inset 0 0 0 2px var(--primary); }
.submitted-addrs { margin-top: 12px; padding-top: 12px; border-top: var(--hairline); }
.submitted-addrs dl { margin: 4px 0 0; }
.submitted-addrs dt { margin-top: 8px; font-size: 13px; color: var(--muted); }
.submitted-addrs dd { margin: 2px 0 0; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; word-break: break-all; }

.payouts { margin-top: 12px; padding-top: 12px; border-top: var(--hairline); }
.payouts ul { margin: 4px 0 0; padding: 0; list-style: none; }
.payout { padding: 8px 0; border-bottom: var(--hairline); }
.payout:last-child { border-bottom: none; }
.payout-head { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 500; }
.payout-detail { margin-top: 2px; font-size: 13px; word-break: break-all; }
.tx-line { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; white-space: nowrap; }
.tx-line code { word-break: normal; }
.copy { font: inherit; font-size: 12px; line-height: 20px; padding: 0 8px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff; color: inherit; cursor: pointer; }
.copy.done { border-color: #00b42a; color: #00b42a; }
.payout.sent .payout-head::before { content: none; }

/* ---------- confirm ---------- */
.confirm-card { clear: both; padding: 4px 16px 16px; }
.confirm-card .field-label { margin: 8px 0 2px; }
.addr {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg-group);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .3px;
  word-break: break-all;
}
.tokens { margin: 0; padding: 0; list-style: none; }
.tokens li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: var(--hairline); }
.ok-line { margin: 0; color: var(--ok); }
.ok-line::before { content: "\2713  "; }
.field input.pin-input { max-width: 200px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 22px; letter-spacing: 10px; }
.code-inline { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--text); letter-spacing: 2px; }
.actions .link.back { margin-top: 12px; font-size: 15px; }

/* ---------- footer ---------- */
/* Pinned to the viewport bottom; body padding-bottom keeps content clear of it. */
.foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  max-width: 640px;
  min-height: var(--foot-h);
  margin: 0 auto;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: var(--hairline);
  background: rgba(255, 255, 255, .96);
  color: var(--muted);
  font-size: 13px;
  line-height: 20px;
  text-align: center;
}
@supports (backdrop-filter: blur(8px)) {
  .foot { background: rgba(255, 255, 255, .85); backdrop-filter: blur(8px); }
}
.check { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 20px; cursor: pointer; }
.check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--primary); }

.actions { padding: 8px 16px 48px; text-align: center; }
.actions .back { display: inline-block; margin-top: 16px; }

/* Cloud wallet and VPOS staking balances are listed separately. */
.section-title { margin: 20px 16px 8px; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.list-label { clear: both; margin: 0; padding: 8px 16px 0; color: var(--muted); font-size: 12px; font-weight: 600; }