:root{
  --bg:#f4f7fb;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --border2:#d1d5db;
  --primary:#3b82f6;
  --primarySoft: rgba(59,130,246,.15);
  --dropBorder:#93c5fd;
  --dropBg:#f9fafb;
  --dropBgActive:#eff6ff;
  --codeBg:#f1f5f9;
  --codeBorder:#c7d2fe;
  --codeText:#1e3a8a;
}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a{color:var(--primary)}
.card{
  background:var(--card);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  border:1px solid var(--border);
  backdrop-filter:none;
}
.muted{color:var(--muted)}
.btn{border-radius:14px;font-weight:500}
.uk-input{
  background:#fff !important;
  border:1px solid var(--border2) !important;
  color:#111827 !important;
  border-radius:12px !important;
}
.uk-input:focus{
  border-color:var(--primary) !important;
  box-shadow:0 0 0 3px var(--primarySoft) !important;
}
.dropzone{
  background:var(--dropBg);
  border:2px dashed var(--dropBorder);
  border-radius:16px;
  transition:.2s;
}
.dropzone.dragover{
  background:var(--dropBgActive);
  border-color:var(--primary);
}
.uk-progress{
  height:10px;
  border-radius:999px;
  background:var(--border);
}
.uk-progress::-webkit-progress-value{
  background:var(--primary);
  border-radius:999px;
}
.uk-progress::-moz-progress-bar{
  background:var(--primary);
  border-radius:999px;
}
.code-box{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:20px;
  letter-spacing:2px;
  background:var(--codeBg);
  border:1px dashed var(--codeBorder);
  padding:10px 14px;
  border-radius:12px;
  color:var(--codeText);
}
.info-box{
  background:var(--codeBg);
  border:1px solid var(--border);
  border-radius:14px;
}