:root{
  --bg:#000; --fg:#e9e9e9; --muted:#8a8a8a; --line:#242424;
  --accent:#fff; --card:#0b0b0b; --ok:#37d67a; --err:#ff5b5b;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{min-height:100%;background:var(--bg);color:var(--fg);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;-webkit-font-smoothing:antialiased;}
body{display:flex;justify-content:center;padding:24px 16px 40px;}
.wrap{width:100%;max-width:640px;display:flex;flex-direction:column;gap:18px;}
header{text-align:center;margin-top:8px;}
h1{font-size:26px;font-weight:700;letter-spacing:.5px;}
.sub{color:var(--muted);font-size:13px;margin-top:6px;}
.keyrow{display:flex;}
#key{width:100%;background:var(--card);border:1px solid var(--line);color:var(--fg);
  border-radius:12px;padding:12px 14px;font:inherit;font-size:14px;outline:none;}
#key:focus{border-color:#3a3a3a;}
.drop{border:1.5px dashed var(--line);border-radius:16px;background:var(--card);
  padding:38px 20px;text-align:center;transition:border-color .15s,background .15s;}
.drop.drag{border-color:var(--accent);background:#131313;}
.drop-inner{display:flex;flex-direction:column;align-items:center;gap:12px;}
.big{font-size:18px;font-weight:600;}
.small{color:var(--muted);font-size:12.5px;}
.btn{margin-top:6px;background:var(--fg);color:#000;border:0;border-radius:10px;
  padding:11px 20px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;}
.btn:hover{opacity:.88;}
.btn:active{transform:translateY(1px);}
.status{min-height:18px;font-size:13px;color:var(--muted);text-align:center;}
.results{list-style:none;display:flex;flex-direction:column;gap:8px;}
.results li{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;font-size:12.5px;display:flex;flex-direction:column;gap:3px;word-break:break-all;}
.results li .nm{color:var(--fg);font-weight:600;}
.results li a{color:var(--muted);text-decoration:none;}
.results li a:hover{color:var(--fg);text-decoration:underline;}
.results li.err{border-color:#3a1414;}
.results li.err .nm{color:var(--err);}
footer{text-align:center;margin-top:6px;}
footer a{color:var(--muted);font-size:12px;text-decoration:none;}
footer a:hover{color:var(--fg);}
@media (max-width:480px){ .drop{padding:30px 14px;} h1{font-size:22px;} }