/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */
/* Hallmark · component: site color system · genre: modern-minimal · anchor hue: legacy mint green · state colors: legacy parity */
:root {
  --site-brand: #16BAAA;
  --site-brand-strong: #0B6F66;
  --site-brand-hover: #45C8BB;
  --site-brand-soft: #E8FAF8;
  --site-brand-rule: #A7E4DE;
  --site-on-brand: #FFFFFF;
  --site-on-dark: #FFFFFF;
  --site-topbar-ink: #4B5553;
  --site-topbar-rule: #DCE8E6;
  --site-motion-fast: 150ms;
  --site-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --brand: var(--site-brand);
  --brand-dark: var(--site-brand-strong);
  --accent: var(--site-brand-soft);

  --home-search-accent: var(--site-brand);
  --home-search-accent-strong: var(--site-brand-hover);
  --home-search-accent-ink: var(--site-on-brand);
  --home-search-soft: var(--site-brand-soft);

  --search-results-accent: var(--site-brand);
  --search-results-accent-strong: var(--site-brand-strong);
  --search-results-accent-ink: var(--site-on-brand);
  --search-results-focus: var(--site-brand-strong);
  --search-results-soft: var(--site-brand-soft);

  --account-accent: var(--site-brand);
  --account-accent-deep: var(--site-brand-strong);
  --account-accent-hover: var(--site-brand-hover);
  --account-accent-soft: var(--site-brand-soft);
  --account-accent-ink: var(--site-on-brand);
  --account-focus: var(--site-brand-strong);

  --admin-primary: var(--site-brand);
  --admin-primary-strong: var(--site-brand-strong);
  --admin-on-primary: var(--site-on-brand);
}

html,
body {
  overflow-x: clip;
}

html[data-admin-theme="dark"] {
  --admin-primary: var(--site-brand);
  --admin-primary-strong: var(--site-brand-rule);
  --admin-on-primary: var(--site-on-brand);
}

.calculation-tool {
  --color-accent: var(--site-brand);
  --color-accent-ink: var(--site-on-brand);
  --color-focus: var(--site-brand-strong);
  --color-paper-2: var(--site-brand-soft);
}

.imghost-tool {
  --imghost-accent: var(--site-brand);
  --imghost-accent-soft: var(--site-brand-soft);
  --imghost-accent-ink: var(--site-on-brand);
  --imghost-focus: var(--site-brand-strong);
}

input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  accent-color: var(--site-brand);
}

.temp-mail-home-icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: .5rem;
  background: var(--site-brand-soft);
  color: var(--site-brand-strong);
  font-size: 1.5rem;
  font-weight: 700;
}

/* Hallmark · component: account status bar · genre: modern-minimal · theme: legacy mint
 * states: default · hover · focus · active · disabled · authenticated · guest
 * contrast: pass (40–41) · responsive: pass (34, 49)
 */
.top {
  padding-block: 0;
}

.legacy-topbar {
  display: flex;
  min-width: 0;
  min-height: 34px;
  gap: .5rem;
  align-items: center;
  justify-content: space-between;
}

#legacy-date {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--site-topbar-ink);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legacy-account-status {
  display: flex;
  min-width: 0;
  margin-inline-start: auto;
  gap: .5rem;
  align-items: center;
  justify-content: flex-end;
  color: var(--site-topbar-ink);
  font-size: inherit;
  line-height: 1;
}

.legacy-account-status a {
  display: inline-flex;
  min-width: 0;
  min-height: 34px;
  align-items: center;
  color: var(--site-topbar-ink);
  white-space: nowrap;
  transition: color var(--site-motion-fast) var(--site-ease-out);
}

.legacy-account-status a:focus-visible {
  outline: 2px solid var(--site-brand-strong);
  outline-offset: 1px;
  border-radius: 2px;
}

.legacy-account-status a:active {
  color: var(--site-brand-strong);
}

.legacy-account-status a[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

.legacy-account-username {
  max-width: 4.5rem;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
}

.legacy-account-balance {
  gap: .25rem;
  padding-inline-start: .5rem;
  border-inline-start: 1px solid var(--site-topbar-rule);
}

.legacy-account-balance span {
  font-size: 0;
}

.legacy-account-balance span::after {
  content: "余额";
  font-size: .75rem;
}

.legacy-account-balance strong {
  color: var(--site-brand-strong);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.legacy-account-separator {
  width: 1px;
  height: .875rem;
  background: var(--site-topbar-rule);
}

.account-button--primary,
.home-search-mode[aria-selected="true"],
.home-search-control button,
.browser-actions button.primary,
.button-row .primary,
.dialog-actions .primary,
.education-tags a:hover,
.education-tags .is-current,
.lifestyle-tabs button.is-current,
.health-category-list a:hover,
.health-category-list a.active,
.muscle-buttons button.active {
  border-color: var(--site-brand);
  background: var(--site-brand);
  color: var(--site-on-brand);
}

.structured-hint,
.browser-tool-intro,
.recreation-note,
.health-detail h2 {
  border-color: var(--site-brand);
}

.education-index a:hover,
.alphabet-grid button:hover,
.multiplication-table button:hover,
.multiplication-table button.is-highlight,
.eyesight-cell:hover,
.eyesight-cell:focus,
.quiz-options label:has(input:checked),
.webmaster-upload:hover,
.webmaster-link-list a:hover,
.font-result:hover,
.reference-row:hover,
.color-card:hover {
  border-color: var(--site-brand);
  background: var(--site-brand-soft);
  color: var(--site-brand-strong);
}

.education-surname-group h2,
.education-quote p,
.translation-languages button,
.world-clock-card time,
.http-code-item b,
.typing-stats b,
.alphabet-grid strong,
.blood-result strong,
.lifestyle-summary,
.lifestyle-tabs button,
.solar-term-grid b,
.necktie-guide h2,
.name-result-grid b,
.name-result-grid button,
.hot-list li > b,
.recreation-status b,
.mind-steps span.active,
.mind-reveal b,
.mind-symbol,
.break-display time,
.quiz-heading strong,
.health-more,
.health-tag {
  color: var(--site-brand-strong);
}

.name-result-grid button,
.typing-target .is-current,
.mind-steps span.active,
.quiz-options label:has(input:checked) {
  border-color: var(--site-brand);
}

.mind-steps span.active,
.quiz-progress span {
  background: var(--site-brand);
}

.refresh-window-head span,
.world-clock-card.is-primary,
.mind-reveal,
.typing-input:focus,
.health-tag,
.health-clock {
  background: var(--site-brand-soft);
}

.typing-input:focus,
.browser-field input:focus,
.browser-field textarea:focus,
.browser-field select:focus,
.tool-form textarea:focus,
.tool-form input:focus,
.tool-form select:focus,
dialog textarea:focus,
dialog input:focus {
  border-color: var(--site-brand);
  outline-color: var(--site-brand-strong);
}

.admin-brand-mark,
.admin-login-brand > span,
.admin-login-mark,
.admin-chart-column i,
.admin-engine-icon.engine-algorithm {
  background: var(--site-brand);
  color: var(--site-on-brand);
}

.admin-primary-button,
.admin-login-submit {
  background: var(--site-brand);
  color: var(--site-on-brand);
}

.tone-indigo .admin-stat-icon,
.admin-engine-badge.engine-algorithm {
  border-color: var(--site-brand-rule);
  background: var(--site-brand-soft);
  color: var(--site-brand-strong);
}

html[data-admin-theme="dark"] .tone-indigo .admin-stat-icon,
html[data-admin-theme="dark"] .admin-engine-badge.engine-algorithm {
  border-color: var(--site-brand-strong);
  background: color-mix(in srgb, var(--site-brand) 18%, transparent);
  color: var(--site-brand-rule);
}

@media (hover: hover) and (pointer: fine) {
  .legacy-account-status a:hover {
    color: var(--site-brand-strong);
  }

  .account-button.account-button--primary:not([disabled]):hover,
  .home-search-mode[aria-selected="true"]:hover,
  .home-search-control button:hover,
  .admin-primary-button:hover,
  .admin-login-submit:hover {
    border-color: var(--site-brand-hover);
    background: var(--site-brand-hover);
    color: var(--site-on-dark);
  }
}

@media (min-width: 40rem) {
  .legacy-topbar {
    gap: 1rem;
  }

  .legacy-account-status {
    gap: .75rem;
  }

  .legacy-account-username {
    max-width: 12rem;
  }

  .legacy-account-balance {
    gap: .5rem;
    padding-inline-start: .75rem;
  }

  .legacy-account-balance span {
    font-size: inherit;
  }

  .legacy-account-balance span::after {
    content: none;
  }
}

@media (pointer: coarse) {
  .legacy-account-status a {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .legacy-account-status a {
    transition-duration: 0ms;
  }
}