body {
  margin:0;
  font-family:Poppins,sans-serif;
  background:linear-gradient(135deg,#667eea,#764ba2);
  transition: all .3s;
}
main{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 15px;
}
.app{
  background:#fff;
  max-width:480px;
  width:100%;
  padding:25px;
  border-radius:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  animation:fade .5s ease;
}
@keyframes fade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
h1{text-align:center;font-size:26px;margin-bottom:5px}
.sub{text-align:center;font-size:14px;color:#666;margin-bottom:18px}
#reader{border:2px dashed #764ba2;border-radius:14px;padding:10px;overflow:hidden}
.result{background:#f4f6fb;margin-top:18px;padding:14px;border-radius:12px}
.result h3{margin:0 0 6px;font-size:15px}
#output{font-size:14px;word-break:break-all}
#output a{color:#2563eb;font-weight:600}
.actions, .btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
button,label.upload{flex:1;padding:12px;border:none;border-radius:10px;font-size:14px;cursor:pointer;transition:.3s;text-align:center}
button:hover,label.upload:hover{opacity:.9}
.scan{background:#2563eb;color:#fff}
.copy{background:#22c55e;color:#fff}
.stop{background:#ef4444;color:#fff}
.torch{background:#f59e0b;color:#fff}
.auto{background:#6366f1;color:#fff}
label.upload{background:#64748b;color:#fff}
input[type=file]{display:none}
.history{margin-top:20px;background:#f0f4f8;padding:10px;border-radius:12px;max-height:200px;overflow:auto}
.history ul{list-style:none;padding:0;margin:0}
.history li{padding:6px 10px;background:#fff;margin-bottom:5px;border-radius:8px;font-size:13px;display:flex;justify-content:space-between;align-items:center}
.darkmode{margin-top:15px;background:#000;color:#fff;padding:10px;border-radius:10px;width:100%;cursor:pointer}
.dark body{background:#111}
.dark .app{background:#222;color:#eee}
.dark #reader{border-color:#eee}
.dark .result{background:#333;color:#eee}
.dark .history li{background:#444;color:#eee}