body, html {
  height: 100%;
  -webkit-tap-highlight-color: transparent;
  background-color: #F1F1F1;
}
.demos-title {
  text-align: center;
  font-size: 34px;
  color: #3cc51f;
  font-weight: 400;
  margin: 0 15%;
}
.demos-qrcode {
  text-align: center;
  font-size: 20px;
  color: black;
  text-decoration: underline;
  font-weight: bold;
  margin: 0 15%;
}
.demos-sub-title {
  text-align: center;
  color: #888;
  font-size: 14px;
}

.demos-header {
  padding: 35px 15px 35px 15px;
  background-color: #FFFFFF;
}

.demos-content-padded {
  padding: 15px;
}

.demos-second-title {
  text-align: center;
  font-size: 24px;
  color: #3cc51f;
  font-weight: 400;
  margin: 0 15%;
}

footer {
  text-align: center;
  font-size: 14px;
  padding: 20px;
}

footer a {
  color: #999;
  text-decoration: none;
}

.weui-masks {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
}

.weui-bottom-fixed-opr-page {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.weui-bottom-fixed-opr-page__content {
  min-height: 0;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  padding-bottom: 80px;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.weui-bottom-fixed-opr-page__tool {
  padding: 16px 32px 24px;
  padding: 16px calc(32px + constant(safe-area-inset-right)) calc(24px + constant(safe-area-inset-bottom)) calc(32px + constant(safe-area-inset-left));
  padding: 16px calc(32px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(32px + env(safe-area-inset-left));
  background: #ffffff;
  position: relative;
  z-index: 50;
}

.weui-bottom-fixed-opr-page__tool::before {
  content: "";
  height: 80px;
  background: -webkit-linear-gradient(bottom,#ffffff,rgba(255,255,255,0));
  background: linear-gradient(to top,#ffffff,rgba(255,255,255,0));
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  right: 0;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  pointer-events: none;
}

.wx-root[data-weui-theme='dark'] .weui-bottom-fixed-opr-page__tool,body[data-weui-theme='dark'] .weui-bottom-fixed-opr-page__tool {
  background: #191919;
}

@media (prefers-color-scheme:dark) {
  .wx-root:not([data-weui-theme='light']) .weui-bottom-fixed-opr-page__tool,body:not([data-weui-theme='light']) .weui-bottom-fixed-opr-page__tool {
    background: #191919;
  }
}

.wx-root[data-weui-theme='dark'] .weui-bottom-fixed-opr-page__tool::before,body[data-weui-theme='dark'] .weui-bottom-fixed-opr-page__tool::before {
  background: -webkit-linear-gradient(bottom,#191919,rgba(25,25,25,0));
  background: linear-gradient(to top,#191919,rgba(25,25,25,0));
}

@media (prefers-color-scheme:dark) {
  .wx-root:not([data-weui-theme='light']) .weui-bottom-fixed-opr-page__tool::before,body:not([data-weui-theme='light']) .weui-bottom-fixed-opr-page__tool::before {
    background: -webkit-linear-gradient(bottom,#191919,rgba(25,25,25,0));
    background: linear-gradient(to top,#191919,rgba(25,25,25,0));
  }
}

.weui-bottom-fixed-opr-page__tips {
  margin-bottom: 24px;
  padding: 0 32px;
  text-align: center;
}

.weui-bottom-fixed-opr-page .weui-bottom-fixed-opr {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.weui-bottom-fixed-opr-page .weui-bottom-fixed-opr .weui-btn {
  width: 184px;
  padding-left: 16px;
  padding-right: 16px;
}

.weui-bottom-fixed-opr-page .weui-bottom-fixed-opr .weui-btn:nth-last-child(n+2),.weui-bottom-fixed-opr-page .weui-bottom-fixed-opr .weui-btn:nth-last-child(n+2)+.weui-btn {
  margin: 0 8px;
  width: 136px;
  min-width: 0;
}

.weui-bottom-fixed-opr-page .weui-bottom-fixed-opr .weui-btn:nth-last-child(n+2):first-child,.weui-bottom-fixed-opr-page .weui-bottom-fixed-opr .weui-btn:nth-last-child(n+2)+.weui-btn:first-child {
  margin-left: 0;
}

.weui-bottom-fixed-opr-page .weui-bottom-fixed-opr .weui-btn:nth-last-child(n+2):last-child,.weui-bottom-fixed-opr-page .weui-bottom-fixed-opr .weui-btn:nth-last-child(n+2)+.weui-btn:last-child {
  margin-right: 0;
}

.weui-bottom-fixed-opr-page_btn-wrap .weui-bottom-fixed-opr {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.weui-bottom-fixed-opr-page_btn-wrap .weui-bottom-fixed-opr .weui-btn:nth-last-child(n+2),.weui-bottom-fixed-opr-page_btn-wrap .weui-bottom-fixed-opr .weui-btn:nth-last-child(n+2)+.weui-btn {
  width: 184px;
  margin: 16px 0 0;
}

.weui-bottom-fixed-opr-page_btn-wrap .weui-bottom-fixed-opr .weui-btn:nth-last-child(n+2):first-child,.weui-bottom-fixed-opr-page_btn-wrap .weui-bottom-fixed-opr .weui-btn:nth-last-child(n+2)+.weui-btn:first-child {
  margin-top: 0;
}

.weui-bottom-fixed-opr-page.weui-form {
  padding-top: 0;
}

.weui-bottom-fixed-opr-page.weui-form .weui-form__bd {
  padding-top: 56px;
  padding-top: calc(56px + constant(safe-area-inset-top));
  padding-top: calc(56px + env(safe-area-inset-top));
}

.weui-bottom-fixed-opr-page.weui-form .weui-form__ft {
  padding-bottom: 0;
}

.weui-bottom-fixed-opr-page.weui-form .weui-form__control-area {
  margin-bottom: 0;
}

.weui-bottom-fixed-opr-page.weui-half-screen-dialog {
  padding: 0;
}

.weui-bottom-fixed-opr-page.weui-half-screen-dialog .weui-half-screen-dialog__hd,.weui-bottom-fixed-opr-page.weui-half-screen-dialog .weui-half-screen-dialog__bd,.weui-bottom-fixed-opr-page.weui-half-screen-dialog .weui-half-screen-dialog__ft {
  padding-left: 24px;
  padding-left: calc(24px + constant(safe-area-inset-left));
  padding-left: calc(24px + env(safe-area-inset-left));
  padding-right: 24px;
  padding-right: calc(24px + constant(safe-area-inset-right));
  padding-right: calc(24px + env(safe-area-inset-right));
}

.weui-bottom-fixed-opr-page.weui-half-screen-dialog .weui-half-screen-dialog__bd {
  padding-bottom: 80px;
}

.weui-bottom-fixed-opr-page.weui-half-screen-dialog .weui-half-screen-dialog__ft {
  padding-bottom: 64px;
  padding-bottom: calc(64px + constant(safe-area-inset-bottom));
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

.weui-half-screen-dialog_bottom-fixed.weui-half-screen-dialog {
  padding: 0;
}

.weui-half-screen-dialog_bottom-fixed.weui-half-screen-dialog .weui-half-screen-dialog__hd {
  padding: 0 24px;
  padding: 0 calc(24px + constant(safe-area-inset-right)) 0 calc(24px + constant(safe-area-inset-left));
  padding: 0 calc(24px + env(safe-area-inset-right)) 0 calc(24px + env(safe-area-inset-left));
}

.weui-half-screen-dialog_bottom-fixed.weui-half-screen-dialog .weui-half-screen-dialog__bd {
  padding-bottom: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.weui-half-screen-dialog_bottom-fixed.weui-half-screen-dialog .weui-half-screen-dialog__ft {
  padding: 0;
}

.weui-half-screen-dialog_bottom-fixed.weui-half-screen-dialog .weui-bottom-fixed-opr-page {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  min-height: 0;
}

.weui-half-screen-dialog_bottom-fixed.weui-half-screen-dialog .weui-bottom-fixed-opr-page__content {
  padding: 0 24px;
  padding: 0 calc(24px + constant(safe-area-inset-right)) 0 calc(24px + constant(safe-area-inset-left));
  padding: 0 calc(24px + env(safe-area-inset-right)) 0 calc(24px + env(safe-area-inset-left));
}

.weui-half-screen-dialog_bottom-fixed.weui-half-screen-dialog .weui-bottom-fixed-opr {
  padding: 16px 0 64px;
  padding: 16px 0 calc(64px + constant(safe-area-inset-bottom));
  padding: 16px 0 calc(64px + env(safe-area-inset-bottom));
}

.weui-half-screen-dialog {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 255px;
  max-height: 75%;
  z-index: 5000;
  line-height: 1.4;
  background-color: #fff;
  background-color: var(--weui-BG-2);
  color: rgba(0,0,0,0.9);
  color: var(--weui-FG-0);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  overflow: hidden;
  padding: 0 24px;
  padding: 0 calc(24px + constant(safe-area-inset-right)) constant(safe-area-inset-bottom) calc(24px + constant(safe-area-inset-left));
  padding: 0 calc(24px + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(24px + env(safe-area-inset-left));
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  outline: 0;
}

@media only screen and (max-device-height:558px) {
  .weui-half-screen-dialog {
    max-height: calc(100% - 16px);
  }
}

.weui-half-screen-dialog__hd {
  min-height: 64px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.weui-half-screen-dialog__hd .weui-btn_icon {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  color: inherit;
}

.weui-half-screen-dialog__hd .weui-btn_icon:active {
  opacity: 0.5;
}

.weui-half-screen-dialog__hd .weui-half-screen-dialog__hd__action-group {
  position: absolute;
  top: 50%;
  white-space: nowrap;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.weui-half-screen-dialog__hd .weui-half-screen-dialog__hd__action {
  margin-right: 16px;
  position: static;
  -webkit-transform: none;
  transform: none;
}

.weui-half-screen-dialog__hd .weui-half-screen-dialog__hd__action.weui-wa-hotarea {
  position: relative;
}

.weui-half-screen-dialog__hd .weui-half-screen-dialog__hd__action.weui-link {
  font-size: 15px;
}

.weui-half-screen-dialog__hd__side {
  position: relative;
  left: -8px;
}

.weui-half-screen-dialog__hd__main {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}

.weui-half-screen-dialog__hd__side+.weui-half-screen-dialog__hd__main {
  text-align: center;
  padding: 0 40px;
}

.weui-half-screen-dialog__hd__main+.weui-half-screen-dialog__hd__side {
  right: -8px;
  left: auto;
}

.weui-half-screen-dialog__hd__main+.weui-half-screen-dialog__hd__side .weui-half-screen-dialog__hd__action-group {
  right: 0;
}

.weui-half-screen-dialog__hd__main+.weui-half-screen-dialog__hd__side .weui-half-screen-dialog__hd__action {
  margin-right: 0;
  margin-left: 16px;
}

.weui-half-screen-dialog__hd__main+.weui-half-screen-dialog__hd__side .weui-icon-btn,.weui-half-screen-dialog__hd__main+.weui-half-screen-dialog__hd__side .weui-btn_icon {
  right: 0;
}

.weui-half-screen-dialog__title {
  display: block;
  color: rgba(0,0,0,0.9);
  color: var(--weui-FG-0);
  font-weight: 500;
  font-size: 15px;
}

.weui-half-screen-dialog__subtitle {
  display: block;
  color: rgba(0,0,0,0.55);
  color: var(--weui-FG-1);
  font-size: 10px;
}

.weui-half-screen-dialog__bd {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  padding-bottom: 56px;
  font-size: 14px;
  color: rgba(0,0,0,0.9);
  color: var(--weui-FG-0);
}

.weui-half-screen-dialog__desc {
  font-size: 17px;
  font-weight: 500;
  color: rgba(0,0,0,0.9);
  color: var(--weui-FG-0);
  line-height: 1.4;
}

.weui-half-screen-dialog__tips {
  padding-top: 16px;
  font-size: 14px;
  color: rgba(0,0,0,0.3);
  color: var(--weui-FG-2);
  line-height: 1.4;
}

.weui-half-screen-dialog__ft {
  padding: 0 0 64px;
  text-align: center;
}

.weui-half-screen-dialog__ft .weui-btn:nth-last-child(n+2),.weui-half-screen-dialog__ft .weui-btn:nth-last-child(n+2)+.weui-btn {
  display: inline-block;
  vertical-align: top;
  margin: 0 8px;
  width: 120px;
}

.weui-half-screen-dialog__btn-area+.weui-half-screen-dialog__attachment-area {
  margin-top: 24px;
  margin-bottom: -34px;
}

.weui-half-screen-dialog_large {
  max-height: none;
  top: 16px;
}

.weui-half-screen-dialog__slide-icon {
  position: absolute;
  top: 12px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: #ededed;
  background: var(--weui-BG-0);
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.wx-root[data-weui-theme='dark'] .weui-half-screen-dialog__slide-icon,body[data-weui-theme='dark'] .weui-half-screen-dialog__slide-icon {
  background: rgba(0,0,0,0.1);
  background: var(--weui-FG-3);
}

@media (prefers-color-scheme:dark) {
  .wx-root:not([data-weui-theme='light']) .weui-half-screen-dialog__slide-icon,body:not([data-weui-theme='light']) .weui-half-screen-dialog__slide-icon {
    background: rgba(0,0,0,0.1);
    background: var(--weui-FG-3);
  }
}

.weui-half-screen-dialog__slide-icon .weui-icon-arrow {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 0.8em;
  height: 1.6em;
  opacity: 0;
}

.weui-half-screen-dialog_grab .weui-half-screen-dialog__hd {
  box-sizing: border-box;
  min-height: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.weui-half-screen-dialog_grab .weui-half-screen-dialog__hd__grab {
  padding: 12px 16px 16px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.weui-half-screen-dialog_grab .weui-half-screen-dialog__hd__grab,.weui-half-screen-dialog_grab .weui-half-screen-dialog__hd__nav {
  width: 100%;
}

.weui-half-screen-dialog_grab .weui-half-screen-dialog__hd__nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  min-height: 64px;
}

.weui-half-screen-dialog_slide .weui-half-screen-dialog__hd {
  min-height: 0;
  padding: 12px 16px 16px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.weui-half-screen-dialog__btn-area {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.weui-half-screen-dialog__btn-area .weui-btn {
  width: 184px;
  padding-left: 16px;
  padding-right: 16px;
}

.weui-half-screen-dialog__btn-area .weui-btn:nth-last-child(n+2),.weui-half-screen-dialog__btn-area .weui-btn:nth-last-child(n+2)+.weui-btn {
  margin: 0 8px;
  width: 136px;
  min-width: 0;
}

.weui-half-screen-dialog__btn-area .weui-btn:nth-last-child(n+2):first-child,.weui-half-screen-dialog__btn-area .weui-btn:nth-last-child(n+2)+.weui-btn:first-child {
  margin-left: 0;
}

.weui-half-screen-dialog__btn-area .weui-btn:nth-last-child(n+2):last-child,.weui-half-screen-dialog__btn-area .weui-btn:nth-last-child(n+2)+.weui-btn:last-child {
  margin-right: 0;
}

.weui-half-screen-dialog_btn-wrap .weui-half-screen-dialog__btn-area {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.weui-half-screen-dialog_btn-wrap .weui-half-screen-dialog__btn-area .weui-btn:nth-last-child(n+2),.weui-half-screen-dialog_btn-wrap .weui-half-screen-dialog__btn-area .weui-btn:nth-last-child(n+2)+.weui-btn {
  width: 184px;
  margin: 16px 0 0;
}

.weui-half-screen-dialog_btn-wrap .weui-half-screen-dialog__btn-area .weui-btn:nth-last-child(n+2):first-child,.weui-half-screen-dialog_btn-wrap .weui-half-screen-dialog__btn-area .weui-btn:nth-last-child(n+2)+.weui-btn:first-child {
  margin-top: 0;
}

.weui-icon-more {
  -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E  %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M5 10.25a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5zm7 0a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5zm7 0a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5z'/%3E%3C/svg%3E") no-repeat 50% 50%;
  mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E  %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M5 10.25a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5zm7 0a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5zm7 0a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5z'/%3E%3C/svg%3E") no-repeat 50% 50%;
}

.weui-icon-slide-down {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'%3E  %3Cdefs%3E    %3Crect id='dda90263-a290-4594-926f-6aba8cb4779f-a' width='24' height='24' x='0' y='0' rx='12'/%3E  %3C/defs%3E  %3Cg fill='none' fill-rule='evenodd'%3E    %3Cmask id='dda90263-a290-4594-926f-6aba8cb4779f-b' fill='%23fff'%3E      %3Cuse xlink:href='%23dda90263-a290-4594-926f-6aba8cb4779f-a'/%3E    %3C/mask%3E    %3Cuse fill='%23000' fill-opacity='.05' xlink:href='%23dda90263-a290-4594-926f-6aba8cb4779f-a'/%3E    %3Cg fill-opacity='.9' mask='url(%23dda90263-a290-4594-926f-6aba8cb4779f-b)'%3E      %3Cpath fill='%23000' d='M11.407 15.464L6.693 10.75l1.179-1.179 4.125 4.125 4.124-4.125L17.3 10.75l-4.714 4.714a.833.833 0 0 1-1.179 0z'/%3E    %3C/g%3E  %3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'%3E  %3Cdefs%3E    %3Crect id='dda90263-a290-4594-926f-6aba8cb4779f-a' width='24' height='24' x='0' y='0' rx='12'/%3E  %3C/defs%3E  %3Cg fill='none' fill-rule='evenodd'%3E    %3Cmask id='dda90263-a290-4594-926f-6aba8cb4779f-b' fill='%23fff'%3E      %3Cuse xlink:href='%23dda90263-a290-4594-926f-6aba8cb4779f-a'/%3E    %3C/mask%3E    %3Cuse fill='%23000' fill-opacity='.05' xlink:href='%23dda90263-a290-4594-926f-6aba8cb4779f-a'/%3E    %3Cg fill-opacity='.9' mask='url(%23dda90263-a290-4594-926f-6aba8cb4779f-b)'%3E      %3Cpath fill='%23000' d='M11.407 15.464L6.693 10.75l1.179-1.179 4.125 4.125 4.124-4.125L17.3 10.75l-4.714 4.714a.833.833 0 0 1-1.179 0z'/%3E    %3C/g%3E  %3C/g%3E%3C/svg%3E");
}

.weui-half-screen-dialog__hd .weui-icon-btn {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  color: inherit;
}

.weui-half-screen-dialog__hd .weui-icon-btn:active {
  opacity: 0.5;
}

.weui-half-screen-dialog__hd .weui-icon-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
}

body,.wx-root {
  --weui-BG-0: #ededed;
  --weui-BG-1: #f7f7f7;
  --weui-BG-2: #fff;
  --weui-BG-3: #f7f7f7;
  --weui-BG-4: #4c4c4c;
  --weui-BG-5: #fff;
  --weui-BLUE-100: #10aeff;
  --weui-BLUE-120: #3fbeff;
  --weui-BLUE-170: #b7e6ff;
  --weui-BLUE-80: #0c8bcc;
  --weui-BLUE-90: #0e9ce6;
  --weui-BLUE-BG-100: #48a6e2;
  --weui-BLUE-BG-110: #5aafe4;
  --weui-BLUE-BG-130: #7fc0ea;
  --weui-BLUE-BG-90: #4095cb;
  --weui-BRAND-100: #07c160;
  --weui-BRAND-120: #38cd7f;
  --weui-BRAND-170: #b4ecce;
  --weui-BRAND-80: #059a4c;
  --weui-BRAND-90: #06ae56;
  --weui-BRAND-BG-100: #2aae67;
  --weui-BRAND-BG-110: #3eb575;
  --weui-BRAND-BG-130: #69c694;
  --weui-BRAND-BG-90: #259c5c;
  --weui-FG-0: rgba(0, 0, 0, 0.9);
  --weui-FG-0_5: rgba(0, 0, 0, 0.9);
  --weui-FG-1: rgba(0, 0, 0, 0.55);
  --weui-FG-2: rgba(0, 0, 0, 0.3);
  --weui-FG-3: rgba(0, 0, 0, 0.1);
  --weui-FG-4: rgba(0, 0, 0, 0.15);
  --weui-GLYPH-0: rgba(0, 0, 0, 0.9);
  --weui-GLYPH-1: rgba(0, 0, 0, 0.55);
  --weui-GLYPH-2: rgba(0, 0, 0, 0.3);
  --weui-GLYPH-WHITE-0: rgba(255, 255, 255, 0.8);
  --weui-GLYPH-WHITE-1: rgba(255, 255, 255, 0.5);
  --weui-GLYPH-WHITE-2: rgba(255, 255, 255, 0.3);
  --weui-GLYPH-WHITE-3: #fff;
  --weui-GREEN-100: #91d300;
  --weui-GREEN-120: #a7db33;
  --weui-GREEN-170: #def1b3;
  --weui-GREEN-80: #74a800;
  --weui-GREEN-90: #82bd00;
  --weui-GREEN-BG-100: #96be40;
  --weui-GREEN-BG-110: #a0c452;
  --weui-GREEN-BG-130: #b5d179;
  --weui-GREEN-BG-90: #86aa39;
  --weui-INDIGO-100: #1485ee;
  --weui-INDIGO-120: #439df1;
  --weui-INDIGO-170: #b8daf9;
  --weui-INDIGO-80: #106abe;
  --weui-INDIGO-90: #1277d6;
  --weui-INDIGO-BG-100: #2b77bf;
  --weui-INDIGO-BG-110: #3f84c5;
  --weui-INDIGO-BG-130: #6ba0d2;
  --weui-INDIGO-BG-90: #266aab;
  --weui-LIGHTGREEN-100: #95ec69;
  --weui-LIGHTGREEN-120: #aaef87;
  --weui-LIGHTGREEN-170: #def9d1;
  --weui-LIGHTGREEN-80: #77bc54;
  --weui-LIGHTGREEN-90: #85d35e;
  --weui-LIGHTGREEN-BG-100: #72cf60;
  --weui-LIGHTGREEN-BG-110: #80d370;
  --weui-LIGHTGREEN-BG-130: #9cdd90;
  --weui-LIGHTGREEN-BG-90: #66b956;
  --weui-LINK-100: #576b95;
  --weui-LINK-120: #7888aa;
  --weui-LINK-170: #ccd2de;
  --weui-LINK-80: #455577;
  --weui-LINK-90: #4e6085;
  --weui-LINKFINDER-100: #002666;
  --weui-MATERIAL-ATTACHMENTCOLUMN: rgba(245, 245, 245, 0.95);
  --weui-MATERIAL-NAVIGATIONBAR: rgba(237, 237, 237, 0.94);
  --weui-MATERIAL-REGULAR: rgba(247, 247, 247, 0.3);
  --weui-MATERIAL-THICK: rgba(247, 247, 247, 0.8);
  --weui-MATERIAL-THIN: rgba(255, 255, 255, 0.2);
  --weui-MATERIAL-TOOLBAR: rgba(246, 246, 246, 0.82);
  --weui-ORANGE-100: #fa9d3b;
  --weui-ORANGE-120: #fbb062;
  --weui-ORANGE-170: #fde1c3;
  --weui-ORANGE-80: #c87d2f;
  --weui-ORANGE-90: #e08c34;
  --weui-ORANGE-BG-100: #ea7800;
  --weui-ORANGE-BG-110: #ec8519;
  --weui-ORANGE-BG-130: #f0a04d;
  --weui-ORANGE-BG-90: #d26b00;
  --weui-ORANGERED-100: #ff6146;
  --weui-OVERLAY: rgba(0, 0, 0, 0.5);
  --weui-OVERLAY-WHITE: rgba(242, 242, 242, 0.8);
  --weui-PURPLE-100: #6467f0;
  --weui-PURPLE-120: #8385f3;
  --weui-PURPLE-170: #d0d1fa;
  --weui-PURPLE-80: #5052c0;
  --weui-PURPLE-90: #595cd7;
  --weui-PURPLE-BG-100: #6769ba;
  --weui-PURPLE-BG-110: #7678c1;
  --weui-PURPLE-BG-130: #9496ce;
  --weui-PURPLE-BG-90: #5c5ea7;
  --weui-RED-100: #fa5151;
  --weui-RED-120: #fb7373;
  --weui-RED-170: #fdcaca;
  --weui-RED-80: #c84040;
  --weui-RED-90: #e14949;
  --weui-RED-BG-100: #cf5148;
  --weui-RED-BG-110: #d3625a;
  --weui-RED-BG-130: #dd847e;
  --weui-RED-BG-90: #b94840;
  --weui-SECONDARY-BG: rgba(0, 0, 0, 0.05);
  --weui-SEPARATOR-0: rgba(0, 0, 0, 0.1);
  --weui-SEPARATOR-1: rgba(0, 0, 0, 0.15);
  --weui-STATELAYER-HOVERED: rgba(0, 0, 0, 0.02);
  --weui-STATELAYER-PRESSED: rgba(0, 0, 0, 0.1);
  --weui-STATELAYER-PRESSEDSTRENGTHENED: rgba(0, 0, 0, 0.2);
  --weui-YELLOW-100: #ffc300;
  --weui-YELLOW-120: #ffcf33;
  --weui-YELLOW-170: #ffecb2;
  --weui-YELLOW-80: #cc9c00;
  --weui-YELLOW-90: #e6af00;
  --weui-YELLOW-BG-100: #efb600;
  --weui-YELLOW-BG-110: #f0bd19;
  --weui-YELLOW-BG-130: #f3cc4d;
  --weui-YELLOW-BG-90: #d7a400;
  --weui-FG-HALF: rgba(0, 0, 0, 0.9);
  --weui-RED: #fa5151;
  --weui-ORANGERED: #ff6146;
  --weui-ORANGE: #fa9d3b;
  --weui-YELLOW: #ffc300;
  --weui-GREEN: #91d300;
  --weui-LIGHTGREEN: #95ec69;
  --weui-TEXTGREEN: #06ae56;
  --weui-BRAND: #07c160;
  --weui-BLUE: #10aeff;
  --weui-INDIGO: #1485ee;
  --weui-PURPLE: #6467f0;
  --weui-LINK: #576b95;
  --weui-TAG-TEXT-ORANGE: #fa9d3b;
  --weui-TAG-TEXT-GREEN: #06ae56;
  --weui-TAG-TEXT-BLUE: #10aeff;
  --weui-REDORANGE: #ff6146;
  --weui-TAG-TEXT-BLACK: rgba(0, 0, 0, 0.5);
  --weui-TAG-BACKGROUND-BLACK: rgba(0, 0, 0, 0.05);
  --weui-WHITE: #fff;
  --weui-BG: #fff;
  --weui-FG: #000;
  --weui-FG-5: rgba(0, 0, 0, 0.05);
  --weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, 0.1);
  --weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, 0.1);
  --weui-TAG-TEXT-RED: rgba(250, 81, 81, 0.6);
  --weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, 0.1);
  --weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, 0.1);
}



        
        /* 遮罩层样式 */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.85);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease;
        }
        
        .overlay.active {
            opacity: 1;
            visibility: visible;
        }
        
        /* 图片展示容器 */
        .image-viewer {
            background: rgba(23,155,22, 0.95);
            border-radius: 15px;
            padding: 25px;
            max-width: 20%;
            max-height: 85vh;
            position: relative;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
            transform: scale(0.8);
            transition: transform 0.4s ease;
        }
        
        .overlay.active .image-viewer {
            transform: scale(1);
        }
        
        .image-container {
            max-width: 80vw;
            max-height: 40vh;
            overflow: hidden;
            border-radius: 8px;
			padding-top: 5vh;
			padding-bottom: 5vh;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        }
        
        .image-container img {
            width: 100%;
            height: auto;
            display: block;
            max-height: 30vh;
            object-fit: contain;
        }
        
        .image-desc {
            text-align: center;
            padding: 20px 10px;
            font-size: 22px;
			font-weight: bord;
            color: #fff;
            max-width: 90vw;
            margin: 0 auto;
            line-height: 1.6;
        }
        
        .close-btn {
            position: absolute;
            top: 15px;
            right: 25px;
            background: none;
            border: none;
            color: #fff;
            font-size: 2rem;
            cursor: pointer;
            transition: transform 0.2s ease;
        }
        
        .close-btn:hover {
            transform: rotate(90deg);
            color: #000;
        }