:root{
  --max-width:1100px;
}
body{font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;padding:12px;background:#f8fafc;display:flex;justify-content:center}
.container{width:100%;max-width:var(--max-width)}
.file-label{display:inline-flex;align-items:center;padding:8px 12px;border-radius:8px;cursor:pointer}
.file-label input{display:none}
.btn{padding:8px 12px;border-radius:8px;border:0}
.preview canvas{background:#fff;border-radius:6px;border:1px solid rgba(0,0,0,0.06);box-shadow:0 2px 6px rgba(2,6,23,0.06)}

/* loader fallback when Tailwind isn't available */
#loader{display:none}
#loader.show{display:flex}

@media (max-width:600px){
  body{padding:8px}
}

/* ad card default styling */
.ad-card{display:flex;align-items:center;justify-content:space-between}