.bgr { max-width: 960px; margin: 0 auto; }
.bgr-lead { margin-bottom: 1.5em; line-height: 1.8; }
.bgr-drop {
  border: 2px dashed #999; border-radius: 12px; padding: 2.6em 1em;
  text-align: center; cursor: pointer; transition: background .2s, border-color .2s;
}
.bgr-drop.is-over { background: rgba(6,147,205,.12); border-color: #0693cd; }
.bgr-drop.is-compact { padding: 1.3em 1em; }
.bgr-drop-main { font-size: 1.1em; font-weight: bold; margin: 0 0 .4em; }
.bgr-drop-sub { font-size: .85em; color: #888; margin: 0; }

.bgr-controls {
  margin-top: 1.5em; border: 1px solid rgba(128,128,128,.3); border-radius: 12px; padding: 1.2em 1.4em;
}
.bgr-ctrl { margin-bottom: 1.2em; }
.bgr-ctrl label { display: flex; justify-content: space-between; font-size: .95em; margin-bottom: .4em; }
.bgr-num { color: #3279bd; font-variant-numeric: tabular-nums; }
.bgr-ctrl input[type=range] { width: 100%; accent-color: #0693cd; }
.bgr-desc { font-size: .8em; color: #888; margin: .4em 0 0; line-height: 1.6; }
.bgr-actions { display: flex; gap: .8em; flex-wrap: wrap; margin-top: 1.4em; }
.bgr-btn {
  font: inherit; border: 1px solid rgba(128,128,128,.4); background: transparent; color: inherit;
  border-radius: 999px; padding: .5em 1.2em; cursor: pointer; transition: .15s;
}
.bgr-btn:hover { background: rgba(128,128,128,.12); }
.bgr-btn-primary { background: #0693cd; border-color: #0693cd; color: #fff; }
.bgr-btn-primary:hover { background: #235c9a; opacity: 1; }
.bgr-btn:disabled { opacity: .45; cursor: not-allowed; }

.bgr-gallery {
  margin-top: 1.5em; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1em;
}
.bgr-card { border: 1px solid rgba(128,128,128,.3); border-radius: 10px; overflow: hidden; }
.bgr-thumb {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 8px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg,#dcdfe4 25%,transparent 25%),
    linear-gradient(-45deg,#dcdfe4 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#dcdfe4 75%),
    linear-gradient(-45deg,transparent 75%,#dcdfe4 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
.bgr-thumb canvas { max-width: 100%; max-height: 100%; height: auto; border-radius: 4px; }
.bgr-meta { display: flex; align-items: center; gap: .5em; padding: .5em .7em; border-top: 1px solid rgba(128,128,128,.3); }
.bgr-name { flex: 1; font-size: .78em; color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgr-icon {
  font: inherit; font-size: .78em; line-height: 1; border: 1px solid rgba(128,128,128,.4);
  background: transparent; color: inherit; border-radius: 6px; padding: .35em .55em; cursor: pointer;
}
.bgr-icon:hover { background: rgba(128,128,128,.12); }
.bgr-icon.is-danger:hover { background: rgba(210,70,70,.18); border-color: rgba(210,70,70,.6); }

.bgr-notes { margin-top: 2.5em; font-size: .85em; color: #888; }
.bgr-notes ul { padding-left: 1.4em; }
.bgr-notes li { margin-bottom: .3em; }

.bgr-status { margin: 16px 0; font-size: 14px; }
.bgr-status.is-error { color: #a33a34; }
.bgr-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }