:root {
  --navy: #002b54;
  --teal: #009aa6;
  --teal-dark: #007a84;
  --border: #e2e8f0;
  --muted: #64748b;
  --text: #1e293b;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: #ffffff;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px; }

.page { max-width: 640px; margin: 0 auto; padding: 40px 20px 32px; }

hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }

/* ブランド */
.brand { display: flex; align-items: center; justify-content: center; gap: 12px; }
.brand img { width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(0, 43, 84, 0.08); }
.brand-name { font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: -0.01em; }

/* カード */
.card {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.card-head { display: flex; align-items: center; gap: 16px; }
.icon { flex: 0 0 44px; display: block; }
.title { font-size: clamp(18px, 4.6vw, 22px); font-weight: 700; color: var(--navy); line-height: 1.4; }

/* 状態表示（状態ごとに出し分け） */
[data-only] { display: none; }
[data-state="idle"] [data-only~="idle"],
[data-state="wait"] [data-only~="wait"],
[data-state="done"] [data-only~="done"] { display: revert; }
[data-state="idle"] svg[data-only~="idle"],
[data-state="wait"] svg[data-only~="wait"],
[data-state="done"] svg[data-only~="done"] { display: block; }

.status {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--muted);
  overflow: hidden;
}
.status-text { font-variant-numeric: tabular-nums; }
.bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--border); }
.bar-fill { display: block; width: 0; height: 100%; background: var(--teal); transition: width 1s linear; }

.btn {
  align-self: flex-start;
  padding: 12px 28px;
  border-radius: 12px;
  background: var(--navy);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.2s;
}
.btn:hover { transform: translateY(-2px); }
[data-state="idle"] .btn[data-only~="idle"] { display: inline-block; }

/* 補足 */
.lead { margin-top: 20px; text-align: center; text-wrap: balance; word-break: auto-phrase; font-size: 14px; color: var(--text); }
.again { text-align: center; font-size: 14px; }
.again a { color: var(--teal-dark); text-decoration: none; }
.again a:hover { text-decoration: underline; }
.note { margin-top: 16px; text-align: center; text-wrap: balance; word-break: auto-phrase; font-size: 12.5px; color: var(--muted); }
.foot { margin-top: 28px; text-align: center; font-size: 12px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .btn, .bar-fill { transition: none; }
  .btn:hover { transform: none; }
}