.bgremjs { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; max-width: 1000px; margin: 24px auto; padding: 0 12px; }
.bgremjs-title { margin: 0 0 12px; }
.bgremjs-card { border: 1px solid #e6e6e6; border-radius: 14px; background:#fff; padding: 16px; }

.bgremjs-drop { border: 2px dashed #cfcfcf; border-radius: 12px; padding: 16px; text-align: center; background:#fafafa; transition: border-color .2s, background .2s; }
.bgremjs-drop.dragover { border-color: #7aa7ff; background: #f4f8ff; }
.bgremjs-drop-inner { display:grid; gap: 6px; place-items:center; }
.bgremjs-drop-icon { font-size: 28px; }
.bgremjs-btn-link { background:none; border:0; padding:0; color:#1463ff; cursor:pointer; text-decoration: underline; }
.bgremjs-hint { color:#777; font-size: 12px; }
.bgremjs-fname { color:#444; font-size: 12px; }

.bgremjs-controls { margin-top: 12px; display:grid; gap: 8px; }
.bgremjs-row { display:grid; grid-template-columns: 120px 1fr; gap: 12px; align-items:center; }
.bgremjs-actions { display:flex; gap: 8px; align-items:center; margin-top: 4px; flex-wrap: wrap; }
.bgremjs-spacer { flex: 1 1 auto; }

.bgremjs-btn, .bgremjs-btn-outlined {
  padding: 10px 14px; border-radius: 10px; cursor: pointer; font-weight: 600; border: 1px solid transparent;
}
.bgremjs-btn { background:#111; color:#fff; }
.bgremjs-btn:disabled { opacity:.6; cursor:not-allowed; }
.bgremjs-btn-outlined { background:#fff; border-color:#ddd; color:#111; }
.bgremjs-btn-outlined:disabled { opacity:.6; cursor:not-allowed; }

.bgremjs-spinner {
  width: 16px; height: 16px; border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; display:inline-block; vertical-align: middle; margin-right: 8px;
  animation: bgremjs-spin .8s linear infinite;
}
@keyframes bgremjs-spin { to { transform: rotate(360deg); } }

.bgremjs-error { color: #b00020; font-size: 13px; }

.bgremjs-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
@media (max-width: 800px) { .bgremjs-grid { grid-template-columns: 1fr; } }

.bgremjs-img { width: 100%; max-width: 100%; border: 1px solid #eee; border-radius: 10px; background:#f8f8f8; }
.bgremjs-checker {
  background-image:
    linear-gradient(45deg, #ddd 25%, transparent 25%),
    linear-gradient(-45deg, #ddd 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ddd 75%),
    linear-gradient(-45deg, transparent 75%, #ddd 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.bgremjs-note { color:#666; font-size: 13px; margin-top: 10px; }