:root {
  color-scheme: light dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --page-bg: var(--tg-theme-bg-color, #f7f8fa);
  --surface: var(--tg-theme-secondary-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #17212b);
  --muted: var(--tg-theme-hint-color, #73808c);
  --accent: var(--tg-theme-button-color, #2481cc);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --border: color-mix(in srgb, var(--muted) 22%, transparent);
  --success: #17875d;
  --danger: #c23b3b;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--page-bg);
  color: var(--text);
}

body { min-height: 100dvh; -webkit-font-smoothing: antialiased; }

main {
  width: min(100%, 480px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

.eyebrow { margin: 0 0 8px; color: var(--accent); font-size: 13px; font-weight: 700; }
h1 { margin: 0; font-size: 26px; line-height: 1.25; }
.intro { margin: 10px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.clock { margin: 36px 0 28px; }
.time { display: block; min-height: 58px; font-size: 46px; font-variant-numeric: tabular-nums; font-weight: 720; line-height: 1.2; }
.date { display: block; min-height: 24px; margin-top: 6px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.details { margin: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.details-row { min-height: 54px; display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 16px; }
.details-row + .details-row { border-top: 1px solid var(--border); }
dt, dd { margin: 0; font-size: 14px; }
dt { color: var(--muted); }
dd { min-width: 0; overflow-wrap: anywhere; text-align: right; font-weight: 650; }
.privacy { margin: 14px 0 0; border-bottom: 1px solid var(--border); color: var(--muted); }
.privacy summary { padding: 14px 0; color: var(--text); cursor: pointer; font-size: 14px; font-weight: 650; }
.privacy summary::marker { color: var(--accent); }
.privacy-content { padding: 0 0 16px; font-size: 13px; line-height: 1.7; }
.privacy-content p { margin: 0; }
.privacy-content p + p { margin-top: 8px; }
.privacy-content strong { color: var(--text); font-weight: 650; }
.privacy-content a { color: var(--accent); text-underline-offset: 3px; }
.actions { margin-top: auto; padding-top: 32px; }
.status { min-height: 46px; margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 13px; line-height: 1.6; }
.status[data-state="loading"],
.status[data-state="success"] { display: flex; align-items: center; gap: 10px; }
.status[data-state="loading"]::before,
.status[data-state="success"]::before { flex: 0 0 20px; width: 20px; height: 20px; }
.status[data-state="loading"]::before {
  content: "";
  border: 2px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: status-spin 720ms linear infinite;
}
.status[data-state="success"]::before {
  content: "\2713";
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--success);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}
.status[data-state="ready"] { color: var(--success); }
.status[data-state="success"] { color: var(--success); }
.status[data-state="error"] { color: var(--danger); }
button { width: 100%; min-height: 50px; border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-text); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; transition: opacity 160ms ease, transform 160ms ease; }
button:active:not(:disabled) { transform: translateY(1px); }
button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: 0.45; }
@keyframes status-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
  .status[data-state="loading"]::before { animation-duration: 1.5s; }
}