body { font-family: system-ui, Arial, sans-serif; background:#f5f5f5; margin:0; }
.wrap { max-width: 920px; margin: 24px auto; padding: 0 14px; }
.header { margin-bottom: 12px; }
.card { background:#fff; border-radius: 14px; padding: 16px; box-shadow: 0 8px 18px rgba(0,0,0,0.06); }
.row { display:flex; flex-direction:column; gap:6px; margin-bottom: 12px; }
label { font-size: 13px; color:#333; }
input { padding: 12px; border:1px solid #ddd; border-radius: 10px; font-size: 15px; }
.primary { width: 100%; padding: 12px; border:0; border-radius: 10px; font-size: 16px; cursor:pointer; background:#111; color:#fff; }
.primary:disabled { opacity: .6; cursor: not-allowed; }
.captchaRow { display:flex; gap: 12px; align-items:flex-end; margin-bottom: 12px; }
.grow { flex: 1; display:flex; flex-direction:column; gap:6px; }
.captchaBox { display:flex; gap:10px; align-items:center; }
#captchaImg { height: 44px; border:1px solid #ddd; border-radius: 10px; background:#fafafa; }
#refreshBtn { height:44px; width:44px; border-radius: 10px; border:1px solid #ddd; background:#fff; cursor:pointer; }
.msg { margin-top: 10px; color:#b00020; min-height: 18px; }
.result { margin-top: 16px; }
.panel { background:#fff; border-radius: 14px; padding: 16px; box-shadow: 0 8px 18px rgba(0,0,0,0.06); }
.grid { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
@media (max-width: 720px){ .grid { grid-template-columns: 1fr; } }
.table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.table th, .table td { border:1px solid #eee; padding: 10px; font-size: 14px; }
.table th { background:#fafafa; text-align:left; }
.badge { display:inline-block; padding: 4px 10px; border-radius: 999px; border:1px solid #ddd; font-size: 12px; }


.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.5);
}

.popup-box {
  background: white;
  padding: 20px 30px;
  border-radius: 8px;
  text-align: center;
}