/* qa686: restrained visual polish without changing the approved layout. */
:root {
  --visual-ink: #20242a;
  --visual-muted: #667085;
  --visual-line: #e4e7ec;
  --visual-surface: #ffffff;
  --visual-red: #df3a30;
  --visual-red-dark: #c92f27;
}

body:not(.ops-mode) {
  color: var(--visual-ink);
  font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Hiragino Sans", Arial, sans-serif;
  letter-spacing: 0;
}

body:not(.ops-mode) button,
body:not(.ops-mode) input,
body:not(.ops-mode) select,
body:not(.ops-mode) textarea {
  font-family: inherit;
  letter-spacing: 0;
}

body:not(.ops-mode) .hero h1 {
  font-weight: 800;
  letter-spacing: 0;
}

body:not(.ops-mode) .planner {
  border: 1px solid rgba(255, 255, 255, 0.58);
}

body:not(.ops-mode) .playguide-main button {
  font-weight: 750;
}

body:not(.ops-mode) .event-card:is(.compact-card, .featured-card) {
  border-color: var(--visual-line);
  background: var(--visual-surface);
  box-shadow: 0 5px 16px rgba(16, 24, 40, 0.065);
}

body:not(.ops-mode) .event-card:is(.compact-card, .featured-card) .event-title-row h3 {
  color: var(--visual-ink);
  font-weight: 800;
  letter-spacing: 0;
}

body:not(.ops-mode) .event-card:is(.compact-card, .featured-card) .category-pill {
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.94);
  color: #28313c;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.09);
  backdrop-filter: blur(6px);
}

body:not(.ops-mode) .event-card:is(.compact-card, .featured-card) .date-badge {
  border: 1px solid rgba(255, 255, 255, 0.66);
  background: rgba(237, 250, 247, 0.95);
  color: #176b5c;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
  backdrop-filter: blur(6px);
}

body:not(.ops-mode) .event-card:is(.compact-card, .featured-card) .detail-button,
body:not(.ops-mode) .event-card:is(.compact-card, .featured-card) .detail-button.action-safe,
body:not(.ops-mode) .event-card:is(.compact-card, .featured-card) .detail-button.action-ready,
body:not(.ops-mode) .event-card:is(.compact-card, .featured-card) .detail-button.action-info,
body:not(.ops-mode) .event-card:is(.compact-card, .featured-card) .detail-button.action-notice,
body:not(.ops-mode) .event-card:is(.compact-card, .featured-card) .detail-button.action-review,
body:not(.ops-mode) .event-card:is(.compact-card, .featured-card) .detail-button.action-watch,
body:not(.ops-mode) .event-card:is(.compact-card, .featured-card) .detail-button.action-risk {
  border-color: var(--visual-red);
  background: var(--visual-red);
  color: #ffffff;
  font-weight: 800;
  box-shadow: none;
}

body:not(.ops-mode) .event-card:is(.compact-card, .featured-card) .detail-button:hover {
  border-color: var(--visual-red-dark);
  background: var(--visual-red-dark);
}

body:not(.ops-mode) .month-card.active {
  border-color: var(--visual-red);
  box-shadow: 0 0 0 1px var(--visual-red);
}

@media (max-width: 760px) {
  body:not(.ops-mode) .event-card:is(.compact-card, .featured-card) {
    position: relative;
    transition: transform 140ms ease, box-shadow 140ms ease;
  }

  body:not(.ops-mode) .event-card:is(.compact-card, .featured-card):active {
    transform: scale(0.985);
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
  }

  body:not(.ops-mode) .event-card:is(.compact-card, .featured-card) .event-thumb {
    overflow: hidden;
    border-radius: 6px 6px 0 0;
    background-color: #eef1f4;
  }

  body:not(.ops-mode) .event-card:is(.compact-card, .featured-card) .save-button {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 4;
    border: 1px solid rgba(255, 255, 255, 0.76);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.11);
    backdrop-filter: blur(6px);
  }

  body:not(.ops-mode) .event-card:is(.compact-card, .featured-card) .event-title-row {
    display: block;
  }

  body:not(.ops-mode) .event-card:is(.compact-card, .featured-card) .event-title-row > div {
    width: 100%;
    min-width: 0;
  }

  body:not(.ops-mode) .event-card:is(.compact-card, .featured-card) .event-title-row h3 {
    width: 100%;
  }

  body:not(.ops-mode) .event-card:is(.compact-card, .featured-card) .card-access-strip strong {
    color: #495463;
    font-weight: 700;
  }

  body:not(.ops-mode) .event-card:is(.compact-card, .featured-card) .card-actions strong {
    color: #475467;
    font-weight: 750;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.ops-mode) .event-card:is(.compact-card, .featured-card) {
    transition: none;
  }
}