:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light dark;
  --bg: var(--tg-theme-bg-color, #f5f5f7);
  --surface: var(--tg-theme-secondary-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #161616);
  --muted: var(--tg-theme-hint-color, #707070);
  --link: var(--tg-theme-link-color, #2476d3);
  --button: var(--tg-theme-button-color, #2481cc);
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --border: color-mix(in srgb, var(--text) 12%, transparent);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { padding-bottom: calc(76px + var(--safe-bottom)); }
button, input { font: inherit; }
button { cursor: pointer; }

.app-shell { max-width: 720px; margin: 0 auto; padding: 18px 16px 32px; }
.app-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
h1 { font-size: 26px; line-height: 1.1; margin: 0 0 4px; }
h2 { font-size: 20px; margin: 0 0 12px; }
h3 { font-size: 17px; margin: 0; }
p { line-height: 1.4; }
.muted { color: var(--muted); margin: 0; }
.platform-badge { font-size: 12px; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 5px 8px; }

.notice { background: var(--surface); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--border); }
.notice.error { border-color: color-mix(in srgb, #d33 35%, transparent); }
.content { display: grid; gap: 12px; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px; }
.card-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.card-title { margin: 0; font-size: 17px; font-weight: 650; }
.card-meta { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

.primary, .secondary, .quiet, .danger, .search-result button {
  border: 0;
  border-radius: 12px;
  min-height: 42px;
  padding: 9px 13px;
}
.primary { background: var(--button); color: var(--button-text); }
.secondary { background: color-mix(in srgb, var(--button) 12%, var(--surface)); color: var(--text); }
.quiet { background: transparent; color: var(--link); }
.danger { background: transparent; color: #c33; }

.search-box { display: flex; gap: 8px; }
.search-box input, .date-input {
  width: 100%; min-height: 46px; border-radius: 13px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); padding: 10px 12px;
}
.search-box .primary { flex: 0 0 auto; }
.search-results { display: grid; gap: 9px; }
.search-result { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px; }
.search-result p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.empty { text-align: center; padding: 28px 18px; color: var(--muted); }
.empty.no-match { color: #c33; }
.section-label { margin: 12px 2px 2px; font-size: 14px; color: var(--muted); font-weight: 600; }

.pin-label { display: inline-flex; align-items: center; gap: 0.38em; }
.pin-icon {
  display: inline-block;
  width: 0.82em;
  height: 1em;
  flex: 0 0 auto;
  background: #2fa84f;
  clip-path: polygon(30% 0, 70% 0, 70% 14%, 64% 14%, 64% 46%, 82% 62%, 82% 70%, 55% 70%, 52% 100%, 48% 100%, 45% 70%, 18% 70%, 18% 62%, 36% 46%, 36% 14%, 30% 14%);
  transform: rotate(-35deg);
  transform-origin: center;
}

.bottom-nav {
  position: fixed; z-index: 20; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 7px max(8px, env(safe-area-inset-right)) calc(7px + var(--safe-bottom)) max(8px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(14px);
}
.bottom-nav button {
  border: 0; background: transparent; color: var(--muted); min-height: 52px;
  display: grid; place-items: center; align-content: center; gap: 2px; font-size: 12px;
}
.bottom-nav button span:first-child { font-size: 20px; }
.bottom-nav button .pin-icon { width: 15px; height: 18px; margin: 1px auto; }
.bottom-nav button.active { color: var(--link); font-weight: 650; }

.sheet { border: 0; padding: 0; width: min(92vw, 520px); border-radius: 18px; background: var(--surface); color: var(--text); }
.sheet::backdrop { background: rgb(0 0 0 / 0.38); }
.sheet-card { position: relative; padding: 20px; }
.sheet-close { position: absolute; top: 8px; right: 8px; border: 0; background: transparent; color: var(--muted); font-size: 28px; line-height: 1; }

@media (prefers-reduced-motion: no-preference) {
  .card, .search-result { transition: transform 120ms ease; }
  button:active { transform: scale(0.98); }
}