@charset "UTF-8";
:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --background: #f5f5f7;
  --surface: #fff;
  --text: #1d1d1f;
  --muted: #68686e;
  --separator: #e8e8ed;
  --blue: #0066d6;
  --blue-hover: #005bc2;
  --blue-soft: #eaf2ff;
  --error: #b42318;
  --success: #216637;
  color: var(--text);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; }
.page { width: min(100%, 464px); margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 24px max(32px, env(safe-area-inset-bottom)); }
.page-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; }
.brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; }
.header-note { color: var(--muted); font-size: 12px; }
.hero { margin: 48px 0 36px; text-align: center; }
.app-icon { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 24px; border: 1px solid #fff; border-radius: 20px; background: var(--surface); color: var(--blue); box-shadow: 0 5px 18px #1d1d1f06; }
h1 { margin: 0; font-size: 36px; font-weight: 650; letter-spacing: -.035em; line-height: 1.25; }
.intro { margin: 12px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.section-label { padding: 0 16px 10px; color: var(--muted); font-size: 12px; }
.input-group { background: var(--surface); border: 1px solid #ededf0; border-radius: 18px; overflow: hidden; }
.input-row { position: relative; display: flex; align-items: center; min-height: 64px; padding: 0 16px; gap: 12px; }
.input-row + .input-row::before { position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--separator); content: ""; }
.input-row label { flex: 0 0 56px; font-size: 15px; font-weight: 500; }
input, textarea, button { font: inherit; }
input { min-width: 0; width: 100%; height: 54px; padding: 0; color: var(--text); background: transparent; border: 0; border-radius: 6px; font-size: 16px; }
input::placeholder { color: var(--muted); opacity: 1; }
input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
button:focus-visible, a:focus-visible, textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
button { min-height: 48px; border: 0; border-radius: 14px; cursor: pointer; touch-action: manipulation; transition: background-color 180ms ease, transform 180ms ease, opacity 180ms ease; }
button:active:not(:disabled) { transform: scale(.985); }
.reveal { flex-shrink: 0; min-width: 44px; min-height: 44px; margin-right: -6px; padding: 0 7px; border-radius: 8px; background: transparent; color: var(--blue); font-size: 13px; }
.primary, .secondary { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 54px; padding: 14px 20px; font-size: 16px; font-weight: 600; }
.primary { margin-top: 24px; background: var(--blue); color: #fff; }
.secondary { background: var(--blue-soft); color: var(--blue); }
button:disabled { opacity: .5; cursor: default; }
.field-note { margin: 11px 16px 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.status { margin: 14px 4px 0; min-height: 40px; color: var(--muted); font-size: 13px; line-height: 1.7; text-align: center; overflow-wrap: anywhere; }
.status[data-state="error"] { color: var(--error); }
.status[data-state="success"] { color: var(--success); }
.result-card { margin-top: 12px; padding: 22px; border: 1px solid #ededf0; border-radius: 20px; background: var(--surface); animation: appear 220ms ease-out; }
.result-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
h2 { margin: 0; font-size: 17px; font-weight: 600; }
.time-badge { flex-shrink: 0; padding: 5px 9px; border-radius: 7px; background: var(--background); color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.result-intro, .hint { color: var(--muted); font-size: 12px; line-height: 1.7; }
.result-intro { margin: 10px 0 16px; }
textarea { display: block; width: 100%; min-height: 92px; margin: 0 0 16px; padding: 12px; border: 1px solid var(--separator); border-radius: 10px; background: #fafafa; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; resize: vertical; }
.hint { margin: 12px 0 0; text-align: center; }
.notice-card { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 16px 10px; padding: 22px 20px; border: 1px solid #ededf0; border-radius: 18px; background: var(--surface); }
.notice-number { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--background); color: var(--muted); font-size: 12px; font-weight: 600; }
.notice-card p { margin: 0; font-size: 13px; line-height: 1.7; }
footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; color: var(--muted); font-size: 11px; line-height: 1.7; }
[hidden] { display: none !important; }
@media (hover: hover) { .primary:hover:not(:disabled) { background: var(--blue-hover); } .secondary:hover, .reveal:hover { background: #dceaff; } }
@media (min-width: 768px) { .page { padding-top: 48px; } .hero { margin-top: 64px; } }
@media (max-width: 359px) { .page { padding-right: 18px; padding-left: 18px; } h1 { font-size: 32px; } .input-row { gap: 8px; } .input-row label { flex-basis: 48px; } }
@keyframes appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }