/* 手机端跟随系统白天/夜间主题 */
@media only screen and (max-width: 820px) and (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #ffffff;
    --background: #ffffff;
    --surface: #f6f6f6;
    --panel: #f6f6f6;
    --card: #f6f6f6;
    --text: #111111;
    --muted: #666666;
    --line: rgba(0, 0, 0, 0.16);
  }

  html,
  body,
  main,
  header,
  nav,
  section,
  footer,
  .work-page,
  .works-page {
    background-color: #ffffff !important;
    color: #111111 !important;
  }

  body::before,
  body::after {
    opacity: 0.04 !important;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li,
  small,
  label,
  #work-title,
  #work-summary,
  #work-body,
  #work-category,
  #work-services,
  #work-year {
    color: #111111 !important;
  }

  .project-card,
  [data-contact-channel],
  .work-navigation,
  .work-navigation a,
  .work-card,
  .works-card {
    background-color: #f6f6f6 !important;
    color: #111111 !important;
    border-color: rgba(0, 0, 0, 0.16) !important;
  }

  .project-card h2,
  .project-card h3,
  .project-card p,
  [data-contact-channel] h2,
  [data-contact-channel] h3,
  [data-contact-channel] p {
    color: #111111 !important;
  }

  [data-contact-modal],
  .contact-modal,
  .contact-panel,
  .contact-dialog {
    background-color: rgba(255, 255, 255, 0.98) !important;
    color: #111111 !important;
  }

  button,
  .menu-button,
  .contact-close {
    color: #111111 !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
  }

  input,
  textarea,
  select {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
  }
}

@media only screen and (max-width: 820px) and (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}