* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html,body { margin:0; padding:0; background:#0b0d10; color:#e8ecef; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial; }
.container { max-width:640px; margin:0 auto; padding:20px 16px 60px; }
.title { font-size:20px; font-weight:700; margin:6px 4px 16px; }

.card { background:#12161a; border:1px solid #1f2630; border-radius:16px; padding:14px; }
.label { display:block; font-size:13px; color:#98a2ad; margin-bottom:8px; }

.input-row { display:flex; gap:10px; }
.input {
  flex:1; height:44px; padding:0 12px; font-size:16px;
  background:#0f1317; border:1px solid #273040; color:#e8ecef; border-radius:12px; outline:none;
}
.input:focus { border-color:#3a8bff; box-shadow:0 0 0 3px rgba(58,139,255,.25); }
.btn { height:44px; padding:0 16px; border:0; border-radius:12px; font-size:16px; background:#3a8bff; color:#fff; font-weight:600; }
.btn:disabled { opacity:.6; }

.hint { margin-top:8px; color:#75808c; font-size:12px; }
.result { margin-top:16px; }

.list { margin:0; padding:0; list-style:none; background:#12161a; border:1px solid #1f2630; border-radius:16px; overflow:hidden; }
.item { display:flex; justify-content:space-between; padding:12px 14px; border-top:1px solid #1a212c; }
.item:first-child{ border-top:0; }
.key { color:#98a2ad; font-size:14px; }
.val { color:#e8ecef; font-size:15px; font-weight:600; }
.empty { padding:16px; color:#98a2ad; font-size:14px; text-align:center; }

.debug { margin-top:16px; }
.debug-pre {
  background:#0c0f0c; color:#aef3ae; padding:12px; border-radius:12px; border:1px solid #234;
  overflow:auto; white-space:pre-wrap; word-break:break-all; font-size:13px;
}