.my-taobao-header,
body:has(.my-taobao-page) .header {
  min-height: 64px;
  border-bottom: 0 !important;
  background: #ffffff !important;
  box-shadow: none;
  color: #1f1b13;
}

.my-taobao-header .q-toolbar,
body:has(.my-taobao-page) .header .q-toolbar {
  height: 64px;
  min-height: 64px;
}

.my-taobao-header .q-toolbar__title,
body:has(.my-taobao-page) .header .q-toolbar__title {
  color: #1f1b13 !important;
  font-weight: 800;
  letter-spacing: 0;
}

.my-taobao-header .q-btn,
body:has(.my-taobao-page) .header .q-btn {
  color: #1f1b13 !important;
}

.my-taobao-header .my-taobao-header-title {
  padding: 4px 44px !important;
}

.my-taobao-header .my-taobao-header-title > div:first-child {
  color: #1f1b13 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 22px !important;
  letter-spacing: 0;
}

.my-taobao-header-bag {
  display: none;
}

.my-taobao-header-bag {
  position: absolute;
  top: 8px;
  right: 22px;
  width: 58px;
  height: 66px;
  pointer-events: none;
  transform: rotate(15deg);
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 14px 14px 12px 12px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .36), rgba(255, 138, 0, .24));
  box-shadow: none;
  opacity: .9;
}

.my-taobao-header-bag-handle {
  position: absolute;
  top: -9px;
  left: 13px;
  width: 28px;
  height: 23px;
  border: 5px solid rgba(255, 255, 255, .78);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
}

.my-taobao-header-bag-face {
  position: absolute;
  left: 16px;
  top: 33px;
  width: 27px;
  height: 16px;
  border-bottom: 4px solid rgba(255, 255, 255, .68);
  border-radius: 0 0 18px 18px;
}

.my-taobao-header-bag-face::before,
.my-taobao-header-bag-face::after {
  content: "";
  position: absolute;
  top: -8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .72);
}

.my-taobao-header-bag-face::before {
  left: 3px;
}

.my-taobao-header-bag-face::after {
  right: 3px;
}

.my-taobao-page {
  position: relative;
  padding: 10px !important;
  padding-bottom: 76px !important;
  min-height: calc(100vh - 136px) !important;
  min-height: calc(100dvh - 136px) !important;
  background: #f3f3f5 !important;
}

.my-taobao-page .q-pa-md {
  padding: 10px !important;
}

html:has(.my-taobao-page),
body.my-taobao-body,
body:has(.my-taobao-page),
body:has(.my-taobao-page) #q-app,
body:has(.my-taobao-page) .q-page-container {
  background: #f3f3f5 !important;
}

body.my-taobao-body .q-page-container,
body:has(.my-taobao-page) .q-page-container {
  padding-top: 64px !important;
}

body.my-taobao-body .q-layout,
body.my-taobao-body .q-page,
body:has(.my-taobao-page) .q-layout,
body:has(.my-taobao-page) .q-page {
  background: #f3f3f5 !important;
}

body:has(.my-taobao-page) .q-page {
  min-height: calc(100vh - 136px) !important;
  min-height: calc(100dvh - 136px) !important;
}

.my-taobao-page > .q-pa-md[style],
.my-taobao-page > section > div[style] > .q-pa-md[style],
.my-taobao-page > section > div[style] > .q-mb-xs[style],
.my-taobao-page > section > div[style] > .q-mb-sm[style],
.my-taobao-page > section > div[style] > section[style],
.my-taobao-page > section > div[style] > section[style] > div[style] > .q-pa-md[style],
.my-taobao-page > section > div[style] > section[style] > div[style] > .q-mb-xs[style],
.my-taobao-page > section > div[style] > section[style] > div[style] > .q-mb-sm[style],
.my-taobao-page > section > div[style] > section[style] > div[style] > section[style] {
  border: 0 !important;
  box-shadow: none !important;
}

.my-taobao-page > .q-pa-md.q-mb-md[style]:first-child,
.my-taobao-page .my-identity-summary[style] {
  border: 1px solid #e3f0f3 !important;
  background: #f2fbfd !important;
}

body:has(.my-taobao-page) .my-footer {
  border-top: 1px solid #ffe7c4;
  background: #ffffff !important;
  box-shadow: none;
}

body:has(.my-taobao-page) .my-footer .q-tabs {
  color: #8f8376;
}

body:has(.my-taobao-page) .my-footer .q-tab--active,
body:has(.my-taobao-page) .my-footer .q-tab--active .text {
  color: #ff8a00 !important;
}

body:has(.my-taobao-page) .my-footer .q-tab--active .text {
  font-weight: 600;
}

body.my-taobao-body .my-footer .q-tab--active .q-tab__indicator,
body:has(.my-taobao-page) .my-footer .q-tab--active .q-tab__indicator {
  background: #ff8a00 !important;
}

body.my-taobao-body .my-footer .q-tab--active .my_icon,
body:has(.my-taobao-page) .my-footer .q-tab--active .my_icon {
  position: relative;
  background: none !important;
  filter: none;
}

body.my-taobao-body .my-footer .q-tab--active .my_icon::before,
body:has(.my-taobao-page) .my-footer .q-tab--active .my_icon::before {
  position: absolute;
  top: 3px;
  left: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff8a00;
  content: "";
}

body.my-taobao-body .my-footer .q-tab--active .my_icon::after,
body:has(.my-taobao-page) .my-footer .q-tab--active .my_icon::after {
  position: absolute;
  right: 4px;
  bottom: 3px;
  left: 4px;
  height: 11px;
  border-radius: 9px 9px 5px 5px;
  background:
    radial-gradient(circle at 50% 0, transparent 0 5px, #ff8a00 5.5px) top center / 100% 7px no-repeat,
    #ff8a00;
  content: "";
}

body:has(.my-taobao-page) button:focus-visible,
body:has(.my-taobao-page) input:focus-visible {
  outline: 2px solid #ffb65f;
  outline-offset: 2px;
}
