/* Remove background (remove-background.html, remove-background.js).
   The checkerboard is the one bold thing: it is what "transparent" looks like,
   so it runs faintly through the upload area and fully behind the result. */
.rb-header { padding: 32px 0 6px; }
.rb-header .container { max-width: 1040px; text-align: left; }
.rb-header h1 { font-size: clamp(1.75rem, 4.6vw, 3.1rem); letter-spacing: -0.02em; line-height: 1.04; margin: 8px 0 10px; }
.rb-header .lede { margin: 0; max-width: 58ch; }
.rb-crumb { display: flex; gap: 8px; font-size: 0.88rem; color: var(--text-muted); }
.rb-crumb a { color: var(--text-muted); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--text-muted) 40%, transparent); }
.rb-crumb a:hover { color: var(--text); }
.rb-crumb [aria-current] { color: var(--text); }

.rb-section { padding: 18px 0 72px; }
.rb-app { max-width: 1040px; }
:root { --rb-check-a: #2a3350; --rb-check-b: #1c2440; }
[data-theme="light"] { --rb-check-a: #e6e9f0; --rb-check-b: #ffffff; }

/* Upload area */
.rb-drop {
  position: relative; display: grid; place-items: center; min-height: 340px; padding: 28px 20px; cursor: pointer; text-align: center;
  border-radius: 22px; border: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
  background:
    radial-gradient(70% 90% at 50% 40%, var(--surface) 30%, transparent 75%),
    repeating-conic-gradient(var(--rb-check-a) 0 25%, var(--rb-check-b) 0 50%) 0 0 / 28px 28px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.rb-drop:hover, .rb-drop:focus-visible, .rb-drop.is-over { border-color: var(--accent); outline: none; }
.rb-drop.is-over { transform: scale(1.01); }
.rb-drop.is-busy { pointer-events: none; opacity: 0.6; }
.rb-drop[hidden] { display: none; }
.rb-drop-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; color: var(--accent-2); background: color-mix(in srgb, var(--accent) 16%, var(--bg-elevated)); }
.rb-drop-icon svg { width: 32px; height: 32px; }
.rb-drop-title { font-family: var(--font-head); font-size: 1.35rem; font-weight: 700; margin: 14px 0 4px; color: var(--text); }
.rb-drop-sub { margin: 0 0 16px; color: var(--text-muted); font-size: 0.93rem; }

.rb-status { margin: 16px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.rb-status[hidden], .rb-error[hidden], .rb-result[hidden] { display: none; }
.rb-status p { margin: 0; font-size: 0.95rem; display: flex; align-items: center; gap: 10px; }
.rb-status p::before { content: ""; width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent-2); animation: rb-spin 0.8s linear infinite; }
@keyframes rb-spin { to { transform: rotate(360deg); } }
.rb-bar { height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; margin-top: 10px; }
.rb-bar[hidden] { display: none; }
.rb-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.2s ease; }
.rb-error { margin: 16px 0 0; padding: 12px 16px; border-radius: 14px; color: #ffb4b4; background: rgba(255, 107, 107, 0.1); border: 1px solid rgba(255, 107, 107, 0.4); }

/* Result */
.rb-result { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; margin-top: 4px; }
@media (max-width: 860px) { .rb-result { grid-template-columns: minmax(0, 1fr); } }
.rb-viewer {
  position: relative; width: 100%; max-height: 72vh; margin: 0 auto; border-radius: 18px; overflow: hidden; touch-action: none; cursor: ew-resize;
  border: 1px solid var(--border); background: var(--surface);
}
.rb-viewer.is-transparent { background: repeating-conic-gradient(var(--rb-check-a) 0 25%, var(--rb-check-b) 0 50%) 0 0 / 22px 22px; }
.rb-viewer canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.rb-tag { position: absolute; top: 12px; padding: 4px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; color: #fff; background: rgba(10, 14, 26, 0.6); backdrop-filter: blur(4px); pointer-events: none; }
.rb-tag-before { left: 12px; } .rb-tag-after { right: 12px; }
.rb-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 44px; margin-left: -22px; padding: 0; border: 0; background: transparent; cursor: ew-resize;
}
.rb-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 21px; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
.rb-handle span { position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.rb-handle span::before, .rb-handle span::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -5px; border: 5px solid transparent; }
.rb-handle span::before { left: 6px; border-right-color: #1f2a44; } .rb-handle span::after { right: 6px; border-left-color: #1f2a44; }
.rb-handle:focus-visible span { outline: 3px solid var(--accent); outline-offset: 2px; }
.rb-hint { margin: 8px 0 0; font-size: 0.82rem; color: var(--text-muted); text-align: center; }

.rb-panel { padding: 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.rb-panel h2 { font-size: 0.95rem; margin: 0 0 10px; }
.rb-panel h2 + * { margin-bottom: 18px; }
.rb-bgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; position: relative; }
.rb-bg { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--bg-elevated); color: var(--text); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.rb-bg[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.rb-sw { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.45); }
.rb-sw-clear { background: repeating-conic-gradient(#c9ced9 0 25%, #fff 0 50%) 0 0 / 10px 10px; }
.rb-color { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; bottom: 0; right: 0; }
.rb-range { width: 100%; accent-color: var(--accent); }
.rb-range-labels { display: flex; justify-content: space-between; margin: -12px 0 18px; font-size: 0.76rem; color: var(--text-muted); }
.rb-downloads { display: grid; gap: 8px; }
.rb-downloads .btn { width: 100%; }
.rb-note { margin: 10px 0 0; font-size: 0.8rem; color: var(--text-muted); }
.rb-again { margin-top: 14px; width: 100%; padding: 10px; border-radius: 12px; border: 1px dashed var(--border); background: transparent; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.rb-again:hover { border-color: var(--accent); }

.rb-facts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 22px; font-size: 0.9rem; color: var(--text-muted); }
.rb-facts strong { color: var(--text); }
@media (max-width: 760px) {
  .rb-facts { grid-template-columns: minmax(0, 1fr); }
  .rb-drop { min-height: 260px; }
  .rb-header { padding-top: 20px; }
}
@media (prefers-reduced-motion: reduce) { .rb-drop, .rb-bar span { transition: none; } .rb-status p::before { animation: none; } }

/* Phones: the "Free tools" link gets a full-size tap area (44px) without
   moving the layout, and the floating chat button steps aside while a result
   is on screen so it never covers the photo or the controls. */
.rb-crumb { align-items: center; }
.rb-crumb a { display: inline-block; padding: 12px 0; margin: -12px 0; border-bottom: 0; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text-muted) 40%, transparent); text-underline-offset: 4px; }
@media (max-width: 860px) {
  body:has(.rb-result:not([hidden])) .chat-launcher,
  body:has(.rb-result:not([hidden])) .chat-teaser { display: none !important; }
  .rb-section { padding-bottom: 96px; }
}