/* Emote Resizer — English class names, scoped with .er-*.
   Load your global CSS first, then this file. */

:root{
  --er-bg: #0f1322;
  --er-panel: #151b2d;
  --er-border: #283154;
  --er-text: #e6e9f5;
  --er-muted: #9aa3b2;
  --er-accent: #6ea8fe;
}

body{ background: var(--er-bg); color: var(--er-text); }

.er-wrap{ max-width: 980px; margin: 24px auto; padding: 0 16px; }

.card{
  background: var(--er-panel);
  border: 1px solid var(--er-border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

.er-header{ margin-bottom: 16px; }
.er-title{ display:flex; align-items:center; gap:10px; margin:0; font-size:22px; font-weight:800; }
.er-logo{ width:28px; height:28px; }
.er-lead{ margin:8px 0 0; color: var(--er-muted); }

.er-main{ margin-bottom: 16px; }

.er-controls{ display:grid; gap:12px; }

.er-drop{
  border: 1px dashed var(--er-border);
  border-radius: 12px;
  display:block; cursor:pointer;
}
.er-drop-inner{ padding: 18px 14px; text-align:center; }
.er-drop strong{ display:block; font-weight:800; }
.er-drop span{ color: var(--er-muted); font-size: 13px; }

.er-options{ display:flex; align-items:center; gap: 12px; }
.er-check{ display:flex; align-items:center; gap:8px; color: var(--er-muted); }

.er-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.btn{
  background: var(--er-accent);
  color: #081225;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  cursor:pointer;
}
.btn.secondary{ background: #1a223a; color: var(--er-text); border: 1px solid var(--er-border); }
.btn.tiny{ padding: 6px 10px; font-size: 12px; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

/* Preview grid */
.er-grid{
  margin-top: 10px;
  display:grid; gap:14px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 680px){
  .er-grid{ grid-template-columns: 1fr; }
}

.er-tile{ background: #12192c; border:1px solid var(--er-border); border-radius: 12px; padding: 12px; }
.er-tile-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 8px; }
.er-size{ font-weight:700; }

/* Default: smooth preview (NOT pixelated) */
.er-canvas{ display:block; width: 100%; height: auto; image-rendering: auto; background: #0c1222; border-radius: 8px; }

/* Pixel-art mode: make the preview pixelated */
.pixelated .er-canvas{ image-rendering: pixelated; }

.er-note{ margin-top: 12px; color: var(--er-muted); font-size: 12px; }

.er-footer{ text-align:center; color: var(--er-muted); }

.er-options