*{box-sizing:border-box}
body{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin:0; color:#e5e7eb; background:#0b1020}
header{padding:28px 20px; text-align:center; background:linear-gradient(90deg,#111827,#312e81); color:white; border-bottom: 3px solid #22c55e}
h1{margin:0; font-size:28px}
.container{max-width:1140px; margin:24px auto; padding:0 16px}
.grid{display:grid; grid-template-columns: 1.1fr 0.9fr; gap:18px}
.card{background:#0f172a; border:1px solid #1f2937; border-radius:16px; box-shadow:0 6px 18px rgba(0,0,0,.35); padding:16px; color:#e5e7eb}
.media{display:grid; place-items:center; border-radius:12px; overflow:hidden; background:#0b132b}
.media img{width:100%; height:auto; display:block}
.step{display:none}
.step h2{font-size:20px; margin:0 0 8px; color:#d1d5db}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:999px; border:0; cursor:pointer; font-weight:700; box-shadow:0 2px 8px rgba(0,0,0,.28)}
.btn-primary{background:#7c3aed; color:white}
.btn-accent{background:#22c55e; color:#052e16}
.btn-ghost{background:#1f2937; color:#e5e7eb}
.badge{display:inline-block; padding:4px 10px; border-radius:999px; background:#0ea5e9; color:#001b2e; font-weight:800; font-size:12px}
.hidden{display:none !important}
.sidebar{display:grid; gap:12px}
.input{width:100%; padding:12px 12px; border-radius:10px; border:1px solid #374151; background:#0b132b; color:#e5e7eb}
.label{font-size:12px; color:#9ca3af}
.footer{margin-top:18px; font-size:12px; color:#9ca3af; text-align:center}
.screenshot-thumb { 
  display: grid; place-items: center; 
  min-height: 220px; 
  border: 2px dashed rgba(34,197,94,.8);
  border-radius: 12px; padding: 12px; 
  background: rgba(34,197,94,.08);
  color:#d1fae5;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.screenshot-loader { font-size: 1rem; opacity: .9; }
.screenshot-img { max-width: 100%; height: auto; border-radius: 10px; }
.screenshot-error { color: #f87171; font-weight: 800; }
.debug { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px; background:#111827; border:1px solid #374151; padding:10px; border-radius:10px; color:#9ca3af }
@media (max-width: 960px){
  .grid{grid-template-columns:1fr}
}