/* PhotoRoom BG Remover — single-image editor UI. Brand color: #fc6954 */
.bgrp-app {
  --bgrp-brand: #fc6954;
  --bgrp-brand-dark: #e4533f;
  --bgrp-ink: #1f2430;
  --bgrp-muted: #6b7280;
  --bgrp-line: #e7e9ee;
  --bgrp-soft: #fff5f3;
  max-width: 1040px;
  margin: 0 auto;
  padding: 8px;
  color: var(--bgrp-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.bgrp-header { text-align: center; margin-bottom: 18px; }
.bgrp-title {
  font-size: clamp(22px, 3vw, 30px); font-weight: 800; margin: 0 0 4px;
  background: linear-gradient(90deg, var(--bgrp-brand), var(--bgrp-brand-dark));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.bgrp-subtitle { color: var(--bgrp-muted); margin: 0; font-size: 15px; }

/* Dropzone */
.bgrp-dropzone {
  border: 2px dashed color-mix(in srgb, var(--bgrp-brand) 55%, #d9dce3);
  border-radius: 16px; background: var(--bgrp-soft);
  padding: 54px 20px; text-align: center; cursor: pointer; transition: all .2s ease; outline: none;
}
.bgrp-dropzone:hover, .bgrp-dropzone:focus-visible { border-color: var(--bgrp-brand); box-shadow: 0 8px 26px rgba(252,105,84,.18); transform: translateY(-1px); }
.bgrp-dragging { background: #ffe9e4; border-color: var(--bgrp-brand); }
.bgrp-dropzone-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.bgrp-icon { color: var(--bgrp-brand); margin: 0 auto 8px; display: block; }
.bgrp-drop-text { margin: 4px 0; font-size: 16px; }
.bgrp-link { color: var(--bgrp-brand); font-weight: 700; text-decoration: underline; }
.bgrp-hint { color: var(--bgrp-muted); font-size: 13px; margin: 6px 0 0; }

/* Hidden elements must stay hidden even when an element sets its own display */
.bgrp-app [hidden] { display: none !important; }

/* Editor layout */
.bgrp-editor { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
.bgrp-stage-wrap { display: flex; flex-direction: column; gap: 10px; }

/* View tabs */
.bgrp-viewtabs { display: inline-flex; gap: 4px; padding: 4px; background: #f1f2f5; border-radius: 999px; align-self: center; }
.bgrp-tab { border: none; background: none; padding: 7px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--bgrp-muted); cursor: pointer; }
.bgrp-tab.is-active { background: #fff; color: var(--bgrp-brand-dark); box-shadow: 0 1px 4px rgba(0,0,0,.12); }

/* Big stage frame */
.bgrp-stage {
  position: relative; border: 1px solid var(--bgrp-line); border-radius: 16px; overflow: hidden;
  min-height: 360px; max-height: 70vh; display: flex; align-items: center; justify-content: center; background-color: #fff;
}
.bgrp-stage-img { max-width: 100%; max-height: 70vh; display: block; }
.bgrp-stage-overlay {
  position: absolute; inset: 0; display: none; flex-direction: column; gap: 10px;
  align-items: center; justify-content: center; background: rgba(255,255,255,.82);
  color: var(--bgrp-muted); font-size: 14px; text-align: center; padding: 16px;
}
.bgrp-spinner { width: 34px; height: 34px; border-radius: 50%; border: 4px solid #f0d6d0; border-top-color: var(--bgrp-brand); animation: bgrp-spin .8s linear infinite; }
@keyframes bgrp-spin { to { transform: rotate(360deg); } }

/* Transparency checkerboard */
.bgrp-checker {
  background-image:
    linear-gradient(45deg, #e9ecf1 25%, transparent 25%),
    linear-gradient(-45deg, #e9ecf1 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e9ecf1 75%),
    linear-gradient(-45deg, transparent 75%, #e9ecf1 75%);
  background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

/* Crop action bar */
.bgrp-crop-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.bgrp-ratio { display: flex; gap: 6px; flex-wrap: wrap; }
.bgrp-ratio .bgrp-btn { padding: 6px 12px; font-size: 13px; }
.bgrp-crop-btns { display: flex; gap: 8px; }

/* Side panel */
.bgrp-panel { display: flex; flex-direction: column; gap: 14px; }
.bgrp-section { border: 1px solid var(--bgrp-line); border-radius: 14px; padding: 14px; background: #fff; }
.bgrp-h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--bgrp-muted); }
.bgrp-section-actions { display: flex; flex-direction: column; gap: 8px; }

/* Background chips */
.bgrp-bg-options { display: flex; flex-wrap: wrap; gap: 8px; }
.bgrp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--bgrp-line); border-radius: 999px; font-size: 14px; cursor: pointer; background: #fff; transition: all .15s ease; }
.bgrp-chip:has(input:checked) { border-color: var(--bgrp-brand); background: var(--bgrp-soft); color: var(--bgrp-brand-dark); font-weight: 600; }
.bgrp-chip input[type="color"] { width: 22px; height: 22px; border: none; background: none; padding: 0; cursor: pointer; }

/* Resize */
.bgrp-resize { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--bgrp-muted); }
.bgrp-num { width: 72px; padding: 6px 8px; border: 1px solid var(--bgrp-line); border-radius: 8px; font-size: 14px; color: var(--bgrp-ink); }
.bgrp-x { color: var(--bgrp-muted); }
.bgrp-lock { display: inline-flex; align-items: center; gap: 4px; }
.bgrp-resize-btns { display: flex; gap: 8px; margin-top: 10px; }

/* Buttons */
.bgrp-btn { border: none; border-radius: 10px; padding: 10px 16px; font-size: 14px; font-weight: 700; cursor: pointer; color: #fff; background: linear-gradient(180deg, var(--bgrp-brand), var(--bgrp-brand-dark)); box-shadow: 0 4px 14px rgba(252,105,84,.35); transition: transform .12s ease, box-shadow .12s ease; }
.bgrp-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(252,105,84,.45); color: #fff; }
.bgrp-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.bgrp-btn-ghost { background: #fff; color: var(--bgrp-ink); border: 1px solid var(--bgrp-line); box-shadow: none; }
.bgrp-btn-ghost:hover:not(:disabled) { background: var(--bgrp-soft); color: var(--bgrp-brand-dark); border-color: var(--bgrp-brand); }
.bgrp-btn-block { width: 100%; }

/* Responsive */
@media (max-width: 820px) {
  .bgrp-editor { grid-template-columns: 1fr; }
}