:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#111827;
  --ok:#bde2ff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#f3f4f6;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.wrap{max-width:840px;margin:0 auto;padding:16px}
.header{background:var(--bg);border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.05);padding:20px}
.header h1{margin:0 0 12px 0;font-size:22px}
.form{display:flex;gap:10px;flex-wrap:wrap}
.form input{flex:1;min-width:220px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:14px}
.form button{padding:12px 18px;border:0;border-radius:10px;background:var(--ok);color: black;font-weight:600;cursor:pointer}
.form button:hover{filter:brightness(1.05)}
.note{font-size:12px;color:var(--muted);margin-top:6px}

.result{margin-top:16px}
.placeholder,.loading,.error,.empty{
  background:var(--bg);border-radius:14px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,.05)
}
.error{color:#b91c1c}

.card{background:var(--bg);border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.list-head{padding:14px 16px;border-bottom:1px solid var(--line);font-weight:600}
.status-list{list-style:none;margin:0;padding:0}
.status-item{
  display:grid;grid-template-columns:180px 1fr;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--line)
}
.status-item:last-child{border-bottom:none}
.s-time{font-size:12px;color:var(--muted)}
.s-text{font-size:14px;line-height:1.4}

@media (max-width:640px){
  .wrap{padding:12px}
  .header h1{font-size:18px}
  .status-item{grid-template-columns:1fr;gap:6px}
  .s-time{order:2}
  .s-text{order:1}
}