:root {
  color-scheme: light;
  --ink: #17201d;
  --muted: #66716d;
  --paper: #fff;
  --canvas: #f4f5f1;
  --forest: #14231f;
  --green: #2b765f;
  --orange: #f27345;
  --line: #dfe4df;
  font-family: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
}

* { box-sizing: border-box }
html { min-height: 100%; background: var(--canvas) }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--canvas) }
button, input { font: inherit }
button { cursor: pointer }
a { color: inherit }
[hidden] { display: none !important }

.shell { width: min(100%, 720px); min-height: 100vh; margin: 0 auto; background: var(--canvas) }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px 10px; color: #fff; background: var(--forest) }
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; color: #fff; text-decoration: none }
.brand-logo { display: block; flex: none; width: 42px; height: 42px; padding: 2px; border-radius: 7px; object-fit: contain; background: #fff }
.brand-title { overflow: hidden; font-size: 16px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap }
.update-tag { flex: none; max-width: 126px; overflow: hidden; padding: 5px 8px; border: 1px solid #ffffff2b; border-radius: 999px; color: #cbd4d0; background: #ffffff0d; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap }

.search-wrap { position: relative; z-index: 3; margin: 8px 12px 0 }
.search-box { display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 4px 14px; border: 1px solid #e2e6e1; border-radius: 14px; background: #fff; box-shadow: 0 5px 16px #14231f0c }
.search-box svg { flex: none; color: #78827e }
.search-box input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 15px }
.search-box input::placeholder { color: #9aa39f }

.toolbar { position: sticky; top: 0; z-index: 2; padding: 8px 12px 7px; background: #f4f5f1e8; backdrop-filter: blur(16px) }
.filter-triggers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.filter-trigger { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; min-height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; color: #4f5c56; background: #fff; font-size: 11px; font-weight: 800 }
.filter-trigger[aria-expanded="true"] { border-color: var(--forest); color: var(--forest); background: #f9fbf8 }
.filter-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.filter-trigger svg { flex: none; transition: transform .18s }
.filter-trigger[aria-expanded="true"] svg { transform: rotate(180deg) }
.inline-filter-panel { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; padding: 9px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: 0 8px 20px #14231f0d }
.filter-option { min-height: 30px; padding: 0 11px; border: 1px solid #e1e6e2; border-radius: 9px; color: #52605a; background: #f8faf8; font-size: 10px; font-weight: 750 }
.filter-option.active { border-color: var(--forest); color: #fff; background: var(--forest) }
.filter-trigger:focus-visible, .filter-option:focus-visible, .load-more:focus-visible, a:focus-visible { outline: 3px solid #d7f06c; outline-offset: 2px }

main { padding: 2px 12px 36px }
.list-head { display: flex; align-items: end; justify-content: space-between; margin: 8px 2px 9px }
.list-head h1, .list-head h2 { display: inline; margin: 0; font-size: 16px; letter-spacing: -.025em }
.list-head p { display: inline; margin: 0 0 0 8px; color: var(--muted); font-size: 10px }
.sort-label { color: var(--green); font-size: 12px; font-weight: 800 }
.events { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none }
.date-group { min-width: 0 }
.date-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 5px; padding: 0 2px }
.date-heading time { color: #27322e; font-size: 12px; font-weight: 900 }
.date-heading span { color: #8a938f; font-size: 9px }
.day-events { overflow: hidden; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; list-style: none }
.event-row { position: relative }
.event-row + .event-row { border-top: 1px solid #edf0ed }
.event-row-body { display: grid; grid-template-columns: 43px 38px minmax(0, 1fr) 12px; gap: 8px; align-items: start; width: 100%; min-height: 72px; padding: 10px 11px }
.row-time { grid-column: 1; padding-top: 2px; color: #1f2b27; font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums }
.row-time.unknown { color: #8a938f; font-size: 9px; line-height: 1.35 }
.row-session-empty { grid-column: 2 }
.session-times { grid-column: 1 / 3; display: grid; gap: 4px; padding-top: 1px }
.session-link { display: grid; grid-template-columns: 43px 38px; gap: 8px; align-items: baseline; text-decoration: none }
.session-link strong { font-size: 11px; font-variant-numeric: tabular-nums }
.session-link small { overflow: hidden; color: #76817c; font-size: 8px; text-overflow: ellipsis; white-space: nowrap }
.session-link:hover strong, .session-link:hover small { color: var(--green) }
.row-main-link { grid-column: 3 / 5; display: grid; grid-template-columns: minmax(0, 1fr) 12px; gap: 8px; min-width: 0; text-decoration: none }
.row-main { min-width: 0 }
.row-title-line { display: flex; align-items: center; gap: 8px; min-width: 0 }
.event-title { overflow: hidden; margin: 0; font-size: 15px; line-height: 1.3; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap }
.status { display: inline-flex; align-items: center; gap: 5px; flex: none; color: var(--green); font-size: 9px; font-weight: 850 }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #47a47f; box-shadow: 0 0 0 3px #47a47f17 }
.event-row.is-history .status { color: #747e79 }
.event-row.is-history .status::before { background: #a1aaa6; box-shadow: none }
.status-cancelled, .status-postponed { color: #9a4c31 }
.status-cancelled::before, .status-postponed::before { background: var(--orange) }
.event-subtitle { overflow: hidden; margin: 3px 0 0; color: #69736f; font-size: 10px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap }
.event-meta { display: flex; align-items: center; gap: 5px; overflow: hidden; margin-top: 5px; color: #4b5752; font-size: 9px; white-space: nowrap }
.event-meta svg { flex: none; color: #8a948f }
.event-meta-text { overflow: hidden; text-overflow: ellipsis }
.event-type { flex: none; color: #78817d }
.mode-exception { flex: none; padding: 2px 5px; border-radius: 5px; color: #8b4b34; background: #fff0e9; font-size: 8px; font-weight: 800 }
.row-arrow { align-self: center; color: #adb5b1; font-size: 14px }
.row-main-link:hover .event-title { color: var(--green) }
.load-more { width: 100%; min-height: 50px; margin-top: 16px; border: 1px solid #dce2dd; border-radius: 15px; color: var(--forest); background: #fff; font-size: 13px; font-weight: 850 }
.hint, .empty { margin: 10px 0; padding: 13px 14px; border: 1px solid #eadfc7; border-radius: 12px; color: #6b5b3f; background: #fff8e5; font-size: 11px }
.empty { border-color: #ced5d0; color: var(--muted); background: #fff }
.unverified-section { margin-top: 28px; padding-top: 10px; border-top: 1px solid var(--line) }
.unverified-results { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none }
.unverified-card { padding: 12px 14px; border: 1px dashed #c8d0cb; border-radius: 12px; background: #fff }
.unverified-card h3 { margin: 0; font-size: 14px }
.unverified-card a { text-underline-offset: 3px }
.unverified-card p { margin: 6px 0 0; color: var(--muted); font-size: 10px }

footer { padding: 22px 14px 28px; border-top: 1px solid var(--line); color: #7c8681; font-size: 9px; line-height: 1.6; text-align: center }
footer p { margin: 0 }
footer strong { margin-left: 5px; overflow-wrap: anywhere }
footer time { display: block }

.detail-main { padding-top: 18px }
.detail-state { margin: 0 }
.event-detail { overflow: hidden; border: 1px solid #b9cac1; border-radius: 16px; background: var(--paper); box-shadow: 0 14px 36px #173f3512 }
.detail-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, #fff 55%, #edf5f0) }
.detail-title h1 { margin: 0; font-size: 21px; line-height: 1.35 }
.detail-title .status { margin: 0 }
.detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 1px; background: var(--line) }
.detail-row { display: grid; align-content: start; gap: 4px; min-height: 74px; padding: 12px 14px; background: var(--paper) }
.detail-row-wide { grid-column: 1 / -1 }
.detail-row dt, .detail-row dd { margin: 0 }
.detail-row dt { color: #61716b; font-size: 9px; font-weight: 700 }
.detail-row dd { color: var(--ink); font-size: 12px; font-weight: 620; line-height: 1.55 }
.detail-section { margin: 0; padding: 17px 18px; border-top: 1px solid var(--line) }
.detail-section h2 { margin: 0 0 8px; color: var(--green); font-size: 14px }
.detail-section p { margin: 5px 0; color: #30413b; font-size: 12px; line-height: 1.7 }
.detail-section a, .detail-sources a { color: var(--green); text-underline-offset: 3px }
.detail-sources { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none }
.detail-sources li { padding: 10px 12px; border: 1px solid #d9e3de; border-radius: 9px; background: #f7faf8; color: #566761; font-size: 11px }
.verification-panel { border-left: 3px solid #d6a600 }
.status-unverified { color: #765400 }
.status-unverified::before { background: #d6a600 }
.home-button { flex: none; padding: 7px 10px; border: 1px solid #ffffff35; border-radius: 9px; color: #fff; background: #ffffff0d; font-size: 10px; font-weight: 750; text-decoration: none }

@media (min-width: 721px) {
  body { padding: 24px; background: #dde2dc }
  .shell { overflow: hidden; border-radius: 28px; box-shadow: 0 30px 90px #14231f28 }
}

@media (max-width: 420px) {
  .brand-logo { width: 38px; height: 38px }
  .brand-title { font-size: 14px }
  .update-tag { max-width: 88px }
  .event-row-body { grid-template-columns: 40px 35px minmax(0, 1fr) 10px; gap: 6px; padding: 9px }
  .session-link { grid-template-columns: 40px 35px; gap: 6px }
  .event-title { font-size: 14px }
  .status { font-size: 8px }
  .detail-title { display: block }
  .detail-title .status { margin-top: 10px }
  .detail-facts { grid-template-columns: 1fr }
  .detail-row { min-height: auto }
}