:root {
  --adm-radius-s: 4px;
  --adm-radius-m: 8px;
  --adm-radius-l: 12px;
  --adm-font-size-1: 9px;
  --adm-font-size-2: 10px;
  --adm-font-size-3: 11px;
  --adm-font-size-4: 12px;
  --adm-font-size-5: 13px;
  --adm-font-size-6: 14px;
  --adm-font-size-7: 15px;
  --adm-font-size-8: 16px;
  --adm-font-size-9: 17px;
  --adm-font-size-10: 18px;
  --adm-color-primary: #1677ff;
  --adm-color-success: #00b578;
  --adm-color-warning: #ff8f1f;
  --adm-color-danger: #ff3141;
  --adm-color-yellow: #ff9f18;
  --adm-color-orange: #ff6430;
  --adm-color-wathet: #e7f1ff;
  --adm-color-text: #333333;
  --adm-color-text-secondary: #666666;
  --adm-color-weak: #999999;
  --adm-color-light: #cccccc;
  --adm-color-border: #eeeeee;
  --adm-color-background: #ffffff;
  --adm-color-highlight: var(--adm-color-danger);
  --adm-color-white: #ffffff;
  --adm-color-box: #f5f5f5;
  --adm-color-text-light-solid: var(--adm-color-white);
  --adm-color-text-dark-solid: #000000;
  --adm-color-fill-content: var(--adm-color-box);
  --adm-font-size-main: var(--adm-font-size-5);
  --adm-font-family: -apple-system, blinkmacsystemfont, 'Helvetica Neue',
    helvetica, segoe ui, arial, roboto, 'PingFang SC', 'miui',
    'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
  --adm-border-color: var(--adm-color-border);
}
html[data-prefers-color-scheme='dark'] {
  --adm-color-primary: #3086ff;
  --adm-color-success: #34b368;
  --adm-color-warning: #ffa930;
  --adm-color-danger: #ff4a58;
  --adm-color-yellow: #ffa930;
  --adm-color-orange: #e65a2b;
  --adm-color-wathet: #0d2543;
  --adm-color-text: #e6e6e6;
  --adm-color-text-secondary: #b3b3b3;
  --adm-color-weak: #808080;
  --adm-color-light: #4d4d4d;
  --adm-color-border: #2b2b2b;
  --adm-color-box: #0a0a0a;
  --adm-color-background: #1a1a1a;
  --adm-color-background-body: var(--adm-color-background);
  --adm-border-color: var(--adm-color-border);
}
:root {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
  background-color: var(--adm-color-background-body);
}
body {
  color: var(--adm-color-text);
  font-size: var(--adm-font-size-main);
  font-family: var(--adm-font-family);
}
a,
button {
  cursor: pointer;
}
a {
  color: var(--adm-color-primary);
  transition: opacity ease-in-out 0.2s;
}
a:active {
  opacity: 0.8;
}
.adm-plain-anchor {
  color: unset;
  transition: none;
}
.adm-plain-anchor:active {
  opacity: unset;
}
body.adm-overflow-hidden {
  overflow: hidden !important;
}
div.adm-px-tester {
  --size: 1;
  height: calc(var(--size) / 2 * 2px);
  width: 0;
  position: fixed;
  left: -100vw;
  top: -100vh;
  -webkit-user-select: none;
          user-select: none;
  pointer-events: none;
}
.adm-action-sheet-popup > .adm-popup-body {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  overflow: hidden;
}
.adm-action-sheet-extra {
  display: flex;
  justify-content: center;
  color: var(--adm-color-weak);
  font-size: var(--adm-font-size-7);
  padding: 18px 12px;
  border-bottom: 1px solid var(--adm-color-border);
}
.adm-action-sheet-button-list {
  border-bottom: 1px solid var(--adm-color-border);
}
.adm-action-sheet-button-item-wrapper {
  border-bottom: 1px solid var(--adm-color-border);
}
.adm-action-sheet-button-item-wrapper:last-child {
  border-bottom: none;
}
.adm-action-sheet-button-item {
  text-align: center;
  display: block;
  background-color: var(--adm-color-background);
  padding: 16px;
}
.adm-action-sheet-button-item:active {
  background-color: var(--adm-color-border);
}
.adm-action-sheet-button-item-disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.4;
}
.adm-action-sheet-button-item-name {
  color: var(--adm-color-text);
  font-size: var(--adm-font-size-10);
}
.adm-action-sheet-button-item-description {
  font-size: var(--adm-font-size-6);
  color: var(--adm-color-weak);
  padding-top: 4px;
}
.adm-action-sheet-button-item-danger .adm-action-sheet-button-item-name {
  color: var(--adm-color-danger);
}
.adm-action-sheet-button-item-bold .adm-action-sheet-button-item-name {
  font-weight: bold;
}
.adm-action-sheet-cancel {
  background-color: var(--adm-color-fill-content);
  padding-top: 8px;
}
.adm-popup {
  --z-index: var(--adm-popup-z-index, 1000);
  position: fixed;
  z-index: var(--z-index);
}
.adm-popup-body {
  position: fixed;
  background-color: var(--adm-color-background);
  z-index: calc(var(--z-index) + 10);
}
.adm-popup-body .adm-popup-close-icon {
  position: absolute;
  z-index: 100;
}
.adm-popup-body-position-bottom {
  width: 100%;
  bottom: 0;
  left: 0;
}
.adm-popup-body-position-bottom .adm-popup-close-icon {
  right: 8px;
  top: 8px;
}
.adm-popup-body-position-top {
  width: 100%;
  top: 0;
  left: 0;
}
.adm-popup-body-position-top .adm-popup-close-icon {
  right: 8px;
  bottom: 8px;
}
.adm-popup-body-position-left {
  height: 100%;
  top: 0;
  left: 0;
}
.adm-popup-body-position-left .adm-popup-close-icon {
  right: 8px;
  top: 8px;
}
.adm-popup-body-position-right {
  height: 100%;
  top: 0;
  right: 0;
}
.adm-popup-body-position-right .adm-popup-close-icon {
  left: 8px;
  top: 8px;
}
.adm-popup-close-icon {
  cursor: pointer;
  padding: 4px;
  font-size: 18px;
  line-height: 1;
  color: var(--adm-color-weak);
}
.adm-mask {
  --z-index: var(--adm-mask-z-index, 1000);
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-index);
  display: block;
  width: 100%;
  height: 100%;
}
.adm-mask-aria-button {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.adm-mask-content {
  z-index: 1;
}
.adm-safe-area {
  --multiple: var(--adm-safe-area-multiple, 1);
  display: block;
  width: 100%;
}
.adm-safe-area-position-top {
  padding-top: calc(env(safe-area-inset-top) * var(--multiple));
}
.adm-safe-area-position-bottom {
  padding-bottom: calc(env(safe-area-inset-bottom) * var(--multiple));
}
.adm-auto-center {
  display: flex;
  justify-content: center;
}
.adm-auto-center-content {
  flex: 0 1 auto;
}
.adm-image {
  --width: var(--adm-image-width, auto);
  --height: var(--adm-image-height, auto);
  width: var(--width);
  height: var(--height);
  display: block;
  overflow: hidden;
}
.adm-image-img {
  width: 100%;
  height: 100%;
}
.adm-image-tip {
  position: relative;
  background-color: var(--adm-color-fill-content);
  height: 100%;
  min-height: 24px;
  min-width: 24px;
}
.adm-image-tip > svg {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--adm-color-weak);
}
.adm-badge-wrapper {
  display: inline-block;
  position: relative;
}
.adm-badge {
  display: inline-flex;
  vertical-align: middle;
  box-sizing: content-box;
  border-radius: 100px;
  background-color: var(--color);
  --right: 0;
  --top: 0;
  --color: var(--adm-badge-color, var(--adm-color-highlight));
}
.adm-badge-content {
  color: var(--adm-color-text-light-solid);
  box-sizing: border-box;
  min-width: 8px;
  padding: 1px 4px;
  font-size: var(--adm-font-size-1);
  line-height: 12px;
  white-space: nowrap;
  font-weight: normal;
  text-align: center;
}
.adm-badge-fixed {
  position: absolute;
  right: var(--right);
  top: var(--top);
  transform: translate(50%, -50%);
}
.adm-badge-dot {
  min-width: 10px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
}
.adm-badge-bordered {
  border: solid 1px var(--adm-color-text-light-solid);
}
.adm-button {
  --color: var(--adm-color-text-light-solid);
  --text-color: var(--adm-button-text-color, var(--adm-color-text));
  --background-color: var(--adm-button-background-color, var(--adm-color-background));
  --border-radius: var(--adm-button-border-radius, 4px);
  --border-width: var(--adm-button-border-width, 1px);
  --border-style: var(--adm-button-border-style, solid);
  --border-color: var(--adm-button-border-color, var(--adm-color-border));
  color: var(--text-color);
  background-color: var(--background-color);
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  height: auto;
  padding: 7px 12px;
  margin: 0;
  font-size: var(--adm-font-size-9);
  line-height: 1.4;
  text-align: center;
  border: var(--border-width) var(--border-style) var(--border-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: opacity ease 0.15s;
  -webkit-user-select: none;
          user-select: none;
}
.adm-button:focus {
  outline: none;
}
.adm-button::before {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(calc(var(--border-width) * -1), calc(var(--border-width) * -1));
  width: 100%;
  height: 100%;
  background-color: var(--adm-color-text-dark-solid);
  border: var(--border-width) var(--border-style) var(--adm-color-text-dark-solid);
  border-radius: var(--border-radius);
  opacity: 0;
  content: ' ';
  box-sizing: content-box;
}
.adm-button:active::before {
  opacity: 0.08;
}
.adm-button-default.adm-button-fill-outline {
  --background-color: transparent;
  --border-color: var(--adm-color-text);
}
.adm-button-default.adm-button-fill-none {
  --background-color: transparent;
  --border-width: 0px;
}
.adm-button:not(.adm-button-default) {
  --text-color: var(--adm-color-text-light-solid);
  --background-color: var(--color);
  --border-color: var(--color);
}
.adm-button:not(.adm-button-default).adm-button-fill-outline {
  --text-color: var(--color);
  --background-color: transparent;
}
.adm-button:not(.adm-button-default).adm-button-fill-none {
  --text-color: var(--color);
  --background-color: transparent;
  --border-width: 0px;
}
.adm-button-primary {
  --color: var(--adm-color-primary);
}
.adm-button-success {
  --color: var(--adm-color-success);
}
.adm-button-danger {
  --color: var(--adm-color-danger);
}
.adm-button-warning {
  --color: var(--adm-color-warning);
}
.adm-button-block {
  display: block;
  width: 100%;
}
.adm-button-disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.adm-button-disabled:active::before {
  display: none;
}
.adm-button.adm-button-mini {
  padding-top: 3px;
  padding-bottom: 3px;
  font-size: var(--adm-font-size-main);
}
.adm-button.adm-button-mini.adm-button-shape-rounded {
  padding-left: 9px;
  padding-right: 9px;
}
.adm-button.adm-button-small {
  padding-top: 3px;
  padding-bottom: 3px;
  font-size: var(--adm-font-size-7);
}
.adm-button.adm-button-large {
  padding-top: 11px;
  padding-bottom: 11px;
  font-size: var(--adm-font-size-10);
}
.adm-button.adm-button-shape-rounded {
  --border-radius: 1000px;
}
.adm-button.adm-button-shape-rectangular {
  --border-radius: 0;
}
.adm-button-loading {
  vertical-align: bottom;
}
.adm-button-loading-wrapper {
  display: flex;
  height: 1.4em;
  align-items: center;
  justify-content: center;
}
.adm-button-loading-wrapper > .adm-loading {
  opacity: 0.6;
}
.adm-dot-loading {
  display: inline-block;
}
.adm-picker {
  --header-button-font-size: var(--adm-font-size-7);
  --title-font-size: var(--adm-font-size-7);
  --item-font-size: var(--adm-font-size-8);
  --item-height: 34px;
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  ---item-font-size: var(--item-font-size);
  ---item-height: var(--item-height);
}
.adm-picker .adm-picker-view.adm-picker-view {
  --item-font-size: var(---item-font-size);
  --item-height: var(---item-height);
}
.adm-picker-header {
  flex-shrink: 0;
  border-bottom: solid 1px var(--adm-color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 4px;
}
.adm-picker-header-button {
  font-size: var(--header-button-font-size);
  display: inline-block;
  padding: 8px 8px;
}
.adm-picker-header-button-disabled,
.adm-picker-header-button-disabled:active {
  opacity: 0.4;
  cursor: not-allowed;
}
.adm-picker-header-title {
  padding: 4px 4px;
  font-size: var(--title-font-size);
  color: var(--adm-color-text);
  text-align: center;
  flex: 1;
}
.adm-picker-body {
  flex: 1;
  width: 100%;
  height: 100%;
}
.adm-picker-body > .adm-picker-view {
  --height: 100%;
}
.adm-picker-popup .adm-popup-body {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.adm-spin-loading {
  --color: var(--adm-color-weak);
  --size: 32px;
  width: var(--size);
  height: var(--size);
}
.adm-spin-loading-svg {
  width: 100%;
  height: 100%;
  animation: adm-spin-loading-rotate 0.8s infinite linear;
}
.adm-spin-loading-svg > .adm-spin-loading-fill {
  stroke: var(--color);
}
@keyframes adm-spin-loading-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.adm-picker-view {
  --height: 240px;
  --item-height: 34px;
  --item-font-size: var(--adm-font-size-8);
  height: var(--height);
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
  background: var(--adm-color-background);
}
.adm-picker-view-column {
  height: 100%;
  flex: 1;
  -webkit-user-select: none;
          user-select: none;
  touch-action: none;
  position: relative;
  z-index: 0;
}
.adm-picker-view-column-wheel {
  width: 100%;
  cursor: -webkit-grab;
  cursor: grab;
  position: absolute;
  top: calc(50% - var(--item-height) / 2);
  left: 0;
}
.adm-picker-view-column-wheel::before {
  content: ' ';
  display: block;
  position: absolute;
  width: 100%;
  height: 100vh;
  top: -100vh;
}
.adm-picker-view-column-wheel::after {
  content: ' ';
  display: block;
  position: absolute;
  width: 100%;
  height: 100vh;
  bottom: -100vh;
}
.adm-picker-view-column-item {
  font-size: var(--item-font-size);
  padding: 0 6px;
  height: var(--item-height);
  display: flex;
  justify-content: center;
  align-items: center;
}
.adm-picker-view-column-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-picker-view-column-accessible {
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  top: calc(var(--item-height) * -1);
  z-index: 0;
  padding-bottom: 1px;
}
.adm-picker-view-column-accessible > * {
  flex: 1;
  text-overflow: ellipsis;
}
.adm-picker-view-column-accessible-current {
  position: absolute;
  width: 100%;
  height: 100%;
}
.adm-picker-view-column-accessible-button {
  width: 100%;
  height: 100%;
}
.adm-picker-view-mask {
  position: absolute;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.adm-picker-view-mask-top,
.adm-picker-view-mask-bottom {
  flex: auto;
}
.adm-picker-view-mask-middle {
  height: var(--item-height);
  box-sizing: border-box;
  flex: none;
  border-top: solid 1px var(--adm-color-border);
  border-bottom: solid 1px var(--adm-color-border);
}
.adm-picker-view-mask-top {
  background: var(--adm-color-background);
  -webkit-mask: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
          mask: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
}
.adm-picker-view-mask-bottom {
  background: var(--adm-color-background);
  -webkit-mask: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
          mask: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
}
.adm-picker-view-loading-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.adm-picker-view-item-height-measure {
  position: relative;
  left: 0;
  top: 0;
  height: var(--item-height);
  width: 0;
  pointer-events: none;
}
.adm-center-popup {
  --background-color: var(--adm-center-popup-background-color, var(--adm-color-background));
  --border-radius: var(--adm-center-popup-border-radius, 8px);
  --max-width: var(--adm-center-popup-max-width, 75vw);
  --min-width: var(--adm-center-popup-min-width, 280px);
  --z-index: var(--adm-center-popup-z-index, 1000);
  position: fixed;
  z-index: var(--z-index);
}
.adm-center-popup .adm-center-popup-mask {
  z-index: 0;
}
.adm-center-popup-wrap {
  position: fixed;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: auto;
  min-width: var(--min-width);
  max-width: var(--max-width);
  transform: translate(-50%, -50%);
}
.adm-center-popup-body {
  background-color: var(--background-color);
  border-radius: var(--border-radius);
}
.adm-center-popup-close {
  position: absolute;
  z-index: 100;
  right: 8px;
  top: 8px;
  cursor: pointer;
  padding: 4px;
  font-size: 18px;
  color: var(--adm-color-weak);
}
.adm-dialog {
  --z-index: var(--adm-dialog-z-index, 1000);
  ---z-index: var(--z-index);
}
.adm-dialog .adm-center-popup {
  --z-index: var(---z-index);
}
.adm-dialog-body {
  width: 100%;
  max-height: 70vh;
  font-size: var(--adm-font-size-6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.adm-dialog-body > * {
  flex: none;
}
.adm-dialog-body > .adm-dialog-content {
  flex: auto;
}
.adm-dialog-body:not(.adm-dialog-with-image) {
  padding-top: 20px;
}
.adm-dialog-image-container {
  margin-bottom: 12px;
  max-height: 40vh;
}
.adm-dialog-header {
  margin-bottom: 8px;
  padding: 0 12px;
}
.adm-dialog-title {
  margin-bottom: 8px;
  padding: 0 12px;
  font-weight: bold;
  font-size: var(--adm-font-size-10);
  line-height: 25px;
  text-align: center;
}
.adm-dialog-content {
  padding: 0 12px 20px;
  max-height: 70vh;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: var(--adm-font-size-7);
  line-height: 1.4;
  color: var(--adm-color-text);
}
.adm-dialog-content-empty {
  padding: 0;
  height: 12px;
}
.adm-dialog-footer {
  -webkit-user-select: none;
          user-select: none;
}
.adm-dialog-footer .adm-dialog-action-row {
  display: flex;
  align-items: stretch;
  border-top: 0.5px solid var(--adm-color-border);
}
.adm-dialog-footer .adm-dialog-action-row > * {
  flex: 1;
}
.adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button {
  padding: 10px;
  font-size: var(--adm-font-size-10);
  line-height: 25px;
  border-radius: 0;
  border-right: solid 0.5px var(--adm-color-border);
}
.adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button-bold {
  font-weight: bold;
}
.adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button:last-child {
  border-right: none;
}
.adm-dialog-image-container {
  overflow-y: auto;
}
.adm-image-viewer-content {
  width: 100vw;
  height: 100vh;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.adm-image-viewer-footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  z-index: 1;
}
.adm-image-viewer-slides {
  height: 100%;
  position: relative;
  z-index: 1;
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
}
.adm-image-viewer-slides-inner {
  height: 100%;
  white-space: nowrap;
}
.adm-image-viewer-slides-inner > * {
  margin-right: 16px;
}
.adm-image-viewer-slide {
  position: relative;
  width: 100%;
  height: 100%;
  display: inline-block;
}
.adm-image-viewer-control {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
}
.adm-image-viewer-image-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.adm-image-viewer-image-wrapper img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}
.adm-image-viewer-indicator {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  color: var(--adm-color-border);
  font-size: var(--adm-font-size-6);
}
.adm-infinite-scroll {
  color: var(--adm-color-weak);
  padding: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--adm-font-size-main);
}
.adm-infinite-scroll-failed-text {
  display: inline-block;
  margin-right: 8px;
}
.adm-page-indicator {
  display: flex;
  width: auto;
  --dot-color: var(--adm-color-light);
  --active-dot-color: var(--adm-color-primary);
  --dot-size: 3px;
  --active-dot-size: 13px;
  --dot-border-radius: 1px;
  --active-dot-border-radius: var(--dot-border-radius);
  --dot-spacing: 3px;
}
.adm-page-indicator-dot {
  display: block;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: var(--dot-border-radius);
  background: var(--dot-color);
}
.adm-page-indicator-dot:last-child {
  margin-right: 0;
}
.adm-page-indicator-dot-active {
  border-radius: var(--active-dot-border-radius);
  background: var(--active-dot-color);
}
.adm-page-indicator-color-white {
  --dot-color: rgba(255, 255, 255, 0.5);
  --active-dot-color: var(--adm-color-text-light-solid);
}
.adm-page-indicator-horizontal {
  flex-direction: row;
}
.adm-page-indicator-horizontal .adm-page-indicator-dot {
  margin-right: var(--dot-spacing);
}
.adm-page-indicator-horizontal .adm-page-indicator-dot-active {
  width: var(--active-dot-size);
}
.adm-page-indicator-vertical {
  flex-direction: column;
}
.adm-page-indicator-vertical .adm-page-indicator-dot {
  margin-bottom: var(--dot-spacing);
}
.adm-page-indicator-vertical .adm-page-indicator-dot-active {
  height: var(--active-dot-size);
}
.adm-pull-to-refresh-head {
  overflow: hidden;
  position: relative;
}
.adm-pull-to-refresh-head-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  color: var(--adm-color-weak);
  display: flex;
  justify-content: center;
  align-items: center;
}
.adm-swiper {
  --height: auto;
  --width: 100%;
  --border-radius: 0;
  --track-padding: 0;
  --slide-size: 100%;
  --track-offset: 0%;
  display: block;
  width: var(--width);
  height: var(--height);
  position: relative;
  border-radius: var(--border-radius);
  z-index: 0;
  overflow: hidden;
}
.adm-swiper-track {
  width: 100%;
  height: 100%;
  white-space: nowrap;
  padding: var(--track-padding);
}
.adm-swiper-track-allow-touch-move {
  cursor: -webkit-grab;
  cursor: grab;
}
.adm-swiper-track-inner {
  width: 100%;
  height: 100%;
  overflow: visible;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
}
.adm-swiper-slide,
.adm-swiper-slide-placeholder {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  white-space: unset;
  flex: none;
}
.adm-swiper-item {
  display: block;
  width: 100%;
  height: 100%;
  white-space: normal;
}
.adm-swiper-horizontal .adm-swiper-track-allow-touch-move {
  touch-action: pan-y;
}
.adm-swiper-horizontal .adm-swiper-indicator {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
}
.adm-swiper-horizontal .adm-swiper-track {
  transform: translateX(var(--track-offset));
}
.adm-swiper-horizontal .adm-swiper-track-inner {
  flex-direction: row;
  width: var(--slide-size);
}
.adm-swiper-vertical .adm-swiper-track-allow-touch-move {
  touch-action: pan-x;
}
.adm-swiper-vertical .adm-swiper-indicator {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}
.adm-swiper-vertical .adm-swiper-track {
  transform: translateY(var(--track-offset));
}
.adm-swiper-vertical .adm-swiper-track-inner {
  flex-direction: column;
  height: var(--slide-size);
}
.adm-tab-bar-wrap {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
  min-height: 48px;
}
.adm-tab-bar-item {
  flex: 1;
  color: var(--adm-color-text-secondary);
  white-space: nowrap;
  padding: 4px 8px;
  width: -webkit-min-content;
  width: min-content;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.adm-tab-bar-item-icon {
  font-size: 24px;
  height: 24px;
  line-height: 1;
}
.adm-tab-bar-item-title {
  font-size: var(--adm-font-size-2);
  line-height: 15px;
}
.adm-tab-bar-item-title-with-icon {
  margin-top: 2px;
}
.adm-tab-bar-item-active {
  color: var(--adm-color-primary);
}
.adm-tab-bar-icon-badge {
  --top: 6px;
}
.adm-tab-bar-title-badge {
  --right: -2px;
  --top: -2px;
}
.adm-toast-mask .adm-toast-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
.adm-toast-mask .adm-toast-main {
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  max-width: 204px;
  max-height: 70%;
  overflow: auto;
  color: white;
  word-break: break-all;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  pointer-events: all;
  font-size: var(--adm-font-size-7);
  line-height: 1.5;
  box-sizing: border-box;
  text-align: initial;
}
.adm-toast-mask .adm-toast-main-text {
  padding: 12px;
  min-width: 0;
}
.adm-toast-mask .adm-toast-main-icon {
  padding: 35px 12px;
  min-width: 150px;
}
.adm-toast-mask .adm-toast-main-icon .adm-toast-icon {
  text-align: center;
  margin-bottom: 8px;
  font-size: 36px;
  line-height: 1;
}
.adm-toast-loading {
  --size: 48px;
  margin: 0 auto 8px;
}
/* ============================================================================
 * 星辰台球联盟 H5 · 表现层(基于「黄蓝撞色」设计系统重做)
 * token 唯一事实源:../taiqiu-v3-claude-ui/assets/tokens.css(此处对齐落地)
 * 蓝为底 #0068C4、黄为点 #FDD604(仅配深字);深蓝 #0B3D91 导航/沉浸面。
 * ==========================================================================*/
:root {
  /* ---- 品牌色(黄蓝撞色)---- */
  --brand-primary: #0068c4;
  --brand-primary-bright: #1fa6f5;
  --brand-deep: #0b3d91;
  --brand-accent: #fdd604;
  --brand-primary-hover: #0a7bd8;
  --brand-primary-pressed: #005fb0;
  --brand-primary-soft: #e5f0fc;
  --brand-primary-border: #a9cff2;
  --brand-deep-pressed: #082e6e;
  --brand-accent-hover: #fde047;
  --brand-accent-pressed: #f5c400;
  --brand-accent-soft: #fef6d8;
  /* ---- 底色 / 表面 ---- */
  --canvas: #f2f6fb;
  --surface: #ffffff;
  --surface-muted: #eaf1f8;
  --surface-raised: #ffffff;
  --overlay: rgba(11, 31, 51, 0.55);
  /* ---- 文字 ---- */
  --text-primary: #1a1a1a;
  --text-secondary: #54606c;
  --text-tertiary: #6b7683;
  --text-on-dark: #ffffff;
  --text-on-accent: #1a1a1a;
  /* ---- 功能/状态色 ---- */
  --success: #12805c;
  --warning: #b45309;
  --danger: #d92d20;
  --info: #0068c4;
  --focus: #1fa6f5;
  --success-soft: #ddf2e9; --success-text: #0d684a;
  --warning-soft: #fbeedd; --warning-text: #8a4407;
  --danger-soft: #fbe5e3; --danger-text: #b42318;
  --info-soft: #e5f0fc; --info-text: #0068c4;
  /* ---- 中性灰阶 ---- */
  --gray-900: #1a1a1a; --gray-700: #333d47; --gray-600: #54606c; --gray-500: #6b7683;
  --gray-400: #9aa5b1; --gray-300: #cfd8e0; --gray-200: #e3eaf0; --gray-100: #f1f5f9;
  /* ---- 边框 / 分隔 ---- */
  --border-default: #cfd8e0;
  --border-strong: #9aa5b1;
  --divider: #e3eaf0;
  --divider-strong: #cfd8e0;
  /* ---- 圆角 ---- */
  /* 圆角 2026-08-06 三折:全部取一半、非整数向下取整(10→5, 8→4, 5→2, 3→1, 14→7) */
  --radius-xs: 1px; --radius-sm: 2px; --radius-control: 4px; --radius-card: 5px; --radius-sheet: 7px; --radius-full: 999px;
  /* ---- 间距 ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px;
  /* ---- 阴影 ---- */
  --shadow-1: 0 1px 2px rgba(11,31,51,0.06), 0 1px 3px rgba(11,31,51,0.05);
  --shadow-2: 0 2px 6px rgba(11,31,51,0.08), 0 4px 12px rgba(11,31,51,0.06);
  --shadow-3: 0 6px 16px rgba(11,31,51,0.12), 0 12px 28px rgba(11,31,51,0.08);
  --shadow-4: 0 12px 32px rgba(11,31,51,0.18), 0 20px 48px rgba(11,31,51,0.12);
  /* ---- z 层级 ---- */
  --z-base: 0; --z-sticky: 10; --z-dropdown: 20; --z-overlay: 30; --z-drawer: 40; --z-modal: 60; --z-toast: 80;
  /* ---- 字阶 / 字重 ---- */
  --font-label: 11px; --font-caption: 12px; --font-body: 14px; --font-title: 17px; --font-display: 22px; --font-score: 34px;
  --lh-label: 1.4; --lh-body: 1.5; --lh-title: 1.3;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  /* ---- 触控 / 尺寸 ---- */
  --touch-target: 44px; --control-sm: 34px; --control-md: 38px; --control-lg: 44px; --tabbar-h: 56px; --topbar-h: 48px;
  /* ---- 动效 ---- */
  --motion-fast: 180ms; --motion-base: 220ms; --motion-page: 250ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  /* ---- 安全区 ---- */
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px);

  /* ================= antd-mobile 主题映射(同一套 token) ================= */
  --adm-color-primary: #0068c4;
  --adm-color-success: #12805c;
  --adm-color-warning: #b45309;
  --adm-color-danger: #d92d20;
  --adm-color-yellow: #fdd604;
  --adm-color-text: #1a1a1a;
  --adm-color-text-secondary: #54606c;
  --adm-color-weak: #6b7683;
  --adm-color-light: #9aa5b1;
  --adm-color-border: #cfd8e0;
  --adm-color-background: #ffffff;
  --adm-color-box: #eaf1f8;
  --adm-color-background-body: #f2f6fb;
  --adm-color-wathet: #e5f0fc;
  --adm-color-text-dark-solid: #1a1a1a;
  --adm-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --adm-radius-s: 2px; --adm-radius-m: 4px; --adm-radius-l: 5px;
  --adm-font-size-main: 14px;

  /* ---- 兼容别名(旧 class 引用,逐步收敛) ---- */
  --lime: var(--brand-accent);
  --lime-bright: var(--brand-accent-hover);
}

.miniapp-live-main, .miniapp-live-immersive { background: #050b16; min-height: 100dvh; }
.miniapp-live-immersive { color: #fff; display: flex; flex-direction: column; }
.miniapp-live-immersive .player-shell { align-items: center; background: #000; display: flex; flex: 1; min-height: 0; }
.miniapp-live-immersive .player-shell video { height: auto; max-height: calc(100dvh - 52px); width: 100%; }
.miniapp-live-title { align-items: center; background: #0b2b5b; display: flex; flex: 0 0 auto; gap: 10px; min-height: 52px; padding: env(safe-area-inset-top) 18px 0; }

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; min-width: 320px; min-height: 100dvh; background: var(--canvas); color: var(--text-primary); font-family: var(--adm-font-family); font-size: var(--font-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; font-synthesis: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { cursor: pointer; }
a { color: var(--brand-primary); text-decoration: none; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: var(--font-display); line-height: var(--lh-title); letter-spacing: -.01em; font-weight: var(--weight-bold); }
h2 { font-size: var(--font-title); line-height: var(--lh-title); font-weight: var(--weight-semibold); }
hr { border: 0; border-top: 1px solid var(--divider); margin: 16px 0; }
time, small { color: var(--text-tertiary); }
.num, .tnum, b, strong { font-variant-numeric: tabular-nums; }
.app-shell { width: 100%; max-width: 480px; min-height: 100dvh; margin: 0 auto; background: var(--canvas); overflow-x: clip; overscroll-behavior-y: contain; }
.page { min-height: 100dvh; padding: 10px 10px calc(16px + var(--safe-bottom)); outline: none; }
.page.with-tabs { padding-top: calc(8px + var(--safe-top)); padding-bottom: calc(96px + var(--safe-bottom)); }
.page.with-tabs.with-scroll-header { padding-top: calc(var(--topbar-h) + var(--safe-top) + 8px); background: linear-gradient(180deg, #e8f1fa 0, var(--canvas) 132px); }
.skip-link { position: fixed; z-index: 100; top: -100px; left: 8px; padding: 12px; background: #fff; color: var(--brand-deep); }
.skip-link:focus { top: 8px; }
.sr-only, .file-button input { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ================= 顶部导航（统一二级页返回组件） ================= */
.top-bar { position: sticky; z-index: var(--z-sticky); top: 0; display: grid; min-height: calc(var(--topbar-h) + var(--safe-top)); padding: var(--safe-top) 0 0; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; color: var(--text-on-dark); background: var(--brand-deep); box-shadow: 0 1px 0 rgb(255 255 255 / 8%) inset; }
.top-bar > strong { overflow: hidden; color: inherit; font-size: var(--font-title); font-weight: var(--weight-medium); letter-spacing: .01em; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.top-bar--light { color: var(--text-primary); background: var(--surface); border-bottom: 1px solid var(--divider); box-shadow: none; }
.tq-back-button { display: grid; width: 44px; min-width: 44px; height: 44px; padding: 0; place-items: center; color: inherit; border: 0; border-radius: 0; background: transparent; transition: opacity var(--motion-fast) var(--ease-out); }
.tq-back-button:active { opacity: .58; }
.tq-back-button:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.tq-back-button .icon { width: 32px; height: 32px; }
.app-scroll-header { --app-header-opacity: 0; --app-header-offset: 4px; position: fixed; z-index: 25; top: 0; left: 50%; display: grid; width: min(100%, 480px); height: calc(var(--topbar-h) + var(--safe-top)); padding-top: var(--safe-top); place-items: center; transform: translateX(-50%); color: #fff; pointer-events: none; }
.app-scroll-header::before { position: absolute; z-index: -1; inset: 0; content: ''; opacity: var(--app-header-opacity); background: linear-gradient(100deg, var(--brand-deep), var(--brand-primary)); box-shadow: 0 1px 0 rgb(255 255 255 / 12%); will-change: opacity; }
.app-scroll-header__heading { position: absolute; bottom: 0; left: 50%; display: flex; width: auto; max-width: calc(100% - 184px); height: var(--topbar-h); padding: 0 2px; align-items: center; flex-direction: column; justify-content: center; overflow: hidden; transform: translateX(-50%); transition: opacity 160ms ease-out; white-space: nowrap; }
.app-scroll-header__heading--rest { color: #171a1f; }
.app-scroll-header__heading--scrolled { color: #fff; }
.app-scroll-header__heading strong, .app-scroll-header__heading small { display: block; width: 100%; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.app-scroll-header__heading strong { color: inherit; font-size: 15px; font-weight: var(--weight-semibold); line-height: 1.05; transform: translateY(var(--app-header-offset)); transition: transform 160ms ease-out; }
.app-scroll-header.has-subtitle .app-scroll-header__heading strong { font-size: 14px; }
.app-scroll-header__heading small { margin-top: 2px; color: inherit; opacity: .76; font-size: 10px; font-weight: var(--weight-medium); line-height: 1.05; }
.app-scroll-header__leading-action { position: absolute; bottom: 6px; left: 8px; display: flex; max-width: 118px; height: 32px; padding: 0 9px; align-items: center; gap: 5px; overflow: hidden; border: 1px solid rgb(255 255 255 / 26%); border-radius: 5px; font-size: 12px; font-weight: 680; line-height: 1; pointer-events: auto; transition: opacity 100ms ease-out, transform 100ms ease-out, background var(--motion-fast) var(--ease-out); white-space: nowrap; }
.app-scroll-header__leading-action .icon { width: 16px; height: 16px; flex: 0 0 auto; }
.app-scroll-header__leading-action span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-scroll-header__leading-action.is-idle { color: #171a1f; border-color: rgb(253 214 4 / 72%); background: var(--brand-accent); box-shadow: 0 2px 7px rgb(4 34 65 / 16%); }
.app-scroll-header__leading-action.is-active { color: #fff; background: rgb(4 35 71 / 58%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%); }
.app-scroll-header__home-actions { position: absolute; bottom: 0; left: 8px; display: flex; max-width: calc(100% - 16px); height: var(--topbar-h); align-items: center; gap: 0; color: #171a1f; pointer-events: auto; }
.app-scroll-header__home-actions.is-scrolled { color: #fff; }
.app-scroll-header__home-actions .header-ball-chip { position: static; display: flex; box-sizing: border-box; height: 44px; min-height: 44px; margin: 0; padding: 0; align-items: center; gap: 7px; overflow: hidden; color: inherit; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 12.5px; font-weight: 680; line-height: 1; pointer-events: auto; transition: opacity 100ms ease-out, transform 100ms ease-out; white-space: nowrap; }
.app-scroll-header__home-actions .header-ball-chip::after { display: none; }
.app-scroll-header__home-actions .header-ball-chip:active:not(:disabled) { opacity: .72; transform: translateY(1px); }
.app-scroll-header__home-actions .header-ball-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.app-scroll-header__home-actions .header-ball-chip:disabled { opacity: .42; pointer-events: none; }
.app-scroll-header__city-action { width: max-content; min-width: 0; max-width: 110px; flex: 0 0 auto; }
.app-scroll-header__home-actions .app-scroll-header__leading-action { width: 100px; min-width: 100px; max-width: 100px; flex: 0 0 100px; }
.app-scroll-header__action-divider { width: 1px; height: 26px; margin: 0 8px; flex: 0 0 1px; background: rgb(41 73 108 / 24%); transition: background 160ms ease-out; }
.app-scroll-header__home-actions.is-scrolled .app-scroll-header__action-divider { background: rgb(255 255 255 / 42%); }
.header-ball-chip__image, .header-ball-chip__loading { display: grid; width: 30px; min-width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 50%; box-shadow: 0 2px 5px rgb(4 34 65 / 15%); }
.header-ball-chip__label { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-scroll-header__city-action .header-ball-chip__label { max-width: 70px; }
.app-scroll-header__leading-action .header-ball-chip__label { max-width: 63px; }
.header-ball-chip__label--short { display: none; }
.header-ball-chip__loading { background: linear-gradient(145deg, #fff, #e8f2fa); }
.header-ball-chip__loading > span { width: 16px; height: 16px; border: 2px solid rgb(11 61 145 / 22%); border-top-color: #0871c8; border-radius: 50%; animation: header-ball-spin .72s linear infinite; }
@keyframes header-ball-spin { to { transform: rotate(360deg); } }
@media (max-width: 350px) {
  .app-scroll-header__city-action { width: max-content; max-width: 78px; flex-basis: auto; gap: 5px !important; }
  .app-scroll-header__city-action .header-ball-chip__label { max-width: 43px; }
  .app-scroll-header__home-actions .app-scroll-header__leading-action { width: 76px; min-width: 76px; max-width: 76px; flex-basis: 76px; gap: 5px; }
  .header-ball-chip__label--full { display: none; }
  .header-ball-chip__label--short { display: block; }
  .app-scroll-header__action-divider { margin-right: 6px; margin-left: 6px; }
}
@media (prefers-reduced-motion: reduce) { .header-ball-chip__loading > span { animation-duration: 1.4s; } }
.icon-button { display: inline-grid; width: 44px; height: 44px; padding: 0; place-items: center; color: inherit; border: 0; background: transparent; border-radius: var(--radius-control); transition: background var(--motion-fast) var(--ease-out); }
.icon-button:active { background: var(--gray-100); }
.icon-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.icon { width: 24px; height: 24px; }

/* ================= 底部 TabBar(扫码中间凸起黄圆) ================= */
.bottom-tabs.adm-tab-bar { position: fixed; z-index: var(--z-overlay); bottom: 0; left: 50%; width: min(100%, 480px); transform: translateX(-50%); border-top: 1px solid var(--divider); background: rgb(255 255 255 / 94%); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); }
.bottom-tabs .adm-tab-bar-wrap { min-height: var(--tabbar-h); }
.bottom-tabs .adm-tab-bar-item { color: var(--text-tertiary); }
/* 底 Tab 文字固定 12px,不随全局字号收缩 */
.bottom-tabs .adm-tab-bar-item-title { font-size: 12px; font-weight: var(--weight-medium); }
.bottom-tabs .adm-tab-bar-item-active { color: var(--brand-primary); }
.bottom-tabs .adm-tab-bar-item-active .adm-tab-bar-item-title { font-weight: var(--weight-bold); }
.bottom-tabs .adm-tab-bar-item-icon .icon { width: 24px; height: 24px; transition: transform var(--motion-fast) var(--ease-out); }
.bottom-tabs .adm-tab-bar-item-active .adm-tab-bar-item-icon .icon { transform: translateY(-1px) scale(1.06); }
/* 中间「扫码」凸起:活力黄圆 + 深图标 */
.bottom-tabs .bottom-tab-scan .adm-tab-bar-item-icon { position: relative; }
.bottom-tabs .bottom-tab-scan .adm-tab-bar-item-icon .icon { width: 52px; height: 52px; margin-top: -26px; padding: 11px; color: var(--text-on-accent); background: var(--brand-accent); border: 3px solid var(--canvas); border-radius: 50%; box-shadow: var(--shadow-3); }
.bottom-tabs .bottom-tab-scan.adm-tab-bar-item-active { color: var(--text-primary); }
.bottom-tabs .bottom-tab-scan .adm-tab-bar-item-title { font-weight: var(--weight-bold); color: var(--text-primary); }

/* ================= Hero(深蓝页头 + 黄点睛) ================= */
.hero { position: relative; margin: -10px -10px 12px; padding: calc(18px + var(--safe-top)) 14px 16px; color: var(--text-on-dark); overflow: hidden; background: radial-gradient(circle at 90% 6%, rgb(253 214 4 / 22%), transparent 40%), linear-gradient(150deg, var(--brand-deep), var(--brand-primary)); border-radius: 0 0 var(--radius-sheet) var(--radius-sheet); }
.hero::after { position: absolute; right: 18px; bottom: 14px; width: 60px; height: 60px; content: ""; opacity: .5; background: radial-gradient(circle, var(--brand-accent) 0 2.5px, transparent 3px) 0 0 / 14px 14px; }
.hero h1 { max-width: 13em; margin: 6px 0; }
.hero p { max-width: 36em; margin-bottom: 0; color: #d3e4f7; font-size: var(--font-caption); }
.eyebrow { color: var(--brand-accent); font-size: var(--font-label); font-weight: var(--weight-bold); letter-spacing: .14em; text-transform: uppercase; }
.eyebrow--dark { color: var(--brand-primary); }
.page-heading { margin: 2px 0 10px; }
.page-heading h1 { margin-bottom: 6px; }
.page-heading p, .muted { color: var(--text-secondary); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 6px; }
.section-heading h2 { margin: 0; }
.section-heading a { font-size: var(--font-caption); font-weight: var(--weight-semibold); }
.stack { display: grid; gap: 6px; }
/* stack 内卡片间距只由 grid gap 控制;否则与 .card 的 margin-bottom 6px 叠加成 12px */
.stack .card { margin-bottom: 0; }

/* ================= 卡片(1px 描边优先) ================= */
.card { display: block; min-width: 0; margin-bottom: 6px; padding: 10px; color: var(--text-primary); border: 1px solid var(--divider); border-radius: var(--radius-card); background: var(--surface); transition: transform var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out); }
.card h2, .card h3 { margin-bottom: 3px; }
.card-link { position: relative; display: flex; min-height: 72px; align-items: flex-start; flex-wrap: wrap; gap: 8px; padding: 10px 26px 10px 10px; }
.card-link .card__body { flex: 1; min-width: 0; }
/* 球房列表卡(统一 VenueCard):标题/地址 各 1 行省略;meta 行与设施标签行按
   .venue-list 内的等高规则对齐(标题行同 y、底部按内容自然收缩) */
.card-link .card__body h2 { margin-bottom: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-link .card__body p { margin-bottom: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-link .card__body .meta { line-height: 1.5; }
.card-link:active { transform: scale(.98); background: var(--gray-100); }
/* 封面:正方形,角标不再盖在封面上 */
.venue-cover { position: relative; display: block; width: 84px; min-width: 84px; align-self: stretch; }
.card-cover { display: block; width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius-control); }
/* 营业状态角标:贴卡片最右上角(与名称行同水平,不盖封面);弱化小尺寸——营业中浅黄底深字、已打烊浅灰底深灰字 */
.venue-title-row { display: flex; min-width: 0; align-items: center; gap: 6px; }
.venue-title-row h2 { flex: 1; min-width: 0; }
/* 角标 absolute 贴卡右缘时给名称行留白,防长名被角标盖住 */
.venue-title-row:has(.venue-badge) { padding-right: 56px; }
.venue-badge { position: absolute; top: 10px; right: 6px; display: inline-flex; min-height: 16px; padding: 0 5px; align-items: center; border-radius: var(--radius-full); font-size: 10px; font-weight: var(--weight-semibold); line-height: 1; white-space: nowrap; }
.venue-badge--open { color: var(--text-on-accent); background: var(--brand-accent); }
.venue-badge--closed { color: var(--text-secondary); background: var(--gray-200); }
.venue-card-footer { display: flex; min-width: 0; align-items: flex-end; justify-content: space-between; gap: 8px; }
.venue-card-footer .meta { min-width: 0; }
.venue-live-status { display: inline-flex; min-height: 22px; padding: 3px 7px; flex: 0 0 auto; align-items: center; gap: 5px; color: #fff; border-radius: var(--radius-full); background: rgb(217 45 32 / 94%); box-shadow: var(--shadow-1); font-size: 11px; font-weight: var(--weight-bold); line-height: 1; white-space: nowrap; }
.venue-live-status .live-dot { width: 6px; height: 6px; background: #fff; box-shadow: 0 0 0 3px rgb(255 255 255 / 22%); }
.venue-list .card-link { padding-right: 10px; }
/* 设施标签行:独立一行,从卡左缘开始(盖过整行宽度) */
.venue-chips { flex-basis: 100%; margin-top: 0; }
/* 卡片等高(仅 .venue-list 内,球房目录/首页球房/收藏共用):
   标题行与 meta 行保持同一 y;无设施标签的卡不强撑高度,底部自然收缩。 */
.venue-list .card-link .card__body { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-start; gap: 3px; }
.venue-list .card-link .card__body .venue-title-row { margin-top: 1px; }
.venue-list .card-link .chips { min-height: 24px; max-height: 58px; overflow: hidden; margin-top: 0; }
.venue-list .card-link .chips:empty { display: none; }
/* 封面占位(R1):浅灰底 + 居中品牌蓝图标,禁止大面积纯色/渐变块 */
.cover-placeholder { display: inline-grid; place-items: center; color: var(--brand-primary); background: var(--surface-muted); border-radius: var(--radius-control); }
.cover-placeholder svg { width: 28px; height: 28px; opacity: .55; }
.cover-placeholder.card-cover { min-height: 84px; }
.cover-placeholder.album-cover { width: 100%; height: 140px; border-radius: var(--radius-card); }
.cover-placeholder.album-cover svg { width: 36px; height: 36px; }
.meta { display: flex; flex-wrap: wrap; gap: 3px 6px; color: var(--text-tertiary); font-size: var(--font-caption); }
/* 球房目录两行工具栏:搜索与城市一行，区县、特色、排序一行。整体在 Header 下吸顶。 */
.directory-toolbar { position: sticky; z-index: 20; top: calc(var(--topbar-h) + var(--safe-top)); width: calc(100% + 20px); margin: 0 -10px 8px; padding: 7px 10px 8px; border-bottom: 1px solid var(--divider); background: rgb(255 255 255 / 97%); box-shadow: 0 4px 12px rgb(11 31 51 / 7%); }
.search { display: flex; gap: 6px; margin-bottom: 6px; }
.search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; flex: 1; min-width: 0; }
.filter-trigger { display: inline-flex; min-width: 88px; min-height: 44px; padding: 8px 10px; align-items: center; justify-content: center; gap: 4px; color: var(--brand-primary); border: 1px solid var(--brand-primary-border); border-radius: var(--radius-control); background: var(--surface); font-size: var(--font-body); font-weight: var(--weight-medium); }
.filter-trigger .icon { width: 16px; height: 16px; }
.filter-trigger--active { color: var(--text-on-dark); border-color: var(--brand-primary); background: var(--brand-primary); }
.filter-trigger em { min-width: 18px; min-height: 18px; padding: 0 4px; box-sizing: border-box; display: inline-grid; place-items: center; color: var(--text-on-accent); border-radius: var(--radius-full); background: var(--brand-accent); font-size: var(--font-label); font-style: normal; font-weight: var(--weight-bold); line-height: 1; }
.filter-trigger--active em { color: var(--text-on-accent); background: var(--brand-accent); }
/* 已选城市后的第二行:区县、特色和当前排序三个等高选择器。
   区县给稍多宽度，文字 ellipsis 兜底，任何视口宽(320px 起)都不换行、不横滚。
   弹出面板是 absolute,挂在容器上会被 overflow 裁剪,所以容器本身绝不能设 overflow;
   面板左右边界由组件展开时按视口 clamp。弹出面板为白色卡片圆角阴影。 */
.filter-options--inline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; align-items: center; margin: 0; padding: 0; }
.filter-options--inline .filter-select { position: relative; min-width: 0; }
.filter-options--inline .filter-select__trigger { display: grid; width: 100%; min-height: var(--control-sm); padding: 3px 5px; grid-template-columns: 16px minmax(0, 1fr) 16px; align-items: center; color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--surface); font-size: var(--font-label); font-weight: var(--weight-medium); }
.filter-options--inline .filter-select__trigger::before { width: 16px; height: 1px; content: ''; }
.filter-options--inline .filter-select__trigger span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.filter-options--inline .filter-select__trigger .icon { width: 16px; height: 16px; color: var(--text-tertiary); transition: transform var(--motion-fast) var(--ease-standard); }
.filter-options--inline .filter-select__trigger[aria-expanded='true'] .icon { transform: rotate(180deg); }
.filter-options--inline .filter-select__trigger.is-selected { color: var(--brand-primary); border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.filter-options--inline .filter-select__trigger.is-selected .icon { color: var(--brand-primary); }
.filter-select__trigger span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.filter-select__trigger .icon { flex: 0 0 auto; width: 12px; height: 12px; color: var(--text-tertiary); transition: transform var(--motion-fast) var(--ease-standard); }
.filter-select__trigger[aria-expanded='true'] .icon { transform: rotate(180deg); }
.filter-select__trigger.is-selected { color: var(--brand-primary); border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.filter-select__trigger.is-selected .icon { color: var(--brand-primary); }
/* 弹出面板:白色卡片、圆角阴影,绝对定位在触发按钮下方;列表版锚左自适应,特色版居中加宽。
   左右边界由组件展开时按视口 clamp(JS 内联 left),这里 max-width 兜底保证超宽内容也不出屏 */
.filter-popup { position: absolute; z-index: var(--z-dropdown); top: calc(100% + 6px); left: 0; width: max-content; min-width: 100%; max-width: calc(100vw - 12px); max-height: 60vh; overflow-y: auto; padding: 6px; background: var(--surface-raised); border: 1px solid var(--divider); border-radius: var(--radius-card); box-shadow: var(--shadow-2); }
.filter-popup button { display: flex; width: 100%; min-height: 40px; padding: 7px 10px; align-items: center; justify-content: space-between; gap: 6px; color: var(--text-primary); border: 0; background: transparent; font-size: var(--font-body); text-align: left; border-radius: var(--radius-sm); }
.filter-popup button:active { background: var(--gray-100); }
.filter-popup button.is-selected { color: var(--brand-primary); font-weight: var(--weight-semibold); background: var(--brand-primary-soft); }
.filter-popup button small { color: var(--text-tertiary); font-size: 10px; white-space: nowrap; }
.filter-popup--sort { right: 0; left: auto; min-width: 118px; }
/* 特色面板:tag 横排换行,点选高亮,可多选;营业中并入面板第一个(加粗与 tag 区分);底部确定/重置按钮行。
   不再固定 left:50% 居中——窄屏下居中会让右缘出屏,left 由组件按视口 clamp */
.filter-popup--tags { width: min(340px, calc(100vw - 12px)); min-width: 280px; max-width: calc(100vw - 12px); padding: 10px; overflow-x: hidden; }
.filter-popup__header { position: relative; display: flex; min-height: 44px; margin: -4px -4px 8px; padding: 0 44px 0 8px; align-items: center; }
.filter-popup__header strong { font-size: var(--font-body); }
.filter-popup .filter-popup__close { position: absolute; top: 0; right: 0; display: grid; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; place-items: center; color: var(--text-secondary); border-radius: var(--radius-control); }
.filter-popup .filter-popup__close .icon { width: 20px; height: 20px; }
.filter-tags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.filter-tags button { display: grid; width: 100%; min-width: 0; min-height: 34px; padding: 5px 7px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px; color: var(--brand-primary); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface); font-size: 11px; font-weight: var(--weight-medium); }
.filter-tags button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-tags button small { color: var(--text-tertiary); font-size: 9px; white-space: nowrap; }
.filter-tags button.is-selected { color: var(--text-on-dark); border-color: var(--brand-primary); background: var(--brand-primary); }
.filter-tags button.is-selected small { color: inherit; }
.filter-tags .filter-tag--open-now { grid-column: 1 / -1; font-weight: var(--weight-semibold); }
.filter-popup__actions { display: flex; gap: 8px; margin-top: 10px; }
.filter-popup__actions .filter-popup__action { flex: 1 1 auto; min-height: 38px; padding: 6px 12px; justify-content: center; font-size: var(--font-body); }
.filter-popup__actions .filter-popup__action--confirm { color: var(--text-on-dark); border-color: var(--brand-primary); background: var(--brand-primary); font-weight: var(--weight-semibold); }
.filter-popup__actions .filter-popup__action--confirm:active { background: var(--brand-primary-pressed); }
.filter-popup__actions .filter-popup__action--reset { color: var(--brand-primary); border-color: var(--brand-primary); background: var(--surface); }
.filter-popup__actions .filter-popup__action--reset:active { background: var(--brand-primary-soft); }
/* 未选城市引导:先选城市,其余筛选不出现 */
.city-gate { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 10px; padding: 20px 16px; align-items: center; text-align: center; border: 1px dashed var(--brand-primary-border); border-radius: var(--radius-card); background: var(--surface); }
.city-gate__title { display: inline-flex; align-items: center; gap: 6px; }
.city-gate__title .icon { width: 20px; height: 20px; color: var(--brand-primary); }
.city-gate__title h2 { margin: 0; font-size: var(--font-title); }
.city-gate p { margin: 0; }
.city-gate__cta { display: inline-flex; min-height: 40px; padding: 6px 24px; align-items: center; justify-content: center; color: var(--text-on-accent); border-radius: var(--radius-control); background: var(--brand-accent); font-weight: var(--weight-semibold); }
.city-gate__actions { display: flex; gap: 10px; align-items: center; }
/* 独立城市选择页:当前城市置顶 → 热门城市 → 按拼音排省份,省→市两级 */
.city-page { display: flex; flex-direction: column; gap: 18px; }
.city-page__head { display: flex; align-items: baseline; gap: 8px; }
.city-page__head h2 { margin: 0; font-size: var(--font-title); }
.city-page__head span { color: var(--text-tertiary); font-size: var(--font-label); }
.city-group h2 { margin: 0 0 8px; color: var(--text-secondary); font-size: var(--font-label); font-weight: var(--weight-semibold); }
.city-current, .city-page__list button, .city-provinces button { display: flex; width: 100%; min-height: 48px; padding: 8px 10px; align-items: center; gap: 6px; color: var(--text-primary); border: 1px solid var(--divider); border-radius: var(--radius-control); background: var(--surface); font-size: var(--font-body); }
.city-current { color: var(--text-on-dark); border-color: var(--brand-primary); background: var(--brand-primary); }
.city-current small { color: rgb(255 255 255 / 82%); }
.city-current .icon { margin-left: auto; }
.city-hot { display: flex; flex-wrap: wrap; gap: 8px; }
.city-hot button { display: flex; min-height: 36px; padding: 6px 12px; align-items: center; gap: 6px; color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--surface); font-size: var(--font-body); }
.city-hot button small { color: var(--text-tertiary); font-size: var(--font-label); white-space: nowrap; }
.city-page__list { display: flex; flex-direction: column; gap: 8px; }
.city-page__list small, .city-provinces small { color: var(--text-tertiary); font-size: var(--font-label); white-space: nowrap; }
.city-page__list .icon, .city-provinces .icon { margin-left: auto; color: var(--gray-400); }
.city-provinces { display: flex; flex-direction: column; gap: 8px; }

/* ================= 表单控件 ================= */
input, select, textarea { width: 100%; min-height: 44px; padding: 8px 10px; color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--surface); font-size: var(--font-body); transition: border-color var(--motion-fast), box-shadow var(--motion-fast); }
textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--text-tertiary); }
input:focus, select:focus, textarea:focus { border-color: var(--brand-primary); outline: 3px solid rgb(31 166 245 / 28%); outline-offset: 0; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ================= 按钮 ================= */
.button { display: inline-flex; min-width: var(--control-lg); min-height: var(--control-lg); padding: 8px 16px; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: var(--radius-control); font-size: var(--font-body); font-weight: var(--weight-medium); text-align: center; transition: transform var(--motion-fast) var(--ease-out), filter var(--motion-fast), background var(--motion-fast); }
.button:active { transform: scale(.98); filter: brightness(.95); }
.button:disabled { cursor: not-allowed; background: var(--gray-100); color: var(--gray-400); border-color: transparent; opacity: 1; transform: none; filter: none; }
.button-error { display: block; width: 100%; margin: 6px 0; color: var(--danger); font-size: var(--font-caption); }
.button--primary { color: var(--text-on-dark); background: var(--brand-primary); box-shadow: 0 4px 12px rgb(0 104 196 / 26%); }
.button--primary:active { background: var(--brand-primary-pressed); }
.button--accent { color: var(--text-on-accent); background: var(--brand-accent); font-weight: var(--weight-semibold); box-shadow: 0 4px 12px rgb(253 214 4 / 34%); }
.button--accent:active { background: var(--brand-accent-pressed); }
.button--secondary { color: var(--brand-primary); border-color: var(--brand-primary); background: var(--surface); }
.button--secondary:active { background: var(--brand-primary-soft); }
.button--quiet { color: var(--brand-primary); background: var(--brand-primary-soft); }
.button--danger { color: var(--danger); border-color: #f0b6b1; background: var(--surface); }
.button--light { color: var(--brand-deep); background: var(--surface); }
.button.compact, .control-sm { min-height: var(--control-sm); padding: 5px 12px; font-size: var(--font-caption); }
.control-md { min-height: var(--control-md); }
.control-lg { min-height: var(--control-lg); }
.full { width: 100%; }
.button-row { display: flex; gap: 8px; margin: 8px 0; }
.button-row > * { flex: 1; }
.button-row.wrap { flex-wrap: wrap; }
.field { display: grid; gap: 5px; margin: 10px 0; font-weight: var(--weight-medium); }
.field small { font-weight: var(--weight-regular); text-align: right; }
.field--surface { margin: 0 0 10px; padding: 10px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--divider); }
fieldset { margin: 12px 0; padding: 0; border: 0; }
legend { margin-bottom: 6px; font-weight: var(--weight-semibold); }
.form-card { padding-bottom: 12px; }
.stepper { display: flex; justify-content: center; gap: 20px; margin-bottom: 16px; }
.stepper span { display: grid; width: 34px; height: 34px; place-items: center; color: var(--text-tertiary); border: 2px solid var(--border-default); border-radius: 50%; font-weight: var(--weight-bold); }
.stepper span.is-active { color: var(--text-on-dark); border-color: var(--brand-primary); background: var(--brand-primary); }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
/* 仪表盘双列网格(约球/我的:大数字 + 标题 + 副标) */
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.dashboard-grid .card { display: flex; min-height: 100px; margin-bottom: 0; flex-direction: column; align-items: flex-start; justify-content: center; }
.dashboard-grid .card .big-number { margin-bottom: 2px; }
.dashboard-grid .card h2 { margin: 0; font-size: var(--font-body); font-weight: var(--weight-semibold); }
.dashboard-grid .card p { margin: 2px 0 0; font-size: var(--font-caption); }
.impact-note { padding: 10px; color: var(--warning-text); border-radius: var(--radius-control); background: var(--warning-soft); }
.file-button { position: relative; overflow: hidden; }
.row { display: flex; align-items: center; gap: 8px; }
.between { justify-content: space-between; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.metrics span { display: flex; flex-direction: column; color: var(--text-secondary); font-size: var(--font-caption); }
.metrics b { color: var(--text-primary); font-size: var(--font-display); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.details { margin: 0; }
.details div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--divider); }
.details div:last-child { border-bottom: 0; }
.details dt { color: var(--text-secondary); }
.details dd { margin: 0; text-align: right; font-weight: var(--weight-medium); }
.details dt:has(.today-badge) { display: inline-flex; align-items: center; gap: 6px; }
.today-badge { display: inline-flex; min-height: 20px; padding: 1px 6px; align-items: center; color: var(--brand-primary); border: 1px solid var(--brand-primary-border); border-radius: var(--radius-full); background: var(--brand-primary-soft); font-size: var(--font-label); font-weight: var(--weight-semibold); line-height: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
/* 设施标签统一占一行的高度,没有设施时不占空间 */
.chips:empty { display: none; }
.chips:not(:empty) { min-height: 24px; align-content: center; }
/* 球房列表卡片:状态标签定宽(「营业时间未知」6 字为最宽),与右侧标题对齐 */
.chips span, .chip { display: inline-flex; min-height: 24px; padding: 2px 7px; align-items: center; color: var(--brand-primary); border-radius: var(--radius-full); background: var(--brand-primary-soft); font-size: var(--font-label); font-weight: var(--weight-semibold); }
.card-link .chip { width: 80px; justify-content: center; }
.chips--buttons button { min-height: 44px; padding: 8px 14px; color: var(--brand-primary); border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--surface); transition: all var(--motion-fast); }
.chips--buttons button.is-selected { color: var(--text-on-dark); border-color: var(--brand-primary); background: var(--brand-primary); }
/* ===== 统一 Select:短选项胶囊单选组 / 多选项底部弹层(替代原生 select) ===== */
.select-capsules { display: flex; flex-wrap: wrap; gap: 6px; }
.select-capsules button { min-height: 40px; padding: 6px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--surface); color: var(--text-secondary); font-size: var(--font-body); transition: all var(--motion-fast); }
.select-capsules button.is-selected { color: var(--text-on-dark); border-color: var(--brand-primary); background: var(--brand-primary); font-weight: var(--weight-semibold); }
.select-capsules button:active { transform: scale(.97); }
/* Picker 触发字段:表单内与原生 select 同尺寸、同视觉,右侧下箭头 */
.select-field { display: flex; width: 100%; min-height: 44px; padding: 8px 10px; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--surface); color: var(--text-primary); font-size: var(--font-body); text-align: left; transition: border-color var(--motion-fast), box-shadow var(--motion-fast); }
.select-field:active { border-color: var(--brand-primary); }
.select-field .icon { width: 16px; height: 16px; color: var(--text-tertiary); }
/* 顶部多图轮播(大众点评式):antd-mobile Swiper,每张约 40% 宽,一屏两张半,弹性横滑;
   无滚动条、无指示点;右下角数量胶囊进相册页 */
.album-swipe { position: relative; margin: 0 0 8px; overflow: hidden; border-radius: var(--radius-card); }
.album-swipe .adm-swiper-track { padding: 0 6px 3px 0; }
/* 间隙放在 img 自身(margin 不占 slide 宽度,避免破坏 Swiper 位移数学),item 不裁剪让圆角在图上 */
.album-swipe .adm-swiper-item { overflow: visible; }
.album-swipe__link { display: block; width: calc(100% - 6px); margin-right: 6px; border-radius: var(--radius-card); }
.album-swipe__item { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-card); }
.album-swipe__video { display: block; width: calc(100% - 6px); margin-right: 6px; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-card); }
.album-swipe__count { position: absolute; right: 16px; bottom: 12px; display: inline-flex; align-items: center; gap: 1px; min-height: 28px; padding: 0 10px; border-radius: var(--radius-full); color: #fff; background: rgb(0 0 0 / 55%); font-size: var(--font-label); font-weight: var(--weight-semibold); }
.album-swipe__count .icon { width: 12px; height: 12px; }
/* 横向分类 Tab:保留原生横向滑动,隐藏滚动条(scrollbar-width/::-webkit-scrollbar 双保险) */
.album-tabs { display: flex; gap: 8px; margin: 2px 0 12px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.album-tabs::-webkit-scrollbar { display: none; }
.album-tabs button { display: inline-flex; flex: 0 0 auto; align-items: baseline; gap: 4px; min-height: 32px; padding: 4px 12px; border-radius: var(--radius-full); color: var(--text-secondary); background: var(--surface); border: 1px solid var(--divider); font-size: var(--font-body); }
.album-tabs button.is-active { color: var(--text-on-dark); background: var(--brand-primary); border-color: var(--brand-primary); font-weight: var(--weight-semibold); }
.album-tabs small { font-size: var(--font-label); opacity: .75; }
/* 相册页纵向分区(大众点评式):分区标题+数量,下方两列网格 */
.album-sections { display: flex; flex-direction: column; gap: 18px; }
.album-section__head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.album-section__head h2 { margin: 0; font-size: var(--font-title); }
.album-section__head span { color: var(--text-secondary); font-size: var(--font-label); }
.album-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.album-grid__item { position: relative; min-width: 0; min-height: 44px; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius-sm); background: transparent; }
.album-grid__item img, .album-grid__item video, .album-grid > video.album-grid__item { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); }
.album-grid__more { position: absolute; right: 6px; bottom: 6px; display: inline-flex; min-width: 32px; min-height: 24px; padding: 2px 7px; align-items: center; justify-content: center; color: #fff; border-radius: var(--radius-full); background: rgb(0 0 0 / 62%); font-size: var(--font-caption); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.image-button { padding: 0; border: 0; background: transparent; }
.text-button { min-height: 36px; padding: 2px 0; border: 0; color: var(--brand-primary); background: transparent; font-size: var(--font-body); font-weight: var(--weight-semibold); }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; }
.review-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); }
.merchant-reply { padding: 10px; border-radius: var(--radius-control); background: var(--canvas); }

/* ================= 吸底主 CTA ================= */
.sticky-actions { position: sticky; z-index: var(--z-sticky); bottom: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px -10px -10px; padding: 8px 10px calc(8px + var(--safe-bottom)); border-top: 1px solid var(--divider); background: rgb(255 255 255 / 96%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.sticky-actions.single { grid-template-columns: 1fr; }
.sticky-actions--fixed { position: fixed; z-index: var(--z-overlay); right: auto; bottom: 0; left: 50%; width: min(100%, 480px); margin: 0; padding: 8px calc(10px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(10px + var(--safe-left)); transform: translateX(-50%); }
.fixed-actions-spacer { height: calc(61px + var(--safe-bottom)); }

/* ================= PageState / 骨架屏 / 空态 ================= */
.page-state { display: grid; min-height: 168px; padding: 20px 16px; place-items: center; align-content: center; text-align: center; }
.page-state h1 { margin: 14px 0 4px; font-size: var(--font-title); }
.page-state p { max-width: 30em; color: var(--text-secondary); }
.page-state .button { margin-top: 14px; }
.page-state--loading { gap: 12px; min-height: 190px; }
.page-loader { position: relative; display: grid; width: 48px; height: 48px; place-items: center; }
.page-loader__ring { position: absolute; inset: 0; border: 3px solid var(--brand-primary-soft); border-top-color: var(--brand-primary); border-radius: 50%; animation: page-loader-spin .9s cubic-bezier(.4, 0, .2, 1) infinite; }
.page-loader__ball { width: 16px; height: 16px; border: 3px solid var(--brand-deep); border-radius: 50%; background: var(--surface); box-shadow: inset -3px -2px 0 var(--brand-primary-soft); }
.page-loader__label { color: var(--text-secondary); font-size: var(--font-caption); font-weight: var(--weight-medium); }
@keyframes page-loader-spin { to { transform: rotate(360deg); } }
.spinner { width: 28px; height: 28px; border: 3px solid var(--gray-300); border-top-color: var(--brand-primary); border-radius: 50%; animation: spin .8s linear infinite; }
.spinner--small { width: 18px; height: 18px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { display: grid; gap: 6px; }
.skeleton-card { padding: 10px; border: 1px solid var(--divider); border-radius: var(--radius-card); background: var(--surface); }

/* 五个主 Tab 的结构化首屏骨架：占位尺寸跟随真实卡片，而不是通用段落块。 */
.primary-tab-skeleton { display: grid; width: 100%; gap: 7px; padding: 2px 0 14px; }
.tab-sk { position: relative; display: block; overflow: hidden; border-radius: 4px; background: #dfe8f1; }
.tab-sk::after { position: absolute; inset: 0; content: ''; background: linear-gradient(100deg, transparent 15%, rgb(255 255 255 / 72%) 42%, transparent 70%); transform: translateX(-100%); animation: primary-tab-shimmer 1.35s ease-in-out infinite; }
@keyframes primary-tab-shimmer { to { transform: translateX(100%); } }
.tab-sk-grow { display: grid; min-width: 0; flex: 1; align-content: center; gap: 7px; }
.tab-sk-line { height: 10px; }
.tab-sk-line.is-strong { height: 15px; }
.tab-sk-dot { width: 14px; height: 14px; border-radius: 50%; }
.tab-sk-ball { width: 35px; height: 35px; flex: 0 0 35px; border-radius: 50%; }
.tab-sk-scan { display: flex; min-height: 56px; padding: 10px 12px; align-items: center; gap: 9px; border-radius: var(--radius-card); background: #fff; }
.tab-sk-toolbar { display: grid; padding: 8px; gap: 6px; border: 1px solid var(--divider); border-radius: var(--radius-control); background: #fff; }
.tab-sk-search { height: 36px; }
.tab-sk-button { height: 30px; }
.tab-sk-columns { display: grid; gap: 5px; }
.tab-sk-columns.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tab-sk-columns.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tab-sk-columns.is-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tab-sk-list { display: grid; gap: 7px; }
.tab-sk-venue, .tab-sk-challenge { display: flex; padding: 9px; gap: 9px; border: 1px solid var(--divider); border-radius: var(--radius-card); background: #fff; }
.tab-sk-venue { min-height: 99px; }
.tab-sk-cover { width: 110px; height: 81px; flex: 0 0 110px; }
.tab-sk-chips { display: flex; gap: 5px; }
.tab-sk-chips i, .tab-sk-chip { width: 46px; height: 16px; border-radius: 999px; }
.tab-sk-challenge { min-height: 94px; }
.tab-sk-challenge-cover { width: 84px; height: 84px; flex: 0 0 84px; }
.tab-sk-between { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tab-sk-between.is-bottom { margin-top: auto; }
.tab-sk-avatars { display: flex; }
.tab-sk-avatar { width: 25px; height: 25px; border-radius: 50%; }
.tab-sk-avatars .tab-sk-avatar + .tab-sk-avatar { margin-left: -6px; }
.tab-sk-message { display: flex; min-height: 66px; padding: 10px 12px; align-items: center; gap: 9px; border-bottom: 1px solid var(--divider); background: #fff; }
.tab-sk-message.is-friends { margin-bottom: 9px; border-radius: var(--radius-card); border-bottom: 0; }
.tab-sk-message-icon { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; }
.tab-sk-side { display: grid; width: 50px; justify-items: end; gap: 8px; }
.tab-sk-message-list, .tab-sk-rank-list { overflow: hidden; border-radius: var(--radius-card); }
.tab-sk-tab { height: 38px; border-radius: 0; }
.tab-sk-columns.is-modes { padding: 6px; border-radius: var(--radius-control); background: #fff; }
.tab-sk-rank-hero { position: relative; display: grid; min-height: 115px; padding: 12px; grid-template-columns: minmax(0, 1fr) 54px; gap: 9px; overflow: hidden; border-radius: var(--radius-card); background: #c8dbeb; }
.tab-sk-rank-number { width: 90px; height: 29px; margin-top: 10px; }
.tab-sk-shield { width: 46px; height: 52px; justify-self: end; }
.tab-sk-metrics { position: absolute; right: 12px; bottom: 11px; left: 12px; }
.tab-sk-metric { height: 22px; }
.tab-sk-rank-row { display: flex; min-height: 63px; padding: 9px; align-items: center; gap: 7px; border-bottom: 1px solid var(--divider); background: #fff; }
.tab-sk-position { width: 24px; height: 19px; }
.tab-sk-mini-shield { width: 26px; height: 30px; }
.primary-tab-skeleton--profile { min-height: 100dvh; padding: 0 0 20px; background: var(--canvas); }
.tab-sk-profile-cover { position: relative; height: 160px; background: #b7cada; }
.tab-sk-profile-identity { position: absolute; right: 12px; bottom: 6px; left: 12px; display: flex; align-items: flex-end; gap: 8px; }
.tab-sk-profile-avatar { width: 64px; height: 64px; flex: 0 0 64px; border: 3px solid rgb(255 255 255 / 72%); border-radius: 50%; }
.tab-sk-profile-name { width: 58%; height: 19px; }
.tab-sk-columns.is-profile-tabs { background: #fff; }
.primary-tab-skeleton--profile > :not(.tab-sk-profile-cover):not(.is-profile-tabs) { margin-inline: 10px; }
.tab-sk-ability { position: relative; display: grid; min-height: 110px; padding: 11px; grid-template-columns: 58px minmax(0, 1fr); gap: 9px; border-radius: var(--radius-card); background: #c9dbea; }
.tab-sk-shield.is-large { width: 54px; height: 62px; justify-self: start; }
.tab-sk-chart { display: grid; min-height: 140px; padding: 12px; grid-template-columns: 115px minmax(0, 1fr); align-items: center; gap: 12px; border-radius: var(--radius-card); background: #fff; }
.tab-sk-donut { width: 107px; height: 107px; border: 18px solid #dce7f0; border-radius: 50%; background: transparent; }
.tab-sk-chart-line { width: 100%; height: 17px; }
.global-pull-indicator { display: inline-flex; min-height: 25px; padding: 4px 9px; align-items: center; gap: 5px; color: var(--brand-primary); border: 1px solid rgb(112 151 186 / 25%); border-radius: 999px; background: rgb(255 255 255 / 94%); box-shadow: 0 4px 12px rgb(6 50 91 / 14%); font-size: 10px; font-weight: 600; line-height: 1; white-space: nowrap; }
.global-pull-indicator > i { width: 14px; height: 14px; border: 2px solid currentcolor; border-right-color: transparent; border-radius: 50%; animation: global-pull-spin .8s linear infinite; }
.global-pull-indicator.is-ready { color: #9a7b00; }
.global-pull-indicator--cover { color: rgb(255 255 255 / 88%); border-color: rgb(255 255 255 / 12%); background: rgb(3 26 54 / 40%); box-shadow: 0 4px 12px rgb(1 20 42 / 20%); }
.global-pull-indicator--cover.is-ready { color: var(--brand-accent); }
@keyframes global-pull-spin { to { transform: rotate(360deg); } }
.empty-illo { display: grid; width: 84px; height: 84px; margin: 0 auto 2px; place-items: center; color: var(--brand-primary); border-radius: 50%; background: radial-gradient(circle at 32% 28%, var(--brand-primary-soft), var(--surface-muted)); }
.empty-illo svg { width: 44px; height: 44px; }
.list-footer { padding: 10px 10px; color: var(--text-tertiary); font-size: var(--font-caption); text-align: center; }
.list-loading { display: inline-flex; align-items: center; gap: 8px; color: var(--text-tertiary); }
.adm-infinite-scroll { padding: 8px; color: var(--text-tertiary); font-size: var(--font-caption); text-align: center; }
.inline-problem, .inline-note, .success-panel { margin: 10px 0; padding: 10px 12px; border-radius: var(--radius-control); font-size: var(--font-caption); }
.inline-problem { color: var(--danger-text); border: 1px solid #f3c2c0; background: var(--danger-soft); }
.inline-note { color: var(--brand-deep); background: var(--brand-primary-soft); }
.success-panel { color: var(--success-text); border: 1px solid #a7dcc8; background: var(--success-soft); }

/* ================= 关键数字 ================= */
.big-number { display: block; color: var(--brand-primary); font-size: var(--font-score); font-weight: var(--weight-bold); line-height: 1.05; font-variant-numeric: tabular-nums; }
.avatar, .user-avatar { position: relative; display: inline-grid; width: 44px; min-width: 44px; height: 44px; overflow: hidden; place-items: center; color: var(--avatar-foreground, var(--brand-deep)); border-radius: 50%; background: var(--avatar-background, var(--surface-muted)); font-size: 1.1rem; font-weight: var(--weight-semibold); line-height: 1; }
.user-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar--large { width: 72px; min-width: 72px; height: 72px; font-size: 1.8rem; }
.profile-row { display: flex; align-items: center; gap: 10px; }
.primary-control-tabs { display: flex; gap: 4px; min-width: 0; margin: 0 0 10px; padding: 0; border: 0; background: transparent; }
/* 一级签沿用首页排序按钮语言：独立细描边方角按钮，选中态为品牌蓝实底。 */
.primary-control-tabs > button, .primary-control-tabs > a { display: inline-flex; min-width: 0; min-height: 44px; flex: 1 1 0; padding: 7px 6px; align-items: center; justify-content: center; color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--surface); font-size: var(--font-label); font-weight: var(--weight-medium); line-height: 1.2; text-align: center; white-space: nowrap; transition: color var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast); }
.primary-control-tabs > .is-active { color: var(--text-on-dark); border-color: var(--brand-primary); background: var(--brand-primary); font-weight: var(--weight-semibold); }
/* 二级签保持首页下拉筛选的浅蓝选中层级，避免和一级实底签争夺注意力。 */
.secondary-control-tabs { display: flex; gap: 4px; min-width: 0; margin: 4px 0 8px; padding: 0; background: transparent; }
.secondary-control-tabs button { display: inline-flex; min-width: 0; min-height: 44px; flex: 1 1 0; padding: 5px 9px; align-items: center; justify-content: center; color: var(--text-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--surface); font-size: var(--font-label); font-weight: var(--weight-medium); white-space: nowrap; }
.secondary-control-tabs button.is-active { color: var(--brand-primary); border-color: var(--brand-primary); background: var(--brand-primary-soft); font-weight: var(--weight-semibold); }
.secondary-control-tabs.scrollable { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.secondary-control-tabs.scrollable::-webkit-scrollbar { display: none; }
.page-nav-tabs { position: sticky; z-index: var(--z-sticky); top: calc(var(--topbar-h) + var(--safe-top)); display: flex; width: calc(100% + 20px); height: 42px; margin: -2px -10px 10px; align-items: stretch; border-bottom: 1px solid var(--divider); background: rgb(255 255 255 / 97%); backdrop-filter: blur(14px); }
.page-nav-tabs > button { position: relative; min-width: 0; min-height: 42px; padding: 0 4px; flex: 1 1 0; color: var(--text-tertiary); border: 0; border-radius: 0; background: transparent; font-size: 12px; font-weight: var(--weight-medium); white-space: nowrap; }
.page-nav-tabs > button::after { position: absolute; right: 32%; bottom: 0; left: 32%; height: 2px; content: ''; opacity: 0; background: var(--brand-primary); transform: scaleX(.45); transition: opacity var(--motion-fast), transform var(--motion-fast); }
.page-nav-tabs > button.is-active { color: var(--text-primary); font-weight: var(--weight-semibold); }
.page-nav-tabs > button.is-active::after { opacity: 1; transform: scaleX(1); }
.page-inline-tabs { display: flex; width: calc(100% + 20px); height: 38px; margin: 4px -10px 8px; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); background: var(--surface); }
.page-inline-tabs > button { position: relative; min-width: 0; min-height: 38px; padding: 0 6px; flex: 1; color: var(--text-tertiary); border: 0; border-radius: 0; background: transparent; font-size: 11px; }
.page-inline-tabs > button.is-active { color: var(--brand-primary); font-weight: var(--weight-semibold); }
.page-inline-tabs > button.is-active::after { position: absolute; right: 36%; bottom: 0; left: 36%; height: 2px; content: ''; background: var(--brand-primary); }
.segmented { display: flex; gap: 3px; margin: 4px 0 8px; padding: 3px; border-radius: var(--radius-control); background: var(--gray-100); }
.segmented button { min-width: 80px; min-height: 40px; flex: 1; padding: 7px 12px; color: var(--text-secondary); border: 0; border-radius: var(--radius-sm); background: transparent; font-weight: var(--weight-medium); white-space: nowrap; transition: all var(--motion-fast); }
.segmented button.is-active { color: var(--text-primary); background: var(--surface); box-shadow: var(--shadow-1); font-weight: var(--weight-semibold); }
.segmented.scrollable { overflow-x: auto; padding-right: 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.segmented.scrollable::-webkit-scrollbar { display: none; }
.segmented--sticky { position: sticky; z-index: var(--z-sticky); top: calc(var(--topbar-h) + var(--safe-top)); }
.friends-primary-tabs, .records-primary-tabs { margin-bottom: 10px; }
.friends-overview { display: flex; min-height: 56px; margin-bottom: 8px; padding: 9px 11px; align-items: center; justify-content: space-between; border: 1px solid #d8e6f4; border-radius: 6px; background: rgb(255 255 255 / 88%); }
.friends-overview > span { display: grid; gap: 2px; }
.friends-overview small { color: var(--text-tertiary); font-size: 10px; }
.friends-overview strong { font-size: 15px; }
.friends-overview .icon { color: var(--brand-primary); }
.friends-list { overflow: hidden; border: 1px solid var(--divider); border-radius: 6px; background: var(--surface); }
.friend-list-row { display: flex; min-height: 62px; padding: 9px 10px; align-items: center; gap: 9px; color: inherit; border-bottom: 1px solid var(--divider); text-decoration: none; }
.friend-list-row:last-child { border-bottom: 0; }
.friend-list-row__body { display: grid; min-width: 0; flex: 1; gap: 3px; }
.friend-list-row__body strong, .friend-list-row__body small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-list-row__body strong { font-size: 14px; }
.friend-list-row__body small { color: var(--text-tertiary); font-size: 10px; }
.friend-list-row > .icon { width: 16px; height: 16px; color: var(--text-tertiary); }
.records-secondary-tabs { margin-top: 6px; }
.records-mode-tabs button { flex: 0 0 auto; min-width: 76px; }
.records-replay-actions { margin: 2px 0 12px; }
.records-hub, .records-hub__content, .records-hub__panel { min-width: 0; }
/* 顶级战绩页没有顶部 NavBar；一级签必须参加普通文档流，不能以旧 NavBar
   高度为 sticky 偏移悬在概览、下载入口或空态上方。 */
.records-primary-tabs { z-index: var(--z-sticky); }
.records-hub__content { position: relative; z-index: var(--z-base); }
.read-dot { width: 10px; min-width: 10px; height: 10px; border-radius: 50%; background: var(--brand-accent); box-shadow: 0 0 0 1px rgb(0 0 0 / 8%); }
.read-dot.is-read { background: var(--gray-300); box-shadow: none; }
/* 消息 Tab(v2 消息页设计):好友行 + 全宽消息流,无外层卡片 */
.inbox { padding-bottom: 12px; }
.message-list { border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); background: var(--surface); }
.message-row { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 9px 16px; background: var(--surface); }
.message-row + .message-row, .inbox .card-link + .card-link { border-top: 1px solid var(--gray-100); }
.inbox .card-link { min-height: 58px; margin-bottom: 0; padding: 9px 16px; align-items: center; flex-wrap: nowrap; gap: 12px; border: 0; border-radius: 0; }
.message-avatar { display: flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-control); color: #ffffff; font-size: 15px; font-weight: var(--weight-bold); line-height: 1; }
.message-avatar .icon { width: 21px; height: 21px; }
.message-avatar--friends { background: #0f766e; }
.message-avatar--request { background: #2563eb; }
.message-avatar--challenge { background: #f97316; }
.message-avatar--coach { background: #8b5cf6; }
.message-avatar--level { background: #10b981; }
.message-avatar--rank { background: #f59e0b; }
.message-avatar--score { background: #e11d48; }
.message-avatar--system { background: #64748b; }
.message-main { min-width: 0; flex: 1; }
.message-title-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.message-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gray-900); font-size: 15px; font-weight: var(--weight-semibold); line-height: 1.35; }
.message-type { flex: none; color: var(--gray-500); font-size: 12px; line-height: 1.35; }
.message-preview { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gray-500); font-size: 13px; line-height: 1.4; }
.message-preview--notice { color: #be123c; }
.message-side { display: flex; flex: none; align-items: center; gap: 5px; min-width: 48px; justify-content: flex-end; }
.message-side--top { align-self: flex-start; padding-top: 3px; }
.message-side__label, .message-time { color: var(--gray-400); font-size: 12px; line-height: 1.35; }
.message-side > .icon { width: 16px; height: 16px; color: var(--gray-300); }
.message-unread-dot { width: 7px; min-width: 7px; height: 7px; border-radius: 50%; background: #ef4444; }
.notification p { white-space: pre-wrap; }
.lead { font-size: 1.05rem; font-weight: var(--weight-semibold); }
.switch-row { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--divider); cursor: pointer; }
.switch-row:last-child { border-bottom: 0; }
.switch-row > span:first-child { min-width: 0; flex: 1; }
.switch-control { position: relative; display: grid; width: 52px; min-width: 52px; height: 44px; place-items: center; }
.switch-control input[type='checkbox'] { position: absolute; z-index: 1; inset: 0; width: 100%; min-width: 0; height: 100%; min-height: 0; margin: 0; padding: 0; cursor: pointer; appearance: none; color: transparent; border: 0; background: transparent; box-shadow: none; }
.switch-control input[type='checkbox']:focus { border: 0; outline: 0; box-shadow: none; }
.switch-control__track { position: relative; display: block; width: 48px; height: 28px; pointer-events: none; border: 1px solid var(--gray-400); border-radius: var(--radius-full); background: var(--gray-300); transition: border-color var(--motion-fast), background var(--motion-fast); }
.switch-control__thumb { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-1); transition: transform var(--motion-fast) var(--ease-out); }
.switch-control input[type='checkbox']:checked + .switch-control__track { border-color: var(--brand-primary); background: var(--brand-primary); }
.switch-control input[type='checkbox']:checked + .switch-control__track .switch-control__thumb { transform: translateX(20px); }
.switch-control input[type='checkbox']:focus-visible + .switch-control__track { outline: 3px solid var(--focus); outline-offset: 2px; }
.switch-control input[type='checkbox']:disabled { cursor: not-allowed; }
.switch-control input[type='checkbox']:disabled + .switch-control__track { opacity: .5; }
.scanner video { width: 100%; min-height: 220px; margin-bottom: 10px; object-fit: cover; border-radius: var(--radius-card); background: var(--brand-deep); }
.direct-scan-overlay { position: fixed; z-index: 80; inset: 0; display: flex; padding: calc(12px + var(--safe-top)) 16px calc(20px + var(--safe-bottom)); align-items: center; flex-direction: column; color: #FFFFFF; background: rgba(4,23,43,.97); }
.direct-scan-overlay > header { display: grid; width: min(100%, 448px); height: 48px; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; }
.direct-scan-overlay > header::before { content: ''; }
.direct-scan-overlay > header strong { font-size: 16px; text-align: center; }
.direct-scan-overlay > header button { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; color: #FFFFFF; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); }
.direct-scan-viewfinder { position: relative; width: min(82vw, 360px); aspect-ratio: 1; margin: auto 0 18px; overflow: hidden; border-radius: 18px; background: #031729; box-shadow: 0 20px 60px rgba(0,0,0,.36); }
.direct-scan-viewfinder video { width: 100%; height: 100%; object-fit: cover; }
.direct-scan-viewfinder > span { position: absolute; width: 54px; height: 54px; border-color: var(--brand-accent); border-style: solid; pointer-events: none; }
.direct-scan-viewfinder > span:nth-of-type(1) { top: 18px; left: 18px; border-width: 4px 0 0 4px; }
.direct-scan-viewfinder > span:nth-of-type(2) { top: 18px; right: 18px; border-width: 4px 4px 0 0; }
.direct-scan-viewfinder > span:nth-of-type(3) { right: 18px; bottom: 18px; border-width: 0 4px 4px 0; }
.direct-scan-viewfinder > span:nth-of-type(4) { bottom: 18px; left: 18px; border-width: 0 0 4px 4px; }
.direct-scan-overlay > p { margin: 0 0 auto; color: rgba(255,255,255,.72); font-size: 13px; text-align: center; }
.direct-scan-error { display: grid; width: min(100%, 360px); margin-top: 14px; padding: 12px; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; border-radius: 8px; color: #FFFFFF; background: rgba(190,45,45,.78); font-size: 12px; }
.direct-scan-error button { min-height: 36px; padding: 0 10px; color: #172033; border: 0; border-radius: 6px; background: var(--brand-accent); font-weight: 650; }
.connection { display: inline-flex; padding: 4px 10px; color: var(--success-text); border-radius: var(--radius-full); background: var(--success-soft); font-size: var(--font-label); font-weight: var(--weight-semibold); }
.connection.is-offline { color: var(--warning-text); background: var(--warning-soft); }
.metrics-card { display: grid; grid-template-columns: repeat(4, 1fr); margin: 6px 0; padding: 12px 4px; border-radius: var(--radius-card); color: var(--text-on-dark); background: linear-gradient(150deg, var(--brand-deep), var(--brand-primary)); }
.metrics-card span { display: flex; align-items: center; flex-direction: column; color: #cfe0f2; font-size: var(--font-label); }
.metrics-card b { color: var(--brand-accent); font-size: clamp(1.15rem, 5vw, var(--font-display)); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.records-current-rank { display: flex; min-height: 47px; margin: 3px 0 5px; align-items: center; gap: 8px; }
.records-current-rank .big-number { margin: 0; }
.overview-strip { display: flex; gap: 8px; margin: 0 -10px 10px; padding: 0 10px 5px; overflow-x: auto; scroll-snap-type: x proximity; }
.overview-card { display: grid; min-width: 136px; padding: 10px; gap: 2px; text-align: left; color: var(--text-primary); border: 1px solid var(--divider); border-radius: var(--radius-card); background: var(--surface); scroll-snap-align: start; }
.overview-card > span { color: var(--brand-primary); font-size: var(--font-label); font-weight: var(--weight-bold); }
.overview-card > strong { font-size: 1.3rem; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.overview-card progress { width: 100%; height: 8px; margin-top: 6px; accent-color: var(--brand-primary); }
.overview-card.is-selected { border-color: var(--brand-primary); box-shadow: inset 0 0 0 1px var(--brand-primary); }

.personal-rank { position: relative; height: 175px; margin: 8px 0 10px; overflow: hidden; color: #fff; border-radius: var(--radius-card); background: linear-gradient(135deg, #0b3d91, #0068c4 68%, #0c8bd6); box-shadow: 0 8px 21px rgb(12 66 121 / 18%); isolation: isolate; }
.personal-rank::after { position: absolute; z-index: 1; inset: 0; content: ''; background: linear-gradient(90deg, rgb(11 61 145 / 62%), rgb(0 104 196 / 10%) 64%), linear-gradient(180deg, rgb(11 61 145 / 4%), transparent 42%, rgb(11 61 145 / 20%)); pointer-events: none; }
.personal-rank__background { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; opacity: .64; object-fit: cover; }
.personal-rank__context { position: absolute; z-index: 4; top: 12px; right: 88px; left: 16px; display: grid; min-width: 0; }
.personal-rank__context small { color: rgb(255 255 255 / 74%); font-size: 9px; font-weight: 560; letter-spacing: .08em; }
.personal-rank__context strong { margin-top: 4px; overflow: hidden; color: #fff; font-size: 11px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.personal-rank__emblem { position: absolute; z-index: 5; top: 8px; right: 8px; }
.personal-rank__rank-zone { position: absolute; z-index: 4; top: 60px; left: 10px; width: 163px; height: 46px; }
.personal-rank__rank-shell { position: absolute; inset: 0; overflow: hidden; border-radius: 4px 17px 17px 4px; background: linear-gradient(105deg, #0b3d91, #0068c4 52%, #0c8bd6); box-shadow: inset 0 1px 0 rgb(255 255 255 / 65%), inset 0 -2px 0 rgb(11 61 145 / 70%); transform: skewX(-8deg); }
.personal-rank__rank-shell::after { position: absolute; inset: 3px; content: ''; border: 1px solid rgb(129 211 255 / 55%); border-radius: 3px 14px 14px 3px; }
.personal-rank__rank-label { position: absolute; z-index: 2; inset: 4px 21px 4px 14px; display: flex; align-items: center; color: #fff; font-size: 15px; font-weight: 850; gap: 2px; line-height: 1; text-shadow: 0 2px 3px rgb(11 61 145 / 28%); white-space: nowrap; }
.personal-rank__rank-label img { display: block; width: 27px; height: 35px; flex: 0 0 27px; object-fit: contain; }
.personal-rank__stats-zone { position: absolute; z-index: 5; right: 8px; bottom: 7px; left: 8px; height: 44px; }
.personal-rank__stats-shell { position: absolute; top: 2px; right: 10px; bottom: 2px; left: 10px; border: 1px solid rgb(0 104 196 / 28%); border-radius: 20px 6px 20px 6px; background: linear-gradient(180deg, #fff, #e5f0fc); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 72%); transform: skewX(-5deg); }
.personal-rank__metrics { position: absolute; z-index: 2; inset: 2px 33px 4px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.personal-rank__metrics > span { position: relative; display: flex; min-width: 0; align-items: center; flex-direction: column; justify-content: center; gap: 1px; }
.personal-rank__metrics > span + span::before { position: absolute; top: 8px; bottom: 8px; left: 0; width: 1px; content: ''; background: rgb(0 104 196 / 32%); }
.personal-rank__metrics b { max-width: 100%; overflow: hidden; color: #0b3d91; font-size: 12px; font-weight: 850; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; }
.personal-rank__metrics small { color: #54606c; font-size: 8px; font-weight: 650; line-height: 10px; }

/* ================= 排行榜(紧凑行 + 前三金银铜) ================= */
.ranking-list, .level-list { margin: 6px 0; padding: 0; list-style: none; }
.ranking-list li, .level-list li { display: grid; grid-template-columns: 40px 1fr auto; min-height: 48px; padding: 5px 10px; align-items: center; gap: 8px; border-bottom: 1px solid var(--divider); background: var(--surface); }
.ranking-list li { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.ranking-row-profile { display: grid; min-width: 0; min-height: 44px; grid-template-columns: 34px 36px 29px minmax(0, 1fr); align-items: center; gap: 6px; color: var(--text-primary); }
.ranking-row-profile[href]:active { opacity: .62; }
.ranking-avatar { width: 32px; min-width: 32px; height: 32px; font-size: var(--font-caption); }
.ranking-list li:first-child { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.ranking-list li:last-child { border-radius: 0 0 var(--radius-card) var(--radius-card); border-bottom: 0; }
.ranking-row-profile > b { font-size: var(--font-display); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; color: var(--text-secondary); text-align: center; }
.ranking-list > li:nth-child(1) .ranking-row-profile > b, .ranking-list > li:nth-child(2) .ranking-row-profile > b, .ranking-list > li:nth-child(3) .ranking-row-profile > b { display: grid; width: 32px; height: 32px; margin: 0 auto; place-items: center; border-radius: 50%; font-size: var(--font-body); }
.ranking-list > li:nth-child(1) .ranking-row-profile > b { color: var(--text-on-accent); background: var(--brand-accent); box-shadow: 0 3px 8px rgb(253 214 4 / 45%); }
.ranking-list > li:nth-child(2) .ranking-row-profile > b { color: #fff; background: linear-gradient(145deg, #c8ccd4, var(--gray-400)); }
.ranking-list > li:nth-child(3) .ranking-row-profile > b { color: #fff; background: linear-gradient(145deg, #cd8a52, #b0713e); }
.ranking-list li.is-me { background: var(--brand-primary-soft); }
.ranking-list li.is-me .ranking-row-profile > b { color: var(--brand-primary); }
.ranking-list small { display: block; }
.ranking-list > li > span:last-child { font-weight: var(--weight-bold); color: var(--brand-primary); font-variant-numeric: tabular-nums; }
.ranking-list > li > span.ranking-action { display: flex; width: 44px; align-items: center; justify-content: flex-end; }
.ranking-friend-trigger { display: flex; width: 44px; min-height: 44px; padding: 1px 0; align-items: center; flex-direction: column; justify-content: center; gap: 0; color: var(--brand-primary); border: 0; border-radius: 4px; background: transparent; }
.ranking-friend-trigger .icon { width: 17px; height: 17px; }
.ranking-friend-trigger small { color: inherit; font-size: 8px; font-weight: 500; line-height: 1; white-space: nowrap; }
.ranking-controls { margin: 0 0 8px; padding: 8px; border: 1px solid var(--divider); border-radius: var(--radius-card); background: var(--surface); }
.ranking-scope-tabs { display: grid; grid-template-columns: repeat(var(--ranking-scope-count, 4), minmax(0, 1fr)); }
.ranking-scope-tabs--1 { --ranking-scope-count: 1; }
.ranking-scope-tabs--2 { --ranking-scope-count: 2; }
.ranking-scope-tabs--3 { --ranking-scope-count: 3; }
.ranking-scope-tabs--4 { --ranking-scope-count: 4; }
.ranking-scope-tabs button { box-sizing: border-box; width: 100%; min-width: 0; min-height: 42px; padding: 0 3px; overflow: hidden; color: var(--text-secondary); background: transparent; font-size: 12px; font-weight: var(--weight-semibold); line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.ranking-scope-tabs button.is-active { color: var(--text-primary); background: transparent; box-shadow: none; }
.ranking-location-card { display: flex; min-height: 58px; margin: 8px 0 0; padding: 8px; align-items: center; gap: 8px; border: 0; border-radius: var(--radius-control); background: var(--gray-100); }
.ranking-location-card__icon { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; color: var(--brand-primary); border-radius: 50%; background: #d9ebfc; }
.ranking-location-card__icon .icon { width: 21px; height: 21px; }
.ranking-location-card__body { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.ranking-location-card__body strong { color: var(--brand-deep); font-size: var(--font-body); }
.ranking-location-card__body small { margin-top: 2px; color: var(--text-secondary); }
.ranking-location-card button { min-width: 92px; min-height: 44px; padding: 6px 8px; border: 1px solid var(--brand-primary-border); border-radius: var(--radius-control); color: var(--brand-primary); background: var(--surface); font-weight: var(--weight-semibold); }
.ranking-mode-section { margin-top: 7px; }
.ranking-mode-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
.ranking-mode-tabs button { min-width: 0; min-height: var(--control-sm); padding: 1px; border: 1px solid var(--divider-strong); border-radius: calc(var(--radius-control) - 1px); color: var(--text-secondary); background: var(--surface); font-size: 11px; font-weight: var(--weight-semibold); line-height: 1; white-space: nowrap; }
.ranking-mode-tabs button.is-active { color: var(--text-on-dark); border-color: var(--brand-primary); background: var(--brand-primary); box-shadow: var(--shadow-1); }
.ranking-footnote { text-align: center; }
.ranking-friend-dialog > p { margin: 0 0 12px; color: var(--text-secondary); }
.ranking-friend-dialog .field { margin-top: 0; }
.ranking-friend-dialog textarea { min-height: 92px; resize: vertical; }
.ranking-friend-dialog__count { display: block; margin-top: 5px; color: var(--text-tertiary); text-align: right; font-variant-numeric: tabular-nums; }
.ranking-friend-dialog .button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.ranking-friend-dialog .button-row .button { width: 100%; min-width: 0; margin: 0; }
.frequent-venue-help h1 { margin: 4px 0; font-size: var(--font-title); }
.frequent-venue-row { display: flex; align-items: center; gap: 10px; }
.frequent-venue-row.is-effective { border-color: var(--brand-primary-border); box-shadow: inset 3px 0 0 var(--brand-primary); }
.frequent-venue-row__body { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; color: inherit; text-decoration: none; }
.frequent-venue-row__body > span { display: flex; min-width: 0; align-items: center; gap: 6px; }
.frequent-venue-row__body strong { overflow-wrap: anywhere; }
.frequent-venue-row__body em { padding: 2px 6px; flex: 0 0 auto; border-radius: var(--radius-full); color: var(--brand-primary); background: var(--brand-primary-soft); font-size: var(--font-label); font-style: normal; }
.frequent-venue-row__body small { color: var(--text-secondary); }
.level-hero { text-align: center; }
.level-hero__badge { display: flex; margin: 6px auto 2px; }
.level-hero b { display: block; margin: 6px; color: var(--brand-primary); font-size: var(--font-score); font-weight: var(--weight-bold); }
.level-list li { grid-template-columns: 29px 52px minmax(0, 1fr) auto; }
.level-list li.is-current { border-radius: var(--radius-control); background: var(--brand-accent-soft); box-shadow: inset 4px 0 var(--brand-accent); padding-inline: 10px; }
.level-list li em { color: var(--brand-primary); font-style: normal; font-weight: var(--weight-bold); }
.page, .card, .page-state, .top-bar, p, h1, h2, h3, dd, dt, small, strong, a, button { overflow-wrap: anywhere; }
.session-row { display: flex; width: 100%; align-items: center; justify-content: space-between; text-align: left; }
.session-row.is-selected { border: 2px solid var(--brand-primary); }
.live-stage { width: 100%; aspect-ratio: 16 / 9; margin: 8px 0; border-radius: var(--radius-card); background: var(--brand-deep); box-shadow: var(--shadow-1); }
.player-shell { margin: 8px 0; padding: 8px; border-radius: var(--radius-card); color: var(--text-on-dark); background: #0d1620; }
.player-shell video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-control); background: #000; }
.player-shell .muted { margin: 8px 4px 2px; color: #b9c6d4; font-size: var(--font-caption); }
.download-progress { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.download-progress progress { width: 100%; accent-color: var(--brand-primary); }
.prose li { margin: 6px 0; }

/* ================= 登录 ================= */
.login { display: grid; min-height: calc(100dvh - 100px); align-content: center; text-align: center; }
.login-mark { display: grid; width: 72px; height: 72px; margin: 0 auto 12px; place-items: center; color: #fff; border-radius: 50%; background: linear-gradient(150deg, var(--brand-primary), var(--brand-deep)); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 18%), var(--shadow-2); }
.login-mark .icon { width: 42px; height: 42px; }
.footnote { margin-top: 12px; color: var(--text-tertiary); font-size: var(--font-label); }
/* 未发送验证码时,「发送验证码」与「验证码登录」两按钮直接相邻,补上间距 */
.login .button--secondary + .button--primary { margin-top: 16px; }
.profile-hero { display: grid; justify-items: start; }
.profile-hero .button--light { margin-top: 12px; }
/* 资料表单:文件选择按钮与「保存资料」相邻时补间距 */
.form-card .file-button + .button--primary { margin-top: 16px; }
.menu-list { margin: 8px 0; }
/* 收藏列表:统一球房卡 + 右侧取消收藏按钮 */
.favorite-row { position: relative; min-width: 0; }
.favorite-row .card-link { padding-right: 10px; }
.favorite-row .venue-chips { padding-right: 48px; }
.favorite-remove { position: absolute; right: 10px; bottom: 10px; z-index: 1; }

/* ================= antd-mobile 覆写 ================= */
.adm-dialog { border-radius: var(--radius-card); }
.adm-action-sheet-button-item { font-weight: var(--weight-medium); }
.adm-pull-to-refresh-head-content { color: var(--brand-primary); font-weight: var(--weight-semibold); }

/* ================= 情境化扫码入口卡(空闲扫码 ↔ 局中回到计分) ================= */
.scan-entry { display: flex; width: 100%; min-height: 54px; align-items: center; gap: 10px; margin-bottom: 2px; padding: 10px 12px; border: 0; border-radius: var(--radius-card); text-align: left; transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast); }
.scan-entry:active { transform: scale(.98); }
.scan-entry__body { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 1px; }
.scan-entry__body strong { font-size: var(--font-title); font-weight: var(--weight-bold); }
.scan-entry__body small { font-size: var(--font-caption); opacity: .82; }
.scan-entry > .icon { width: 22px; height: 22px; opacity: .7; }
/* 空闲:活力黄主 CTA */
.scan-entry--idle { color: var(--text-on-accent); background: var(--brand-accent); box-shadow: 0 6px 16px rgb(253 214 4 / 36%); }
.scan-entry--idle:active { background: var(--brand-accent-pressed); }
.scan-entry--idle .scan-entry__icon { display: grid; width: 38px; min-width: 38px; height: 38px; place-items: center; border-radius: var(--radius-control); background: rgb(0 0 0 / 10%); }
.scan-entry--idle .scan-entry__icon .icon { width: 22px; height: 22px; }
/* 局中:深蓝 + 黄点缀(回到计分) */
.scan-entry--active { color: var(--text-on-dark); background: linear-gradient(150deg, var(--brand-deep), var(--brand-primary)); box-shadow: var(--shadow-3); }
.scan-entry--active .scan-entry__body strong { color: var(--brand-accent); }
.scan-entry__live { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius-full); background: rgb(253 214 4 / 18%); color: var(--brand-accent); font-size: var(--font-label); font-weight: var(--weight-bold); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-accent); animation: live-pulse 1.4s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: .35; } }

/* ================= 扫码取景(全屏沉浸) ================= */
.scan-stage { display: grid; gap: 8px; }
.scan-stage__viewfinder { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: var(--radius-card); background: #0d1620; }
.scan-stage__viewfinder video { width: 100%; height: 100%; object-fit: cover; }
.scan-stage__frame { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.scan-stage__frame { background: linear-gradient(rgb(0 0 0 / 0) 0 0); }
.scan-stage__frame span { position: absolute; width: 34px; height: 34px; border: 3px solid var(--brand-accent); }
.scan-stage__frame span:nth-child(1) { top: 22%; left: 22%; border-width: 3px 0 0 3px; border-radius: 8px 0 0 0; }
.scan-stage__frame span:nth-child(2) { top: 22%; right: 22%; border-width: 3px 3px 0 0; border-radius: 0 8px 0 0; }
.scan-stage__frame span:nth-child(3) { bottom: 22%; left: 22%; border-width: 0 0 3px 3px; border-radius: 0 0 0 8px; }
.scan-stage__frame span:nth-child(4) { bottom: 22%; right: 22%; border-width: 0 3px 3px 0; border-radius: 0 0 8px 0; }
.scan-stage__hint { position: absolute; bottom: 14px; left: 0; right: 0; margin: 0; color: rgb(255 255 255 / 75%); font-size: var(--font-caption); text-align: center; }
.scan-manual { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.scan-manual .button { min-width: 48px; }
.scan-confirm { display: grid; gap: 6px; padding: 14px 12px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--divider); text-align: center; }
.scan-confirm h1 { margin: 4px 0 0; }
.scan-confirm .eyebrow { color: var(--brand-primary); }

/* ================= 计分(全屏点按记分牌) ================= */
.scoring-stage { display: grid; gap: 8px; }
.conn-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 2px; }
.conn-banner.is-offline { padding: 10px 12px; border-radius: var(--radius-control); background: var(--warning-soft); }
.conn-banner__meta { color: var(--text-tertiary); font-size: var(--font-caption); font-variant-numeric: tabular-nums; }
.scoring-stage__head h1 { margin-bottom: 2px; }
.scoring-stage__head p { margin: 0; color: var(--text-secondary); font-size: var(--font-caption); }
.scoreboard { overflow: hidden; border-radius: var(--radius-card); background: linear-gradient(150deg, var(--brand-deep), #0d1620); box-shadow: var(--shadow-3); }
.scoreboard__players { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.scoreboard__player { display: grid; min-height: 120px; padding: 12px 10px; place-items: center; align-content: center; gap: 4px; color: var(--text-on-dark); border: 0; background: transparent; transition: background var(--motion-fast); }
.scoreboard__player:active { background: rgb(255 255 255 / 10%); }
.scoreboard__player.is-picked { background: rgb(253 214 4 / 16%); box-shadow: inset 0 0 0 2px var(--brand-accent); }
.scoreboard__name { font-size: var(--font-body); font-weight: var(--weight-semibold); }
.scoreboard__score { color: var(--brand-accent); font-size: var(--font-score); font-weight: var(--weight-bold); line-height: 1; font-variant-numeric: tabular-nums; }
.scoreboard__player.is-picked .scoreboard__score { color: var(--brand-accent); }
.scoreboard__tap { color: rgb(255 255 255 / 55%); font-size: var(--font-label); }
.scoreboard__player.is-picked .scoreboard__tap { color: var(--brand-accent); }
/* 追分:点人记分 */
.scoreboard--chase { padding: 8px 0; background: var(--surface); border: 1px solid var(--divider); box-shadow: none; }
.scoreboard__chase-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--divider); }
.scoreboard__chase-row:last-child { border-bottom: 0; }
.scoreboard__chase-row .scoreboard__name { color: var(--text-primary); }
.scoreboard__stepper { display: flex; align-items: center; gap: 6px; }
.scoreboard__stepper button { width: 44px; height: 44px; border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--surface); color: var(--brand-primary); font-size: 1.3rem; font-weight: var(--weight-bold); }
.scoreboard__stepper button:active { background: var(--brand-primary-soft); }
.scoreboard__stepper input { width: 64px; min-height: 44px; text-align: center; font-size: var(--font-display); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }

/* ================= 可拖拽「回到计分」全局悬浮条 ================= */
.floating-return { position: fixed; z-index: var(--z-modal); right: 10px; bottom: calc(120px + var(--safe-bottom)); display: flex; align-items: center; gap: 7px; height: 46px; padding: 0 16px; color: var(--text-on-dark); border-radius: var(--radius-full); background: linear-gradient(150deg, var(--brand-deep), var(--brand-primary)); box-shadow: var(--shadow-4); font-size: var(--font-body); font-weight: var(--weight-semibold); cursor: grab; user-select: none; touch-action: none; }
.floating-return:active { cursor: grabbing; }
.floating-return strong { font-size: var(--font-body); }
.floating-return__mode { color: var(--brand-accent); font-size: var(--font-caption); font-weight: var(--weight-bold); }
.floating-return .live-dot { box-shadow: 0 0 0 3px rgb(253 214 4 / 25%); }

/* ================= 首页(约)/现场 卡片流 ================= */
.home-section { margin: 8px 0 6px; }
.home-section h2 { margin: 0; font-size: var(--font-title); font-weight: var(--weight-bold); }
/* 未授权定位时首页的"获取位置权限"入口:提示 + 两个按钮 */
.home-locate { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 6px; padding: 24px 16px; align-items: center; text-align: center; border: 1px dashed var(--brand-primary-border); border-radius: var(--radius-card); background: var(--surface); }
.home-locate > .icon { width: 34px; height: 34px; color: var(--brand-primary); }
.home-locate h2 { margin: 0; font-size: var(--font-title); font-weight: var(--weight-bold); }
.home-locate p { margin: 0; }
.home-locate__actions { display: flex; gap: 10px; margin-top: 6px; }
.live-card__badge { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--radius-full); background: rgb(217 45 32 / 92%); color: #fff; font-size: var(--font-label); font-weight: var(--weight-bold); }
.venue-live-entry { min-height: 82px; align-items: center; color: #fff; border: 0; background: linear-gradient(145deg, #8f1f17, var(--danger)); box-shadow: var(--shadow-2); }
.venue-live-entry:active { background: #a8271d; }
.venue-live-entry .card__body h2, .venue-live-entry .card__body p, .venue-live-entry > .icon { color: #fff; }
.venue-live-entry .card__body p { opacity: .86; }
.venue-live-entry__status { display: inline-flex; min-width: 92px; align-items: center; gap: 7px; font-size: var(--font-caption); font-weight: var(--weight-bold); }
.venue-live-entry__status .live-dot { background: #fff; box-shadow: 0 0 0 4px rgb(255 255 255 / 20%); }
/* 直播列表行卡片:徽标横排 + 文字 + 箭头(media-me 直播页) */
.live-table-card { display: flex; align-items: center; gap: 10px; text-align: left; }
.live-table-card .live-card__badge { position: static; flex-shrink: 0; }
.live-table-card .card__body { flex: 1; }
.live-table-card .card__body p { margin: 2px 0 0; }
.live-table-card > .icon { color: var(--gray-400); }
/* 回放列表卡片:左侧缩略块 + 球局信息(media-me 回放 tab) */
.replay-card { display: flex; gap: 12px; align-items: stretch; }
.replay-card__thumb { display: grid; width: 72px; flex-shrink: 0; place-items: center; border-radius: var(--radius-sm); color: #fff; background: linear-gradient(150deg, var(--brand-deep), var(--brand-primary)); }
.replay-card__thumb .icon { width: 26px; height: 26px; }
.replay-card__main { min-width: 0; flex: 1; }
.replay-card__main .row { gap: 10px; }
.replay-card__main .row h2 { flex: 1; }
.replay-card__main small { display: block; margin-top: 2px; }
.group-count { color: var(--text-tertiary); font-size: var(--font-caption); font-weight: var(--weight-medium); }
/* 回放可用状态角标:可播放/处理中/不可用 分色 */
.chip--playable { color: var(--success-text); background: var(--success-soft); }
.chip--preparing { color: var(--warning-text); background: var(--warning-soft); }
.chip--unavailable { color: var(--text-tertiary); background: var(--gray-100); }
/* 相册空占位:浅灰底 + 品牌蓝图标 */
.album-placeholder { display: grid; place-items: center; color: var(--brand-primary); background: var(--surface-muted); }
.album-placeholder svg { width: 40px; height: 40px; opacity: .55; }
.preview-image { width: 100%; border-radius: var(--radius-control); }
@media (orientation: landscape) and (max-height: 520px) {
  .hero { padding-top: calc(18px + var(--safe-top)); padding-bottom: 18px; }
  .page.with-tabs { padding-bottom: calc(76px + var(--safe-bottom)); }
  .bottom-tabs .adm-tab-bar-wrap { min-height: 50px; }
  .bottom-tabs .adm-tab-bar-item-icon .icon { width: 20px; height: 20px; }
  .bottom-tabs .bottom-tab-scan .adm-tab-bar-item-icon .icon { width: 42px; height: 42px; margin-top: -20px; }
  .player-shell video { max-height: calc(100dvh - 160px); }
}
@media (max-width: 350px) {
  .page { padding-left: 12px; padding-right: 12px; }
  .hero { margin-left: -12px; margin-right: -12px; padding-left: 16px; padding-right: 16px; }
  .card { padding: 12px; }
  .venue-cover, .card-cover, .cover-placeholder.card-cover, .challenge-cover { width: 76px; min-width: 76px; height: 76px; }
  .button { padding-left: 12px; padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ================= 约战 Tab(按 v2 设计:action bar + 吸顶筛选 + chips + 底部筛选抽屉) ================= */
/* 约战导航和操作保持同一行，但通过分组、分隔线和不同选中语言区分语义。 */
.challenge-page { width: 100%; max-width: 100%; min-width: 0; overflow-x: clip; }
.challenge-action-bar { display: flex; box-sizing: border-box; width: 100%; max-width: 100%; height: 46px; margin: 0 0 10px; overflow: hidden; border: 1px solid #a9cff2; border-radius: 4px; background: rgb(255 255 255 / 98%); box-shadow: 0 4px 10px rgb(19 54 87 / 6%); }
.challenge-action-group { display: flex; min-width: 0; align-items: stretch; }
.challenge-action-group--navigation { flex: 1 1 52.4%; background: #f3f8fd; }
.challenge-action-group--operations { flex: 1 1 47.6%; border-left: 1px solid #c7d3de; background: var(--surface); }
.challenge-action { position: relative; display: inline-flex; min-width: 0; min-height: 46px; margin: 0; padding: 0 3px; flex: 1; align-items: center; justify-content: center; color: var(--text-tertiary); border: 0; border-radius: 0; background: transparent; font-size: 11px; font-weight: var(--weight-medium); text-align: center; white-space: nowrap; touch-action: manipulation; }
.challenge-action + .challenge-action { border-left: 1px solid #e4ebf1; }
.challenge-action-group--navigation .challenge-action.is-active { color: #fff; background: linear-gradient(90deg, #0879d6, var(--brand-primary)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%); font-weight: var(--weight-bold); }
.challenge-action-group--navigation .challenge-action.is-active::after { position: absolute; bottom: 3px; left: 50%; width: 5px; height: 5px; content: ''; border-radius: 50%; background: var(--brand-accent); transform: translateX(-50%); }
.challenge-action-group--operations .challenge-action { color: var(--brand-primary); font-size: 9.5px; gap: 4px; }
.challenge-action-group--operations .challenge-action + .challenge-action { border-left: 1px solid var(--divider); }
.challenge-action-group--operations .challenge-action.has-value { color: var(--brand-primary); background: #f0f7fe; font-weight: var(--weight-semibold); }
.challenge-action-group--operations .challenge-action .icon { width: 16px; height: 16px; }
.challenge-action-group--operations .challenge-action > span { line-height: 1; }
.challenge-action--filter { position: relative; }
.challenge-action--filter em { position: absolute; top: 4px; right: calc(50% - 27px); display: inline-grid; min-width: 14px; height: 14px; padding: 0 3px; place-items: center; border: 1px solid #fff; border-radius: 8px; color: var(--text-on-dark); background: var(--brand-primary); font-size: 8px; font-style: normal; line-height: 14px; }
.challenge-view-heading { display: flex; min-height: 36px; margin: -2px 0 8px; align-items: center; justify-content: space-between; color: var(--text-secondary); font-size: var(--font-caption); }
.challenge-view-heading strong { color: var(--text-primary); font-size: var(--font-body); }
/* 已选条件 chips:每个可单独移除,有筛选才显示清空 */
.challenge-chips { display: flex; gap: 6px; margin: 6px 0 10px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.challenge-chips::-webkit-scrollbar { display: none; }
.challenge-chip { display: inline-flex; flex: 0 0 auto; min-height: 32px; padding: 4px 6px 4px 12px; align-items: center; gap: 4px; color: var(--brand-primary); border: 1px solid var(--brand-primary-border); border-radius: var(--radius-full); background: var(--brand-primary-soft); font-size: var(--font-label); font-weight: var(--weight-medium); }
.challenge-chip__close { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: rgb(0 104 196 / 12%); }
.challenge-chip__close .icon { width: 12px; height: 12px; }
.challenge-chip--clear { color: var(--text-secondary); border-color: var(--border-default); background: var(--surface); }
/* 列表卡片:明确的左侧封面/头像列 + 右侧正文，390px 小屏正文仍保留有效宽度。 */
.challenge-card { align-items: flex-start; flex-wrap: nowrap; gap: 10px; padding-right: 10px; }
.challenge-card--publisher { border-color: #f0d98a; background: #fffbe9; }
.challenge-cover { display: block; width: 84px; height: 84px; flex: 0 0 84px; }
.challenge-card__body { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; justify-content: flex-start; gap: 4px; align-self: stretch; }
.challenge-card__title-row { display: flex; min-width: 0; flex-wrap: nowrap; align-items: center; gap: 4px; }
.challenge-card__title-row h2 { margin: 0; flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--brand-deep); text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-body); font-weight: var(--weight-bold); }
.challenge-pill { display: inline-flex; min-height: 20px; padding: 1px 8px; flex: 0 0 auto; align-items: center; color: var(--success-text); border-radius: var(--radius-full); background: var(--success-soft); font-size: var(--font-label); font-weight: var(--weight-semibold); white-space: nowrap; }
.challenge-pill--full { color: var(--text-tertiary); background: var(--gray-100); }
.challenge-pill--publisher { color: var(--warning-text); background: var(--brand-accent-soft); }
.challenge-pill--mode { color: var(--brand-primary); border: 1px solid var(--brand-primary-border); background: var(--brand-primary-soft); }
.challenge-card__meta { display: flex; min-width: 0; align-items: baseline; gap: 7px; color: var(--text-tertiary); font-size: var(--font-label); line-height: 1.35; }
.challenge-card__meta time { min-width: 0; overflow: hidden; flex: 0 1 auto; text-overflow: ellipsis; white-space: nowrap; }
.challenge-card__distance { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.challenge-card__publisher { flex: 0 0 auto; color: var(--warning-text); font-weight: var(--weight-semibold); white-space: nowrap; }
.challenge-card__foot { display: flex; min-width: 0; min-height: 28px; align-items: flex-end; gap: 7px; margin-top: auto; color: var(--text-tertiary); font-size: var(--font-caption); }
.challenge-card__numbers { display: flex; min-width: 0; margin-left: auto; flex: 1 1 auto; align-items: baseline; justify-content: flex-end; gap: 7px; overflow: hidden; white-space: nowrap; }
.challenge-card__need { flex: 0 0 auto; color: var(--brand-primary); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.challenge-card__need.is-full { color: var(--text-tertiary); }
.challenge-card__count { color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
/* 头像组紧挨封面右侧并与封面底边齐平；余量始终贴卡片右边。 */
.challenge-avatars { display: flex; max-width: 100px; padding: 2px; box-sizing: border-box; flex: 0 1 auto; align-items: center; justify-content: flex-start; overflow: hidden; }
.challenge-avatar { position: relative; display: inline-grid; width: 24px; min-width: 24px; height: 24px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 50%; font-size: 11px; font-weight: var(--weight-semibold); line-height: 1; }
.challenge-avatar + .challenge-avatar { margin-left: -7px; }
.challenge-avatar img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.challenge-avatar--creator { z-index: 1; box-shadow: 0 0 0 2px var(--brand-primary); }
.challenge-avatar--more { background: var(--gray-200); color: var(--text-secondary); font-size: 10px; }
.venue-detail-card__head { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: start; gap: 8px; }
.venue-detail-card__head h1 { margin: 0 0 4px; padding-top: 2px; }
.venue-detail-card__address, .venue-detail-card__phone { margin: 2px 0; font-size: var(--font-caption); }
.venue-detail-card__phone { color: var(--text-secondary); }
.venue-detail-card__description { margin: 8px 0 0; color: var(--text-secondary); font-size: var(--font-caption); }
.venue-detail-card__features { margin-top: 8px; }
.venue-favorite-star { display: inline-grid; width: 44px; height: 44px; padding: 0; place-items: center; color: var(--gray-400); border: 0; border-radius: 50%; background: transparent; touch-action: manipulation; }
.venue-favorite-star .icon { width: 25px; height: 25px; }
.venue-favorite-star.is-active { color: var(--brand-accent); }
.venue-favorite-star.is-active .icon { fill: currentColor; }
.venue-favorite-star:disabled { opacity: .55; }
/* 底部筛选抽屉(antd-mobile Popup):头部摘要 + 滚动区 + 底部双按钮 */
.challenge-drawer { display: flex; flex-direction: column; max-height: 84vh; border-radius: 14px 14px 0 0; background: var(--surface); }
.challenge-drawer__dialog { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; outline: 0; }
.challenge-drawer__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--divider); }
.challenge-drawer__header h2 { margin: 0; font-size: var(--font-title); font-weight: var(--weight-bold); }
.challenge-drawer__summary { margin: 3px 0 0; color: var(--text-secondary); font-size: var(--font-caption); }
.challenge-drawer__close { min-width: 44px; min-height: 44px; margin: -8px -8px -8px 0; padding: 8px; border-radius: var(--radius-control); }
.challenge-drawer__body { flex: 1 1 auto; padding: 2px 16px 10px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.challenge-filter-section { padding: 10px 0; border-bottom: 1px solid var(--divider); }
.challenge-filter-section--last { border-bottom: 0; }
.challenge-filter-section h3 { margin: 0 0 8px; font-size: var(--font-caption); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.challenge-filter-section .select-capsules { gap: 6px; }
.challenge-filter-section .select-capsules button { min-height: 44px; padding: 6px 11px; border-radius: var(--radius-control); font-size: var(--font-caption); }
/* 单轨双端范围：两个原生 range 叠放成一个语义控件，键盘和触控均可调。 */
.challenge-rank-range { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.challenge-rank-range__summary { display: flex; min-height: 40px; margin: 0; padding: 8px 10px; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-secondary); border-radius: var(--radius-control); background: var(--surface-muted); font-size: var(--font-caption); }
.challenge-rank-range__summary strong { color: var(--brand-primary); font-size: var(--font-body); font-weight: var(--weight-semibold); }
.challenge-rank-slider { position: relative; height: 44px; cursor: pointer; touch-action: none; user-select: none; }
.challenge-rank-slider__track, .challenge-rank-slider__active { position: absolute; top: 20px; right: 8px; left: 8px; height: 4px; border-radius: 2px; background: var(--gray-200); }
.challenge-rank-slider__active { right: auto; background: var(--brand-primary); }
.challenge-rank-slider input[type='range'] { position: absolute; inset: 0; width: 100%; height: 44px; margin: 0; padding: 0 8px; border: 0; background: transparent; appearance: none; pointer-events: none; }
.challenge-rank-slider input[type='range']::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.challenge-rank-slider input[type='range']::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -10px; border: 3px solid var(--surface); border-radius: 50%; background: var(--brand-primary); box-shadow: 0 0 0 1px var(--brand-primary), var(--shadow-1); appearance: none; pointer-events: auto; }
.challenge-rank-slider input[type='range']::-moz-range-track { height: 4px; background: transparent; }
.challenge-rank-slider input[type='range']::-moz-range-thumb { width: 20px; height: 20px; border: 3px solid var(--surface); border-radius: 50%; background: var(--brand-primary); box-shadow: 0 0 0 1px var(--brand-primary), var(--shadow-1); pointer-events: auto; }
.challenge-rank-slider input[type='range']:focus-visible { outline: 0; }
.challenge-rank-slider input[type='range']:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgb(31 166 245 / 25%), 0 0 0 1px var(--brand-primary); }
.challenge-rank-range__edges { display: flex; justify-content: space-between; color: var(--text-tertiary); font-size: var(--font-label); font-variant-numeric: tabular-nums; }
/* 区县短列表，避免把城市下全部球房铺进抽屉。 */
.challenge-district-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.challenge-district-grid button { display: grid; min-width: 0; min-height: 44px; padding: 5px 6px; place-items: center; align-content: center; color: var(--text-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--surface); font-size: var(--font-caption); line-height: 1.25; }
.challenge-district-grid button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.challenge-district-grid button small { color: var(--text-tertiary); font-size: 10px; }
.challenge-district-grid button.is-selected { color: var(--brand-primary); border-color: var(--brand-primary-border); background: var(--brand-primary-soft); font-weight: var(--weight-semibold); }
.challenge-selected-mark { color: var(--brand-primary); font-size: var(--font-label); font-weight: var(--weight-semibold); }
.challenge-drawer__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 16px calc(10px + var(--safe-bottom)); border-top: 1px solid var(--divider); }
@media (max-width: 390px) {
  .challenge-card { gap: 8px; }
  .challenge-cover { width: 76px; height: 76px; flex-basis: 76px; }
  .challenge-cover .card-cover { width: 76px; height: 76px; }
  .challenge-card__meta time { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .challenge-avatar { width: 22px; height: 22px; font-size: 10px; }
  .challenge-district-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .challenge-action { padding-inline: 2px; font-size: 10.5px; }
}

/* ================= 个人主页 / 我的 =================
 * 结构参考游戏资料页的信息密度，但保持星辰蓝黄品牌、白天模式与原生 H5 交互。
 */
.profile-shell-page { padding: 0; background: var(--canvas); }
.profile-shell-page.with-tabs { padding: 0 0 calc(72px + var(--safe-bottom)); }
.profile-loading-page { min-height: 100dvh; padding: calc(80px + var(--safe-top)) 16px 20px; background: var(--canvas); }
.player-profile-page { position: relative; min-height: 100dvh; background: #082846; }
.profile-topbar { --topbar-opacity: 0; position: fixed; z-index: 25; top: 0; left: 50%; display: grid; width: min(100%, 480px); height: calc(48px + var(--safe-top)); padding: var(--safe-top) 0 0; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; transform: translateX(-50%); color: #fff; }
.profile-topbar::before { position: absolute; z-index: -1; inset: 0; content: ''; opacity: var(--topbar-opacity); background: linear-gradient(100deg, var(--brand-deep), var(--brand-primary)); box-shadow: 0 1px 0 rgb(255 255 255 / 12%); }
.profile-topbar strong { overflow: hidden; opacity: 0; font-size: 15px; font-weight: 600; text-align: center; text-overflow: ellipsis; transform: translateY(4px); transition: opacity 160ms ease, transform 160ms ease; white-space: nowrap; }
.profile-topbar strong.is-visible { opacity: 1; transform: translateY(0); }
.profile-topbar .tq-back-button { color: #fff; }
.profile-topbar__menu { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; color: #fff; border: 0; border-radius: 50%; background: rgb(4 25 48 / 18%); }
.profile-topbar__menu { grid-auto-flow: column; gap: 3px; }
.profile-topbar__menu span { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.is-owner .profile-topbar { grid-template-columns: 44px minmax(0, 1fr) 44px; }
.is-owner .profile-topbar::after { content: ''; }
.profile-cover { --cover-scale: 1; --cover-shift: 0px; --pull-distance: 0px; position: relative; height: calc(160px + var(--pull-distance)); overflow: hidden; color: #fff; background: #082846; }
.profile-cover.is-releasing { transition: height 280ms cubic-bezier(.22, .8, .22, 1); }
.profile-cover__media, .profile-cover__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.profile-cover__media { object-fit: cover; transform: scale(var(--cover-scale)) translateY(var(--cover-shift)); transform-origin: 50% 38%; will-change: transform; }
.profile-cover.is-releasing .profile-cover__media { transition: transform 280ms cubic-bezier(.22, .8, .22, 1); }
.profile-cover__shade { background: linear-gradient(180deg, rgb(0 32 70 / 5%), rgb(0 22 48 / 14%) 42%, rgb(4 23 43 / 94%) 100%); pointer-events: none; }
.profile-cover__change { position: absolute; z-index: 1; inset: 0 0 63px; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.profile-cover__change:disabled { cursor: wait; }
.profile-cover__input { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.profile-pull-loader { position: absolute; z-index: 3; top: calc(56px + var(--safe-top)); left: 50%; display: inline-flex; transform: translateX(-50%); }
.profile-background-saving { position: absolute; z-index: 4; top: 50%; left: 50%; display: inline-flex; padding: 7px 11px; align-items: center; gap: 7px; transform: translate(-50%, -50%); color: #fff; border-radius: 999px; background: rgb(3 26 54 / 74%); font-size: 11px; backdrop-filter: blur(8px); }
.profile-background-saving .spinner { width: 16px; height: 16px; border-width: 2px; }
.profile-identity { position: absolute; z-index: 2; right: 12px; bottom: 5px; left: 12px; display: flex; align-items: flex-end; gap: 8px; }
.profile-avatar-action { position: relative; width: 64px; min-width: 64px; height: 64px; padding: 0; flex: 0 0 auto; overflow: visible; border: 0; border-radius: 50%; background: transparent; }
.profile-avatar-action__edit { position: absolute; right: 0; bottom: 0; display: grid; width: 20px; height: 20px; place-items: center; color: #fff; border: 2px solid rgb(255 255 255 / 88%); border-radius: 50%; background: rgb(0 76 143 / 92%); }
.profile-avatar-action__edit .icon { width: 11px; height: 11px; }
.profile-identity__avatar.user-avatar { width: 64px; min-width: 64px; height: 64px; border: 3px solid rgb(255 255 255 / 90%); box-shadow: 0 6px 20px rgb(0 18 40 / 28%); font-size: 24px; }
.profile-identity > div { min-width: 0; flex: 1; padding-bottom: 2px; }
.profile-identity h1 { display: flex; min-width: 0; margin: 0; align-items: center; gap: 6px; overflow: hidden; font-size: 18px; font-weight: 650; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.profile-identity h1 em { padding: 2px 5px; flex: 0 0 auto; color: #152237; border-radius: 2px; background: var(--brand-accent); font-size: 10px; font-style: normal; letter-spacing: 0; }
.profile-name-edit { display: grid; width: 22px; min-width: 22px; height: 22px; padding: 0; flex: 0 0 auto; place-items: center; color: #fff; border: 0; border-radius: 50%; background: rgb(255 255 255 / 13%); }
.profile-name-edit .icon { width: 14px; height: 14px; }
.profile-identity p { margin: 0 0 2px; color: rgb(255 255 255 / 68%); font-size: 10px; }
.profile-hero-stats { display: flex; gap: 14px; }
.profile-hero-stats button { display: grid; min-height: 18px; padding: 0; grid-template-columns: auto auto; align-items: baseline; gap: 3px; color: #fff; border: 0; background: transparent; }
.profile-hero-stats button:disabled { opacity: 1; }
.profile-hero-stats strong { font-size: 13px; }
.profile-hero-stats small { color: rgb(255 255 255 / 66%); font-size: 9px; }
.profile-tabs { position: sticky; z-index: 20; top: calc(48px + var(--safe-top)); display: flex; height: 42px; margin-top: -1px; align-items: stretch; border-bottom: 1px solid var(--divider); background: rgb(255 255 255 / 96%); backdrop-filter: blur(14px); }
.is-owner .profile-tabs { top: calc(48px + var(--safe-top)); }
.profile-tabs button { position: relative; min-width: 0; min-height: 42px; padding: 0 2px; flex: 1 1 0; overflow-wrap: normal; color: var(--text-tertiary); border: 0; background: transparent; font-size: 12px; font-weight: 500; white-space: nowrap; }
.profile-tabs button::after { position: absolute; right: 30%; bottom: 0; left: 30%; height: 2px; content: ''; opacity: 0; background: var(--brand-primary); transform: scaleX(.45); transition: opacity 160ms ease, transform 160ms ease; }
.profile-tabs button.is-active { color: var(--text-primary); font-weight: 650; }
.profile-tabs button.is-active::after { opacity: 1; transform: scaleX(1); }
.profile-content { min-height: 420px; padding: 10px 10px calc(24px + var(--safe-bottom)); background: var(--canvas); }
.is-public .profile-content { padding-bottom: calc(88px + var(--safe-bottom)); }
.profile-mode-tabs { display: grid; height: 34px; margin: 0 0 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.profile-mode-tabs button { min-width: 0; min-height: 34px; padding: 0 2px; overflow-wrap: normal; color: var(--text-secondary); border: 1px solid var(--divider); border-radius: 3px; background: var(--surface); font-size: 11px; font-weight: 550; white-space: nowrap; }
.profile-mode-tabs button.is-active { color: #fff; border-color: var(--brand-primary); background: var(--brand-primary); box-shadow: 0 2px 8px rgb(0 104 196 / 20%); }
.profile-panel-stack { display: grid; gap: 10px; }
.profile-overview-card { position: relative; overflow: hidden; padding: 14px; color: #fff; border-radius: 7px; background: radial-gradient(circle at 86% 20%, rgb(253 214 4 / 19%), transparent 32%), linear-gradient(135deg, #08396f, #0068c4 63%, #0c8bd6); box-shadow: 0 8px 22px rgb(12 66 121 / 18%); }
.profile-overview-card::after { position: absolute; right: -24px; bottom: -44px; width: 150px; height: 150px; content: ''; opacity: .14; border: 25px solid #fff; border-radius: 50%; }
.profile-overview-card__title { position: relative; z-index: 1; display: flex; margin-bottom: 12px; align-items: baseline; justify-content: space-between; }
.profile-overview-card__title span { font-size: 15px; font-weight: 650; }
.profile-overview-card__title small { color: rgb(255 255 255 / 70%); font-size: 10px; }
.profile-overview-card__rank { position: relative; z-index: 1; display: flex; margin-bottom: 14px; align-items: center; gap: 12px; }
.profile-overview-card__rank > div { display: grid; }
.profile-overview-card__rank strong { font-size: 22px; line-height: 1.2; }
.profile-overview-card__rank small { color: rgb(255 255 255 / 64%); font-size: 10px; }
.profile-overview-card__metrics { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.profile-overview-card__metrics span { display: grid; min-width: 0; gap: 1px; }
.profile-overview-card__metrics strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.profile-overview-card__metrics small { color: rgb(255 255 255 / 63%); font-size: 9px; white-space: nowrap; }
.rank-badge { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; overflow: visible; background: transparent; line-height: 1; vertical-align: middle; }
.rank-badge img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.rank-badge > b { position: absolute; z-index: 1; top: 50%; left: 50%; display: none; margin: 0; color: #12345a; font-size: 11px; font-weight: 850; line-height: 1; text-shadow: 0 1px rgb(255 255 255 / 58%); transform: translate(-50%, -50%); }
.rank-badge--fallback { overflow: hidden; border-radius: 36% 36% 48% 48%; background: linear-gradient(155deg, #eaf4ff, #8eb8dc 60%, #2d6595); box-shadow: inset 0 0 0 1px rgb(7 72 131 / 16%); }
.rank-badge--fallback > b { display: block; }
.rank-badge--dark-core > b { color: #fff; text-shadow: 0 1px 3px rgb(0 20 55 / 80%); }
.rank-badge--level-0 > b { top: 49%; font-size: 8px; letter-spacing: 1px; }
.rank-badge--xs { width: 29px; height: 33px; }
.rank-badge--xs > b { font-size: 9px; }
.rank-badge--sm { width: 39px; height: 45px; }
.rank-badge--sm > b { font-size: 11px; }
.rank-badge--md { width: 56px; height: 64px; }
.rank-badge--md > b { font-size: 15px; }
.rank-badge.personal-rank__emblem { position: absolute; top: 8px; right: 8px; }
.rank-badge--lg { width: 86px; height: 98px; }
.rank-badge--lg > b { font-size: 22px; }
.profile-section-heading { display: flex; min-height: 36px; padding: 0 2px; align-items: baseline; justify-content: space-between; }
.profile-section-heading h2 { margin: 0; font-size: 15px; }
.profile-section-heading small { font-size: 10px; }
.profile-record-list { overflow: hidden; margin-right: -10px; margin-left: -10px; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); background: var(--surface); }
.profile-record-list .profile-section-heading { padding: 10px 12px 7px; }
.profile-record-session { margin: 0 10px 8px; overflow: hidden; border: 1px solid #cbddea; border-radius: 4px; background: var(--surface); }
.profile-record-session__link { display: grid; height: 128px; grid-template-columns: 52px minmax(0, 1fr); color: var(--text-primary); transition: border-color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out); }
.profile-record-session__link:active { background: #f8fbfd; }
.record-session-rank-rail { position: relative; display: grid; padding: 8px 3px 7px; grid-template-rows: 52px 16px 12px; align-content: center; justify-items: center; overflow: hidden; color: #fff; background: linear-gradient(168deg, #064b8b 0%, #066ab5 53%, #0b8fa8 100%); box-shadow: inset -1px 0 rgb(255 255 255 / 24%); }
.record-session-rank-rail::before, .record-session-rank-rail::after { position: absolute; left: 8px; width: 36px; height: 1px; content: ''; background: linear-gradient(90deg, transparent, rgb(253 214 4 / 72%), transparent); }
.record-session-rank-rail::before { top: 9px; }
.record-session-rank-rail::after { bottom: 8px; }
.record-session-rank-shield { margin: 2px 0 3px; }
.record-session-rank-rail > strong { overflow: hidden; width: 46px; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.record-session-rank-rail > small { color: rgb(255 255 255 / 70%); font-size: 7.5px; line-height: 12px; letter-spacing: 1px; }
.profile-record-session__main { display: grid; min-width: 0; height: 126px; padding: 0 8px 0 10px; grid-template-rows: 27px 64px 35px; }
.profile-record-session__head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; }
.profile-record-session__head strong { overflow: hidden; min-width: 0; font-size: 12px; font-weight: 690; text-overflow: ellipsis; white-space: nowrap; }
.profile-record-session__head time { flex: 0 0 auto; color: var(--text-secondary); font-size: 8.5px; white-space: nowrap; }
.profile-record-session__versus { position: relative; display: grid; height: 64px; padding: 6px 8px; grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); align-items: center; gap: 2px; overflow: hidden; border: 1px solid #d4e4f1; border-radius: 5px; background: linear-gradient(102deg, #edf6fd 0%, #fff 48%, #f7fafc 100%); box-shadow: inset 0 1px rgb(255 255 255 / 90%); }
.profile-record-session__versus::before { position: absolute; top: 8px; bottom: 8px; left: 50%; width: 1px; content: ''; background: linear-gradient(180deg, transparent, #b8c9d8 50%, transparent); transform: translateX(-50%); }
.record-session-vs { z-index: 1; display: grid; width: 50px; height: 40px; place-items: center; }
.record-session-vs > * { grid-area: 1 / 1; }
.record-session-vs > b { color: var(--brand-deep); font-size: 12px; font-style: italic; font-weight: 850; letter-spacing: -.5px; }
.record-session-vs img { z-index: 1; display: block; width: 50px; height: 40px; object-fit: contain; }
.record-session-side { display: inline-flex; min-width: 0; align-items: center; gap: 5px; }
.record-session-side--self { justify-content: flex-end; }
.record-session-side--opponents { justify-content: flex-start; }
.score-glyphs { display: inline-flex; min-width: 32px; height: 23px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 0; white-space: nowrap; }
.score-glyph { display: block; width: auto; object-fit: contain; }
.score-glyph--digit { height: 21px; }
.score-glyph--plus { height: 14px; margin-right: 1px; }
.score-glyph--minus { height: 6px; margin-right: 1px; }
.score-glyphs.is-leading { filter: drop-shadow(0 1px 1px rgb(253 214 4 / 32%)); }
.score-glyphs__fallback { color: #24364a; font-size: 20px; font-style: italic; font-weight: 850; line-height: 1; }
.score-glyphs.is-leading .score-glyphs__fallback { color: #0796a5; }
.record-session-avatar.user-avatar, .record-session-avatar--fallback { width: 26px; min-width: 26px; height: 26px; font-size: 9px; }
.record-session-side--self .record-session-avatar { margin: 2px; box-shadow: 0 0 0 1px var(--surface), 0 0 0 2px var(--brand-primary); }
.record-session-opponents { display: inline-flex; min-width: 26px; overflow: hidden; }
.record-session-opponents > .record-session-avatar + .record-session-avatar, .record-session-opponents > small { margin-left: -7px; }
.record-session-opponents > .record-session-avatar { border: 2px solid var(--surface); }
.record-session-avatar--fallback, .record-session-opponents > small { display: inline-grid; place-items: center; color: var(--brand-deep); border: 2px solid var(--surface); border-radius: 50%; background: #e5f0fc; }
.record-session-opponents > small { z-index: 4; width: 26px; min-width: 26px; height: 26px; color: var(--text-secondary); background: var(--surface-muted); font-size: 8px; }
.profile-record-session__body { display: grid; min-width: 0; padding: 3px 1px 2px; grid-template-rows: 14px 14px; gap: 1px; }
.record-session-context, .record-session-meta { display: flex; min-width: 0; align-items: center; overflow: hidden; white-space: nowrap; }
.record-session-context { justify-content: space-between; gap: 8px; color: var(--text-secondary); font-size: 8.5px; }
.record-session-context strong { overflow: hidden; min-width: 0; color: var(--text-primary); font-size: 9.5px; text-overflow: ellipsis; }
.record-session-context > span { flex: 0 0 auto; color: var(--text-secondary); }
.record-session-meta { gap: 8px; color: var(--gray-500); }
.record-session-meta small { overflow: hidden; min-width: 0; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.record-session-meta small + small { padding-left: 8px; border-left: 1px solid var(--divider); }
.profile-record-row { display: grid; min-height: 92px; padding: 12px; grid-template-columns: 55px minmax(0, 1fr); gap: 10px; border-top: 1px solid var(--divider); }
.profile-record-row__result { display: grid; align-content: start; gap: 3px; }
.profile-record-row__result strong { font-size: 17px; }
.profile-record-row__result .is-win { color: #0d93a7; }
.profile-record-row__result .is-loss { color: #e45d4f; }
.profile-record-row__result small { font-size: 10px; }
.profile-record-row__body { min-width: 0; }
.profile-record-row__body > a { display: block; overflow: hidden; color: var(--text-primary); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.profile-record-row__body > small { display: block; overflow: hidden; margin: 2px 0 8px; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.record-participants { display: flex; min-width: 0; padding-right: 4px; overflow-x: auto; scrollbar-width: none; }
.record-participants::-webkit-scrollbar { display: none; }
.record-participants > a, .record-participants > span { display: inline-flex; flex: 0 0 auto; align-items: center; color: var(--text-secondary); }
.record-participants > a + a, .record-participants > a + span, .record-participants > span + a, .record-participants > span + span { margin-left: -4px; }
.avatar--tiny.user-avatar { width: 24px; min-width: 24px; height: 24px; font-size: 9px; }
.record-participants .avatar--tiny.user-avatar { border: 2px solid var(--surface); }
.record-participants .record-participant--self { position: relative; z-index: 2; margin-right: 3px; cursor: default; }
.record-participants .record-participant--self .avatar--tiny.user-avatar { box-shadow: 0 0 0 1px var(--surface), 0 0 0 3px var(--brand-primary); }
.record-session-page { display: grid; gap: 10px; padding-top: 2px; }
.record-session-hero { position: relative; overflow: hidden; margin: 0 -10px; padding: 18px 16px 16px; color: #fff; background: radial-gradient(circle at 85% 16%, rgb(253 214 4 / 18%), transparent 36%), linear-gradient(135deg, #08396f, #0068c4 68%, #0c8bd6); }
.record-session-hero::after { position: absolute; right: -70px; bottom: -90px; width: 190px; height: 190px; content: ''; opacity: .1; border: 28px solid #fff; border-radius: 50%; }
.record-session-hero__heading { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.record-session-hero__heading > span:first-child { min-width: 0; }
.record-session-hero__heading h1 { overflow: hidden; margin: 3px 0 0; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.record-session-hero__heading small { color: rgb(255 255 255 / 68%); font-size: 10px; }
.record-session-hero__heading > span:last-child { display: grid; flex: 0 0 auto; text-align: right; }
.record-session-hero__heading > span:last-child strong { font-size: 17px; }
.record-session-hero__heading > .is-win strong { color: #76e6ed; }
.record-session-hero__heading > .is-loss strong { color: #ffd1cb; }
.record-session-hero__meta { position: relative; z-index: 1; display: flex; margin-top: 18px; gap: 30px; }
.record-session-hero__meta span { display: grid; }
.record-session-hero__meta strong { font-size: 14px; }
.record-session-hero__meta small { color: rgb(255 255 255 / 58%); font-size: 9px; }
.record-session-people { margin: 0 -10px; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); background: var(--surface); }
.record-session-people > header { display: flex; min-height: 42px; padding: 0 12px; align-items: center; justify-content: space-between; }
.record-session-people h2 { margin: 0; font-size: 15px; }
.record-session-people > header small { font-size: 10px; }
.record-session-people > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--divider); }
.record-session-person { display: grid; min-width: 0; min-height: 60px; padding: 9px 12px; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 8px; color: var(--text-primary); border-right: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.record-session-person:nth-child(2n) { border-right: 0; }
.record-session-person .avatar--small.user-avatar { width: 36px; min-width: 36px; height: 36px; font-size: 11px; }
.record-session-person.record-participant--self .avatar--small.user-avatar { box-shadow: 0 0 0 1px var(--surface), 0 0 0 3px var(--brand-primary); }
.record-session-person > span { display: grid; min-width: 0; }
.record-session-person strong, .record-session-person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-session-person strong { font-size: 11px; }
.record-session-person small { font-size: 8.5px; }
.record-session-person em { color: var(--brand-primary); font-size: 8px; font-style: normal; }
.record-session-person > .icon { width: 14px; height: 14px; color: var(--gray-400); }
.record-session-rounds { margin-top: 0; }
.ability-card-strip { display: flex; margin: 0 -10px; padding: 2px 24px 8px 10px; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.ability-card-strip::-webkit-scrollbar { display: none; }
.ability-game-card { position: relative; width: min(66vw, 280px); min-width: min(66vw, 280px); min-height: 124px; padding: 8px 10px; overflow: hidden; scroll-snap-align: center; color: #fff; border: 1px solid rgb(255 255 255 / 18%); border-radius: 9px; background: radial-gradient(circle at 70% 18%, rgb(37 191 237 / 30%), transparent 34%), linear-gradient(145deg, #061c35, #0b4f86 62%, #0876a8); box-shadow: 0 8px 18px rgb(5 39 73 / 20%); text-align: left; }
.ability-game-card:nth-child(2n) { background: radial-gradient(circle at 72% 20%, rgb(253 214 4 / 23%), transparent 34%), linear-gradient(145deg, #0a2851, #1767a4 65%, #0a8d9a); }
.ability-game-card__glow { position: absolute; top: -42px; right: -34px; width: 160px; height: 160px; border: 1px solid rgb(255 255 255 / 16%); border-radius: 50%; box-shadow: 0 0 0 25px rgb(255 255 255 / 4%), 0 0 0 50px rgb(255 255 255 / 3%); }
.ability-game-card > small { display: block; margin-bottom: 2px; color: rgb(255 255 255 / 66%); font-size: 9px; letter-spacing: .08em; }
.ability-game-card > .rank-badge { margin: -3px 0 -2px; }
.ability-game-card > strong { display: block; margin-bottom: 2px; font-size: 14px; }
.ability-game-card > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ability-game-card > div > span { display: grid; color: #fff; font-size: 12px; font-weight: 650; }
.ability-game-card > div small { color: rgb(255 255 255 / 56%); font-size: 8px; font-weight: 400; }
.ability-game-card.is-active { outline: 2px solid var(--brand-accent); outline-offset: -3px; }
.ability-chart-card { display: grid; padding: 16px 12px; grid-template-columns: 126px minmax(0, 1fr); align-items: center; gap: 12px; border: 1px solid var(--divider); border-radius: 7px; background: var(--surface); }
.ability-donut { position: relative; display: grid; width: 126px; height: 126px; place-items: center; border-radius: 50%; background: var(--ability-gradient); }
.ability-donut::before { width: 74px; height: 74px; content: ''; border-radius: 50%; background: var(--surface); }
.ability-donut > span { position: absolute; display: grid; text-align: center; }
.ability-donut strong { font-size: 23px; line-height: 1.15; }
.ability-donut small { font-size: 9px; }
.ability-legend { display: grid; gap: 4px; }
.ability-legend button { display: grid; min-height: 39px; padding: 3px 0; grid-template-columns: 7px minmax(0, 1fr); align-items: center; gap: 7px; color: var(--text-primary); border: 0; border-bottom: 1px solid var(--divider); background: transparent; text-align: left; }
.ability-legend button:last-child { border-bottom: 0; }
.ability-legend i { width: 7px; height: 7px; border-radius: 50%; }
.ability-legend span { display: grid; min-width: 0; }
.ability-legend strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ability-legend small { overflow: hidden; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.profile-privacy-notice { display: flex; margin: 0; padding: 9px 10px; align-items: flex-start; gap: 7px; color: var(--text-secondary); border: 1px solid #d8e6f4; border-radius: 4px; background: #eef6fd; font-size: 11px; }
.profile-privacy-notice .icon { width: 15px; height: 15px; flex: 0 0 auto; color: var(--brand-primary); }
.profile-venue-list, .profile-person-list { overflow: hidden; border: 1px solid var(--divider); border-radius: 6px; background: var(--surface); }
.profile-venue-list > a, .profile-person-list > a, .profile-person-list > div { display: flex; min-height: 70px; padding: 11px 12px; align-items: center; gap: 10px; color: var(--text-primary); border-bottom: 1px solid var(--divider); }
.profile-venue-list > a:last-child, .profile-person-list > a:last-child, .profile-person-list > div:last-child { border-bottom: 0; }
.profile-venue-list__index { width: 30px; flex: 0 0 auto; color: var(--brand-primary); font-size: 15px; font-weight: 700; font-style: italic; }
.profile-venue-list > a > span:nth-child(2), .profile-person-list > a > span, .profile-person-list > div > span { display: grid; min-width: 0; flex: 1; }
.profile-venue-list strong, .profile-person-list strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.profile-venue-list small, .profile-person-list small { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.profile-venue-list em { color: var(--brand-primary); font-size: 10px; font-style: normal; }
.profile-venue-list .icon, .profile-person-list .icon { width: 17px; height: 17px; flex: 0 0 auto; color: var(--gray-400); }
.profile-settings { display: grid; gap: 10px; }
.profile-settings section { overflow: hidden; border: 1px solid var(--divider); border-radius: 6px; background: var(--surface); }
.profile-settings section > h2 { margin: 0; padding: 10px 12px 6px; color: var(--text-tertiary); font-size: 10px; letter-spacing: .08em; }
.profile-settings section > a { display: flex; min-height: 48px; padding: 8px 12px; align-items: center; justify-content: space-between; color: var(--text-primary); border-top: 1px solid var(--divider); font-size: 13px; }
.profile-settings section > a .icon { width: 17px; height: 17px; color: var(--gray-400); }
.profile-privacy-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.profile-privacy-options button { min-height: 30px; padding: 4px 5px; color: var(--text-secondary); border: 1px solid var(--divider); border-radius: 4px; background: var(--surface); font-size: 10px; }
.profile-privacy-options button.is-active { color: var(--brand-primary); border-color: #80b5e5; background: #e9f4fe; font-weight: 700; }
.profile-settings section > label { display: grid; min-height: 80px; padding: 10px 12px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; border-top: 1px solid var(--divider); }
.profile-settings section > label > span { display: grid; min-width: 0; }
.profile-settings section > label strong { font-size: 13px; }
.profile-settings section > label small { font-size: 10px; }
.profile-settings .select-capsules { min-width: 98px; grid-template-columns: 1fr; gap: 3px; }
.profile-settings .select-capsules button { min-height: 30px; padding: 3px 7px; font-size: 10px; }
.public-profile-actions { position: fixed; z-index: 24; bottom: 0; left: 50%; display: grid; width: min(100%, 480px); min-height: calc(60px + var(--safe-bottom)); padding: 7px 10px calc(7px + var(--safe-bottom)); grid-template-columns: repeat(3, 1fr); gap: 1px; transform: translateX(-50%); border-top: 1px solid var(--divider); background: rgb(255 255 255 / 96%); backdrop-filter: blur(14px); }
.public-profile-actions.is-friend { grid-template-columns: repeat(2, 1fr); }
.public-profile-actions button { display: flex; min-height: 44px; padding: 0 4px; align-items: center; justify-content: center; gap: 5px; color: var(--text-primary); border: 0; border-right: 1px solid var(--divider); background: transparent; font-size: 12px; font-weight: 600; white-space: nowrap; }
.public-profile-actions button:last-child { border-right: 0; }
.public-profile-actions .icon { width: 19px; height: 19px; color: var(--brand-primary); }

.mode-order-page { min-height: 100dvh; padding-bottom: calc(24px + var(--safe-bottom)); background: var(--canvas); }
.mode-order-page > main { padding: 16px 12px; }
.mode-order-page__intro { margin: 0 2px 14px; color: var(--text-secondary); font-size: 12px; line-height: 1.65; }
.mode-order-list { overflow: hidden; border: 1px solid var(--divider); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-1); }
.mode-order-row { position: relative; display: grid; min-height: 58px; padding: 8px 4px 8px 12px; grid-template-columns: 34px minmax(0, 1fr) 48px; align-items: center; gap: 8px; border-bottom: 1px solid var(--divider); background: var(--surface); transition: transform 120ms ease, box-shadow 120ms ease; }
.mode-order-row:last-child { border-bottom: 0; }
.mode-order-row.is-dragging { z-index: 2; transform: scale(1.015); box-shadow: 0 8px 22px rgb(8 47 83 / 16%); }
.mode-order-row__number { color: var(--brand-primary); font-size: 13px; font-weight: 750; font-style: italic; }
.mode-order-row__copy { display: grid; min-width: 0; gap: 1px; }
.mode-order-row__copy strong { font-size: 14px; font-weight: 650; }
.mode-order-row__copy small { color: var(--text-tertiary); font-size: 10px; }
.mode-order-row__handle { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; color: var(--text-tertiary); border: 0; background: transparent; cursor: grab; touch-action: none; }
.mode-order-row__handle:active { color: var(--brand-primary); cursor: grabbing; }
.mode-order-row__handle .icon { width: 20px; height: 20px; }
.mode-order-page__status { min-height: 18px; margin: 10px 2px 0; color: var(--text-tertiary); font-size: 10px; text-align: center; }

.avatar-crop-dialog { position: fixed; z-index: 80; inset: 0; display: grid; align-items: end; background: rgb(2 18 35 / 68%); backdrop-filter: blur(4px); }
.avatar-crop-sheet { width: min(100%, 480px); margin: 0 auto; padding: 0 16px calc(16px + var(--safe-bottom)); border-radius: 18px 18px 0 0; background: var(--surface); box-shadow: 0 -16px 44px rgb(0 25 53 / 24%); }
.avatar-crop-sheet > header { display: grid; height: 54px; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; }
.avatar-crop-sheet > header strong { font-size: 15px; text-align: center; }
.avatar-crop-sheet > header button { height: 40px; padding: 0; color: var(--brand-primary); border: 0; background: transparent; font-size: 14px; }
.avatar-crop-sheet > header button:first-child { color: var(--text-secondary); text-align: left; }
.avatar-crop-preview { position: relative; width: min(76vw, 320px); aspect-ratio: 1; margin: 0 auto 18px; overflow: hidden; border-radius: 8px; background: #07192c; touch-action: none; }
.avatar-crop-preview img { position: absolute; max-width: none; transform: translate(-50%, -50%); user-select: none; -webkit-user-drag: none; }
.avatar-crop-preview > span { position: absolute; inset: 0; border: 2px solid rgb(255 255 255 / 92%); border-radius: 50%; box-shadow: 0 0 0 120px rgb(0 0 0 / 52%); pointer-events: none; }
.avatar-crop-zoom { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 10px; color: var(--text-secondary); font-size: 12px; }
.avatar-crop-zoom input { width: 100%; accent-color: var(--brand-primary); }
.avatar-crop-sheet > .muted { margin: 10px 0 0; font-size: 11px; text-align: center; }

@media (max-width: 360px) {
  .profile-cover { height: calc(160px + var(--pull-distance)); }
  .profile-identity { gap: 8px; }
  .profile-identity__avatar.user-avatar { width: 62px; min-width: 62px; height: 62px; }
  .profile-avatar-action { width: 62px; min-width: 62px; height: 62px; }
  .profile-identity h1 { font-size: 17px; }
  .profile-hero-stats { gap: 12px; }
  .profile-tabs button { font-size: 11px; }
  .ability-chart-card { grid-template-columns: 108px minmax(0, 1fr); gap: 8px; }
  .ability-donut { width: 108px; height: 108px; }
}

/* Review drafts keep each image and its recovery action together. */
.rating-stars { display: flex; gap: 8px; }
.rating-stars button { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--muted); }
.rating-stars button.is-selected { color: #164f9c; }
.rating-stars button.is-selected svg { fill: #f8d447; }
.review-draft-images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.review-draft-images > div { min-width: 0; overflow-wrap: anywhere; display: grid; gap: 6px; }
.review-draft-images img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.review-draft-images .button { min-width: 0; padding: 8px; }

/* Global UI audit: readable states and compact media controls. */
.button:disabled { color: #54606c; background: #e3eaf0; }
.details dt { flex: 0 0 5em; }
.details dd { min-width: 0; overflow-wrap: anywhere; }
.challenge-applicant { padding: 16px 0; border-top: 1px solid var(--border); }
.challenge-applicant-profile { display: flex; gap: 12px; min-width: 0; margin-bottom: 12px; }
.challenge-applicant-profile > div { min-width: 0; overflow-wrap: anywhere; }
.favorite-star { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 8px; color: #0068c4; background: white; border: 0; border-radius: 50%; }
.favorite-star .icon { width: 26px; height: 26px; }
.review-draft-images > div { display: block; position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 10px; }
.review-draft-images img { display: block; width: 100%; height: 100%; }
.review-image-retry, .review-image-status { position: absolute; inset: 0; display: grid; place-content: center; width: 100%; padding: 24px 2px 6px; background: rgba(20,30,45,.76); color: white; border: 0; font-size: 13px; line-height: 1.5; text-align: center; }
.review-image-remove { position: absolute; right: 0; top: 0; width: 44px; height: 44px; padding: 0; color: white; background: rgba(20,30,45,.8); border: 0; border-radius: 0 0 0 12px; font-size: 26px; }

.ranking-selection { padding: 12px; display: grid; gap: 10px; background: var(--surface); border-radius: 10px; min-width: 0; }
.ranking-selection .field { min-width: 0; margin: 0; }
.ranking-selection select { width: 100%; min-width: 0; max-width: 100%; min-height: 44px; text-overflow: ellipsis; }
.ranking-selection p { margin: 0; font-size: 12px; line-height: 1.5; }
.not-ranked { padding: 12px; background: var(--surface); border-radius: 10px; color: var(--muted); }
.ranking-friend-trigger small { font-size: 12px; }

[aria-invalid="true"] { outline: 2px solid #b42318; outline-offset: 3px; scroll-margin-top: 120px; }
.field-error { color: #b42318; font-size: 13px; line-height: 1.5; }
.field-grid > .field-error { grid-column: 1 / -1; }
.scoreboard__chase-row > .field-error { flex-basis: 100%; }
.search-row { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
.search-row input { flex: 1; width: 0; min-width: 0; }
.search-row button { flex: 0 0 auto; width: auto; margin: 0; }

.pending-score-details dt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pending-score-details dd { flex: 0 0 56px; }
.scoring-stage .button-row.wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scoring-stage .button-row.wrap > * { min-width: 0; width: 100%; }