*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#eef2f7;color:#111827}
main{max-width:720px;margin:0 auto;padding:16px}
.card{background:#fff;border-radius:18px;padding:18px;box-shadow:0 8px 24px rgba(15,23,42,.12)}
h1{margin:0 0 8px;font-size:1.7rem}
h2{margin:0 0 6px;font-size:1.4rem}
p{margin:0 0 12px}
label{display:block;margin:14px 0 6px;font-weight:700}
input{width:100%;font-size:1.6rem;padding:14px;border:2px solid #cbd5e1;border-radius:12px}
button{width:100%;margin-top:14px;padding:14px;border:0;border-radius:12px;background:#2563eb;color:#fff;font-size:1.1rem;font-weight:800}
button.secondary{width:auto;margin-top:0;background:#64748b;font-size:.95rem;padding:10px 12px}
.mode-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.mode-row button{margin:0;background:#94a3b8}
.mode-row button.active{background:#2563eb}
.topbar{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.message{color:#475569}
.result{white-space:pre-wrap;min-height:96px;margin:18px 0;padding:18px;border-radius:14px;background:#e2e8f0;color:#0f172a;font-size:1.6rem;font-weight:900;text-align:center}
.result.success{background:#dcfce7;color:#14532d}
.result.error{background:#fee2e2;color:#7f1d1d}
.item-card,.history-card{margin-top:18px;padding:16px;border-radius:14px;background:#f8fafc;border:1px solid #cbd5e1}
.item-card p{color:#475569}
dl{display:grid;grid-template-columns:150px 1fr;gap:8px 12px;margin:16px 0 0}
dt{font-weight:800;color:#334155}
dd{margin:0;overflow-wrap:anywhere}
.attention-field{display:inline-block;padding:4px 8px;border-radius:8px;background:#fef3c7;color:#78350f;font-weight:900}
.history-card h2{margin-bottom:12px}
.history-row{padding:10px 12px;border-radius:10px;margin-bottom:8px;background:#e2e8f0}
.history-row.success{background:#dcfce7}
.history-row.error{background:#fee2e2}
.history-main{font-weight:900;overflow-wrap:anywhere}
.history-detail{margin-top:3px;color:#475569;font-size:.95rem;overflow-wrap:anywhere}
@media(max-width:520px){
  .topbar{display:block}
  button.secondary{width:100%;margin-top:10px}
  dl{grid-template-columns:1fr;gap:2px}
  dd{margin-bottom:10px}
}