:root {
  --ref-bg: #121212;
  --ref-header: #1a1a1a;
  --ref-surface: #242424;
  --ref-surface-2: #1f1f1f;
  --ref-line: #2d3038;
  --ref-text: #ffffff;
  --ref-muted: #868d9a;
  --ref-accent: #00d6ca;
  --ref-danger: #ff5364;
}

html { background: var(--ref-bg); color-scheme: dark; }
html, body.ref-page {
  width: 100%; min-height: 100%; margin: 0; background: var(--ref-bg); color: var(--ref-text);
  font-family: "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.ref-page { max-width: 828px; margin: 0 auto; overflow-x: hidden; }
.ref-page *, .ref-page *::before, .ref-page *::after { box-sizing: border-box; }
.ref-page a, .ref-page a:hover, .ref-page a:focus, .ref-page a:visited { color: inherit; text-decoration: none; }
.ref-page button, .ref-page input, .ref-page textarea, .ref-page select { font: inherit; }
.ref-page button { appearance: none; }

.ref-header {
  position: sticky; z-index: 30; top: 0; display: grid; grid-template-columns: 48px 1fr 48px;
  align-items: center; width: 100%; height: 46px; background: var(--ref-header);
}
.ref-header-title { overflow: hidden; color: #fff; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 500; }
.ref-back, .ref-header-action {
  display: flex; align-items: center; justify-content: center; width: 48px; height: 46px;
  border: 0; background: transparent; color: var(--ref-muted); cursor: pointer;
}
.ref-back svg, .ref-header-action svg { width: 22px; height: 22px; }
.ref-header-action { font-size: 12px; }

.ref-content { padding: 22px 15px 34px; }
.ref-section-title { margin: 0 0 8px; color: #fff; font-size: 15px; font-weight: 600; }
.ref-section-copy { margin: -3px 0 13px; color: var(--ref-muted); font-size: 10px; line-height: 1.45; }
.ref-form-group { margin: 0 0 18px; }
.ref-form-group label { display: block; margin: 0 0 7px; color: #fff; font-size: 12px; }
.ref-input, .ref-select, .ref-textarea {
  display: block; width: 100%; min-height: 42px; padding: 0 14px; border: 0; border-radius: 0;
  outline: 0; background: var(--ref-surface); color: #fff; font-size: 12px;
}
.ref-textarea { min-height: 90px; padding-top: 12px; resize: vertical; }
.ref-input::placeholder, .ref-textarea::placeholder { color: var(--ref-muted); opacity: 1; }
.ref-input:focus, .ref-select:focus, .ref-textarea:focus { box-shadow: inset 0 0 0 1px rgba(0,214,202,.75); }
.ref-password { position: relative; }
.ref-password .ref-input { padding-right: 44px; }
.ref-eye {
  position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 0; background: transparent; color: var(--ref-muted); cursor: pointer;
}
.ref-eye svg { width: 18px; height: 18px; }
.ref-hint { margin: 7px 0 0; color: var(--ref-muted); font-size: 9px; line-height: 1.45; }
.ref-hint.is-danger { color: var(--ref-danger); }
.ref-primary {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 43px; margin-top: 24px;
  border: 0; border-radius: 2px; background: var(--ref-accent); color: #fff; font-size: 13px; font-weight: 500; cursor: pointer;
}
.ref-primary:active { filter: brightness(.9); }

.ref-list { width: 100%; }
.ref-row {
  display: flex; align-items: center; min-height: 53px; padding: 0 15px; border-bottom: 1px solid var(--ref-line);
  background: var(--ref-bg); color: #fff;
}
.ref-row-icon { display: flex; flex: 0 0 27px; align-items: center; justify-content: flex-start; }
.ref-row-icon img { width: 19px; height: 19px; border-radius: 50%; object-fit: cover; }
.ref-row-main { flex: 1; min-width: 0; font-size: 12px; }
.ref-row-sub { color: var(--ref-muted); font-size: 10px; }
.ref-row-value { margin-left: 10px; color: var(--ref-muted); font-size: 10px; }
.ref-row-check { width: 19px; height: 19px; margin-left: 12px; color: var(--ref-accent); }
.ref-chevron { width: 17px; height: 17px; margin-left: 10px; color: var(--ref-muted); }

.ref-card { background: var(--ref-surface); }
.ref-empty { padding: 72px 20px; color: var(--ref-muted); text-align: center; font-size: 12px; }
.ref-article { color: #d8dbe1; font-size: 11px; line-height: 1.62; }
.ref-article h2 { margin: 0 0 18px; color: #fff; text-align: center; font-size: 17px; }
.ref-article p { margin: 0 0 14px; }

.layui-layer-msg { max-width: calc(100vw - 40px) !important; border: 0 !important; background: rgba(0,0,0,.88) !important; color: #fff !important; }

@media (min-width: 829px) {
  body.ref-page { min-height: 100vh; border-right: 1px solid #222; border-left: 1px solid #222; }
}

/* Keep taps responsive without triggering iOS/Android double-tap page zoom. */
html { touch-action: manipulation; }
a, button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"] { touch-action: manipulation; }