*{box-sizing:border-box}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  margin:0;
  background:#f6f7fb;
  color:#111;
}

header{
  padding:20px 16px;
  background:#fff;
  border-bottom:1px solid #e7e8ee;
}

h1{margin:0 0 6px 0; font-size:20px}
.sub{margin:0; color:#555; font-size:13px}

main{
  max-width:900px;
  margin:16px auto;
  padding:0 16px;
  display:grid;
  gap:14px;
}

.card{
  background:#fff;
  border:1px solid #e7e8ee;
  border-radius:12px;
  padding:14px;
}

.row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}

button{
  padding:8px 12px;
  border:1px solid #d6d7df;
  background:#fff;
  border-radius:10px;
  cursor:pointer;
}

button:hover{background:#f2f3f8}

pre{
  white-space:pre-wrap;
  background:#0f172a;
  color:#e2e8f0;
  padding:12px;
  border-radius:12px;
  overflow:auto;
}

input{
  flex:1;
  padding:10px 12px;
  border:1px solid #d6d7df;
  border-radius:10px;
}

.hint{
  color:#666;
  font-size:12px;
  margin:8px 0 0 0;
}