/* Colorir foto P&B — page dashboard. Does not restyle the site header. */

body.page-colorir-foto-preto-e-branco-online.is-fullscreen .fs-workspace.clr-fs {
  min-height: 0;
  border: 0;
  background: #f4f7fc;
  padding: 18px 20px 12px;
}

body.page-colorir-foto-preto-e-branco-online .fs-chrome {
  display: none;
}

.clr-app {
  --clr-ink: #172554;
  --clr-body: #3d4d6a;
  --clr-muted: #64748b;
  --clr-card: #fff;
  --clr-line: #e4ebf5;
  --clr-soft: #f3f6fb;
  --clr-blue: #2f6fed;
  --clr-blue-dark: #1d4ed8;
  --clr-blue-soft: #e8f0ff;
  --clr-green: #16a34a;
  --clr-green-dark: #15803d;
  box-sizing: border-box;
  width: min(1440px, 100%);
  margin: 0 auto;
  color: var(--clr-body);
  font-size: 15px;
  line-height: 1.45;
}

.clr-app *,
.clr-app *::before,
.clr-app *::after { box-sizing: border-box; }

.clr-app p,
.clr-app h1,
.clr-app h2,
.clr-app h3,
.clr-app ul,
.clr-app ol,
.clr-app figure { margin: 0; text-align: left; }

.clr-app ul,
.clr-app ol,
.clr-app li { padding: 0; list-style: none; }

.clr-app li { margin: 0; }

.article .clr-app li::before,
.thecontent .clr-app li::before { content: none; }

.clr-app button,
.clr-app input,
.clr-app select { font: inherit; }

.clr-app img { max-width: 100%; }

.clr-app svg { display: block; max-width: none; flex: none; }

.clr-app svg[width="16"] { width: 16px; height: 16px; }
.clr-app svg[width="18"] { width: 18px; height: 18px; }
.clr-app svg[width="20"] { width: 20px; height: 20px; }
.clr-app svg[width="36"] { width: 36px; height: 36px; }

.clr-app fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.clr-app fieldset:disabled { opacity: 0.62; }

.clr-app [hidden] { display: none !important; }

.clr-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.clr-app select.clr-sr {
  min-height: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}

.clr-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Hero */
.clr-hero {
  display: flex;
  align-items: center;
  gap: 18px 28px;
  margin-bottom: 8px;
}

.clr-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.clr-hero-ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--clr-blue-soft);
  color: var(--clr-blue);
}

.article .clr-app h1.clr-title,
.clr-app h1.clr-title {
  margin: 0;
  color: var(--clr-ink);
  font-size: clamp(1.45rem, 2.3vw, 2.05rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.clr-lede {
  margin-top: 4px;
  max-width: 62ch;
  color: var(--clr-body);
  font-size: 0.98rem;
}

.clr-app .clr-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 26px;
  margin-left: auto;
}

.clr-perks li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.clr-perk-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--clr-blue-soft);
  color: var(--clr-blue);
}

.clr-perks strong {
  display: block;
  color: var(--clr-ink);
  font-size: 0.92rem;
  line-height: 1.2;
}

.clr-perks li span span {
  display: block;
  color: var(--clr-muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.clr-app .rbg-top-status {
  min-height: 1.2em;
  margin: 0 0 12px;
  color: var(--clr-muted);
  font-size: 0.84rem;
}

.clr-app .rbg-top-status.is-error { color: #b91c1c; }
.clr-app .rbg-top-status.is-ok { color: #15803d; }
.clr-app .rbg-top-status.is-loading { color: var(--clr-blue); }

/* Grid */
.clr-grid {
  display: grid;
  grid-template-columns: minmax(270px, 320px) minmax(0, 1fr) minmax(260px, 310px);
  gap: 16px;
  align-items: start;
}

.clr-card,
.clr-tips {
  background: var(--clr-card);
  border: 1px solid var(--clr-line);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.clr-card { padding: 16px 16px 14px; }

.clr-col,
.clr-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.clr-step {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--clr-ink);
  font-size: 1rem;
  font-weight: 800;
}

.clr-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--clr-blue);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
}

.clr-step-help {
  margin: 6px 0 12px;
  color: var(--clr-muted);
  font-size: 0.84rem;
}

.clr-app .clr-side-title,
.clr-app .clr-tips h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--clr-ink);
  font-size: 1.02rem;
  line-height: 1.25;
  font-weight: 800;
}
  font-size: 1rem;
  font-weight: 800;
}

.clr-side-title svg,
.clr-tips h2 svg { color: var(--clr-blue); }

/* Drop */
.clr-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 168px;
  padding: 16px 14px 14px;
  border: 1.5px dashed #b9cff8;
  border-radius: 14px;
  background: #f8fbff;
  text-align: center;
  cursor: pointer;
}

.clr-drop-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 2px;
  border-radius: 12px;
  background: var(--clr-blue-soft);
  color: var(--clr-blue);
}

.clr-drop-title {
  color: var(--clr-ink);
  font-weight: 800;
  font-size: 0.95rem;
}

.clr-drop-hint {
  color: var(--clr-muted);
  font-size: 0.78rem;
}

.clr-drop-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.clr-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--clr-line);
  background: #fff;
  color: var(--clr-blue);
  font-weight: 700;
  cursor: pointer;
}

.clr-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.clr-btn-primary {
  border-color: transparent;
  background: var(--clr-blue);
  color: #fff;
}

.clr-btn-primary:hover:not(:disabled) { background: var(--clr-blue-dark); }

.clr-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--clr-blue);
  min-height: 34px;
  padding: 0 8px;
}

.clr-btn-block { width: 100%; }

/* Sliders */
.clr-field { margin-top: 12px; }

.clr-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--clr-ink);
  font-size: 0.88rem;
  font-weight: 700;
}

.clr-field-head span {
  color: var(--clr-blue);
  font-variant-numeric: tabular-nums;
}

.clr-app input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  margin: 0;
  padding: 0;
  min-height: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.clr-app input[type="range"]:disabled { cursor: not-allowed; }

.clr-app input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--clr-blue) var(--clr-pct, 0%), #e2e8f0 var(--clr-pct, 0%));
}

.clr-app input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--clr-blue);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
}

.clr-app input[type="range"]::-moz-range-track {
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: #e2e8f0;
}

.clr-app input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--clr-blue);
}

.clr-app input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--clr-blue);
}

.clr-app #clr-warm::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #60a5fa, #e8eef7 50%, #fb923c);
}

.clr-app #clr-warm::-moz-range-track {
  background: linear-gradient(90deg, #60a5fa, #e8eef7 50%, #fb923c);
}

.clr-app #clr-warm::-moz-range-progress { background: transparent; }

/* Switch */
.clr-switch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-top: 4px;
  color: var(--clr-ink);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}

.clr-app .clr-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
}

.clr-switch-ui {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex: none;
  border-radius: 999px;
  background: #d5deec;
}

.clr-switch-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.22);
}

.clr-switch input:checked + .clr-switch-ui { background: var(--clr-blue); }
.clr-switch input:checked + .clr-switch-ui::after { transform: translateX(18px); }
.clr-switch input:focus-visible + .clr-switch-ui { outline: 2px solid var(--clr-blue); outline-offset: 2px; }

.clr-run-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.clr-run {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  background: var(--clr-blue);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.clr-run:hover:not(:disabled) { background: var(--clr-blue-dark); }
.clr-run:disabled { opacity: 0.55; cursor: not-allowed; }

.rbg-btn-label-short { display: none; }

.clr-gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  min-height: 46px;
  border: 1px solid var(--clr-line);
  border-radius: 12px;
  background: #fff;
  color: var(--clr-muted);
  cursor: pointer;
}

.clr-gear[aria-expanded="true"] {
  border-color: var(--clr-blue);
  color: var(--clr-blue);
  background: var(--clr-blue-soft);
}

.clr-gear-panel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--clr-soft);
}

.clr-app .clr-gear-panel select,
.clr-app .clr-gear-panel input[type="range"] { width: 100%; }

.clr-app select:not(.clr-sr) {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--clr-line);
  border-radius: 10px;
  background: #fff;
  color: var(--clr-ink);
}

.clr-hint {
  margin-top: 8px;
  color: var(--clr-muted);
  font-size: 0.78rem;
}

.clr-cancel { margin-top: 8px; }

/* Center */
.clr-stage-col { min-width: 0; }

.clr-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.clr-tab {
  appearance: none;
  flex: 1;
  min-height: 40px;
  border: 1px solid var(--clr-line);
  border-radius: 12px;
  background: #fff;
  color: var(--clr-body);
  font-weight: 700;
  cursor: pointer;
}

.clr-tab.is-on {
  border-color: transparent;
  background: #e7f0ff;
  color: var(--clr-blue);
}

.clr-stage-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  padding: 24px;
  border: 1px dashed #d5e0f0;
  border-radius: 16px;
  background: #fff;
  color: var(--clr-muted);
  text-align: center;
}

.clr-app:not(.is-empty) .clr-stage-empty { display: none; }

.clr-panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.clr-panes:not(:has(#clr-result-pane:not([hidden]))) {
  grid-template-columns: minmax(0, 520px);
  justify-content: center;
}

.clr-pane {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--clr-line);
  border-radius: 16px;
  background: #fff;
}

.clr-panes[data-pane="orig"] .clr-pane-orig,
.clr-panes[data-pane="color"] .clr-pane-result {
  border-color: #c9dbff;
  box-shadow: 0 0 0 2px rgba(47, 111, 237, 0.12);
}

.clr-shot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 460px;
  overflow: auto;
  border-radius: 12px;
  background: #f8fafc;
}

.clr-shot img {
  width: auto;
  height: auto;
  max-width: calc(100% * var(--zoom, 1));
  max-height: calc(100% * var(--zoom, 1));
  object-fit: contain;
}

.clr-badge {
  align-self: center;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--clr-muted);
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clr-zoom {
  display: flex;
  align-items: center;
  gap: 6px;
}

.clr-zoom button {
  appearance: none;
  min-width: 34px;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--clr-line);
  border-radius: 8px;
  background: #fff;
  color: var(--clr-ink);
  font-weight: 700;
  cursor: pointer;
}

.clr-zoom-label {
  min-width: 48px;
  text-align: center;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--clr-ink);
}

.clr-zoom-full {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--clr-blue) !important;
  font-size: 0.8rem;
  font-weight: 700;
}

.clr-progress {
  margin-top: 10px;
}

.clr-progress-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.clr-progress-fill {
  height: 100%;
  background: var(--clr-blue);
}

.clr-progress-text {
  margin-top: 6px;
  color: var(--clr-muted);
  font-size: 0.8rem;
}

.clr-app .rbg-next {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.clr-app .rbg-next-chip {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--clr-blue-soft);
  color: var(--clr-blue);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}

/* Comparison visibility follows bindCompareViews. */

/* Right */
.clr-dl-split { display: flex; gap: 0; }

.clr-dl {
  flex: 1;
  min-height: 64px;
  border: 0;
  border-radius: 12px 0 0 12px;
  background: var(--clr-green);
  color: #fff;
  cursor: pointer;
}

.clr-dl-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-weight: 800;
}

.clr-dl small {
  font-weight: 600;
  font-size: 0.72rem;
  opacity: 0.9;
}

.clr-dl:hover:not(:disabled) { background: var(--clr-green-dark); }
.clr-dl:disabled { background: #94a3b8; cursor: not-allowed; }

.clr-dl-more {
  width: 42px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0 12px 12px 0;
  background: var(--clr-green);
  color: #fff;
  cursor: pointer;
}

.clr-fmt-menu {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.clr-fmt-menu button {
  appearance: none;
  min-height: 36px;
  border: 1px solid var(--clr-line);
  border-radius: 8px;
  background: #fff;
  color: var(--clr-ink);
  font-weight: 700;
  cursor: pointer;
}

.clr-fmt-menu button.is-on {
  border-color: var(--clr-blue);
  color: var(--clr-blue);
  background: var(--clr-blue-soft);
}

.clr-share {
  width: 100%;
  margin-top: 8px;
}

.clr-wa {
  color: #128c7e;
  border-color: #b7e4dc;
}

.clr-info {
  display: grid;
  gap: 0;
  margin: 0;
}

.clr-info div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--clr-line);
  font-size: 0.86rem;
}

.clr-info div:first-child { border-top: 0; }

.clr-info dt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--clr-muted);
}

.clr-info dd {
  margin: 0;
  color: var(--clr-ink);
  font-weight: 700;
  text-align: right;
}

.clr-tips {
  padding: 14px 14px 12px;
  background: #fff8e8;
  border-color: #f3e3b0;
}

.clr-tips h2 { color: #92400e; }
.clr-tips h2 svg { color: #d97706; }

.clr-tips li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 8px;
  color: #78350f;
  font-size: 0.84rem;
}

.clr-tips li svg { margin-top: 2px; color: #16a34a; }

.clr-app .aib-panel {
  padding: 10px;
  border: 1px solid var(--clr-line);
  border-radius: 14px;
  background: #fff;
}

.clr-app .aib-list { display: grid; gap: 6px; }

.clr-app .itool-hist-host { margin-top: 14px; }
.clr-app .itool-hist-host[hidden] { display: none !important; }
.clr-app .itool-hist-list {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.article .clr-app .itool-hist-list > li,
.clr-app .itool-hist-list > li { margin: 0; }

@media (max-width: 1180px) {
  .clr-grid { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); }
  .clr-side { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .clr-tips { grid-column: 1 / -1; }
}

@media (max-width: 800px) {
  body.page-colorir-foto-preto-e-branco-online.is-fullscreen .fs-workspace.clr-fs {
    padding: 12px 12px 8px;
  }

  .clr-hero { flex-direction: column; align-items: flex-start; }
  .clr-app .clr-perks { display: none; }
  .clr-grid,
  .clr-side { grid-template-columns: 1fr; }
  .clr-shot { height: 280px; }
  .clr-stage-empty { min-height: 180px; }

  .clr-panes { grid-template-columns: 1fr; }
  .clr-panes[data-pane="orig"] .clr-pane-result,
  .clr-panes[data-pane="color"] .clr-pane-orig { display: none; }
  .clr-panes:not(:has(#clr-result-pane:not([hidden]))) .clr-pane-orig { display: flex; }
}

html[data-theme="dark"] body.page-colorir-foto-preto-e-branco-online.is-fullscreen .fs-workspace.clr-fs,
html.dark body.page-colorir-foto-preto-e-branco-online.is-fullscreen .fs-workspace.clr-fs {
  background: #0b1220;
}

html[data-theme="dark"] .clr-app,
html.dark .clr-app {
  --clr-ink: #e2e8f0;
  --clr-body: #cbd5e1;
  --clr-muted: #94a3b8;
  --clr-card: #111827;
  --clr-line: #243044;
  --clr-soft: #1e293b;
  --clr-blue-soft: #1e3a5f;
}

html[data-theme="dark"] .clr-drop,
html.dark .clr-drop,
html[data-theme="dark"] .clr-shot,
html.dark .clr-shot,
html[data-theme="dark"] .clr-stage-empty,
html.dark .clr-stage-empty { background: #0f172a; }

html[data-theme="dark"] .clr-btn,
html.dark .clr-btn,
html[data-theme="dark"] .clr-tab,
html.dark .clr-tab,
html[data-theme="dark"] .clr-gear,
html.dark .clr-gear,
html[data-theme="dark"] .clr-app select,
html.dark .clr-app select,
html[data-theme="dark"] .clr-zoom button,
html.dark .clr-zoom button,
html[data-theme="dark"] .clr-fmt-menu button,
html.dark .clr-fmt-menu button { background: #0f172a; color: var(--clr-ink); }

html[data-theme="dark"] .clr-btn-primary,
html.dark .clr-btn-primary,
html[data-theme="dark"] .clr-run,
html.dark .clr-run { background: var(--clr-blue); color: #fff; }

html[data-theme="dark"] .clr-tips,
html.dark .clr-tips { background: #2a2112; border-color: #5c4a1e; }
html[data-theme="dark"] .clr-tips h2,
html[data-theme="dark"] .clr-tips li,
html.dark .clr-tips h2,
html.dark .clr-tips li { color: #fde68a; }

/* Mockup pass: same grid as the other tools, one left card, two panes always */
.clr-grid {
  grid-template-columns: minmax(280px, 330px) minmax(0, 1fr) minmax(240px, 280px);
  gap: 14px;
}

.clr-col {
  gap: 0;
  padding: 4px 0;
  border: 1px solid var(--clr-line);
  border-radius: 18px;
  background: var(--clr-card);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.clr-col > .clr-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.clr-col > .clr-card + .clr-card {
  margin: 0 16px;
  padding-left: 0;
  padding-right: 0;
  border-top: 1px solid var(--clr-line);
}

.clr-col > .aib-panel { margin: 0 16px 12px; }

.clr-stage-empty {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.clr-pane-title {
  color: var(--clr-ink);
  font-size: 0.92rem;
  font-weight: 800;
}

.clr-stage-empty .clr-shot,
.clr-pane-ph .clr-shot { background: #f3f6fb; }

.clr-panes:not(:has(#clr-result-pane:not([hidden]))) {
  grid-template-columns: 1fr 1fr;
  justify-content: stretch;
}

.clr-panes:has(#clr-result-pane:not([hidden])) .clr-pane-ph { display: none; }

.clr-shot { height: 500px; }

.clr-badge {
  align-self: flex-end;
  border-radius: 8px;
  font-weight: 600;
}

.clr-badge:empty { display: none; }

@media (max-width: 1180px) {
  .clr-grid { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }
}

@media (max-width: 800px) {
  .clr-grid { grid-template-columns: 1fr; }
  .clr-stage-empty,
  .clr-panes:not(:has(#clr-result-pane:not([hidden]))) { grid-template-columns: 1fr; }
  .clr-shot { height: 280px; }
  .clr-pane-ph,
  .clr-stage-empty .clr-pane + .clr-pane { display: none; }
}

html[data-theme="dark"] .clr-stage-empty .clr-shot,
html.dark .clr-stage-empty .clr-shot,
html[data-theme="dark"] .clr-pane-ph .clr-shot,
html.dark .clr-pane-ph .clr-shot { background: #0f172a; }

/* Download: one solid green button, format chips underneath */
.clr-dl { border-radius: 12px; }
.clr-dl:disabled { background: var(--clr-green); opacity: 0.55; }

.clr-fmt-menu {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.clr-fmt-menu button {
  flex: 1;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.84rem;
}

.clr-fmt-menu button:hover { background: var(--clr-blue-soft); }

/* Colorization controls and comparison, scoped to this page. */
.clr-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.clr-presets button, .clr-view-tools button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--clr-line); border-radius: 9px; background: var(--clr-card); color: var(--clr-body); cursor: pointer; font-weight: 600; }
.clr-presets button:hover, .clr-view-tools button.is-active { background: var(--clr-blue-soft); border-color: var(--clr-blue); color: var(--clr-blue); }
.clr-view-tools { margin-bottom: 10px; }
.clr-view-tools:empty { display: none; }
.clr-view-tools .istudio-view-toggle { display: flex; justify-content: flex-end; gap: 6px; }
.clr-app button:disabled { cursor: default; opacity: .55; }
.clr-app :is(button, select, input):focus-visible, .clr-drop:focus-visible { outline: 3px solid var(--clr-blue); outline-offset: 3px; }
.clr-app.is-view-slider .clr-panes { display: none; }
.clr-app #clr-ba { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 500px; padding: 12px; border: 1px solid var(--clr-line); border-radius: 16px; background: var(--clr-card); }
.clr-app .clr-ba-frame { position: relative; flex: none; overflow: hidden; border-radius: 10px; touch-action: none; cursor: ew-resize; }
.clr-app #clr-ba-color { display: block; width: 100%; height: 100%; max-width: none; }
.clr-app #clr-ba-clip { position: absolute; inset: 0 auto 0 0; width: 50%; overflow: hidden; }
.clr-app #clr-ba-gray { display: block; width: var(--ba-frame-w); height: 100%; max-width: none; }
.clr-app .clr-ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: white; box-shadow: 0 0 4px #0008; pointer-events: none; }
.clr-app .clr-ba-handle::after { content: '↔'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 4px 7px; background: white; color: #172554; border-radius: 50%; }
.clr-app .clr-ba-labels { position: absolute; inset: 10px 10px auto; display: flex; justify-content: space-between; pointer-events: none; }
.clr-app .clr-ba-labels span { padding: 3px 7px; border-radius: 6px; background: #0f172abf; color: white; font-size: .75rem; }
.clr-app #clr-ba-range { flex: none; width: 100%; max-width: 400px; min-height: 32px; margin-top: 10px; }
.clr-app .clr-pane:fullscreen { padding: 24px; background: var(--clr-card); }
.clr-app .clr-pane:fullscreen .clr-shot { flex: 1; height: auto; }
.clr-resolution-note { margin-top: 10px !important; }
.clr-shot img { max-width: none; max-height: none; width: calc(100% * var(--zoom, 1)); height: calc(100% * var(--zoom, 1)); flex: none; }
.clr-shot { display: block; }
@media (max-width: 800px) {
  .clr-col { display: contents; }
  .clr-grid { display: flex; flex-direction: column; }
  .clr-col > .clr-card, .clr-col > .clr-card + .clr-card { width: 100%; margin: 0; padding: 14px; border: 1px solid var(--clr-line); border-radius: 16px; background: var(--clr-card); }
  .clr-col > .clr-card:nth-of-type(1) { order: 1; }
  .clr-stage-col { order: 2; width: 100%; }
  .clr-col > .clr-card:nth-of-type(2) { order: 3; }
  .clr-col > .clr-card:nth-of-type(3) { order: 4; }
  .clr-col > .aib-panel { order: 5; width: 100%; margin: 0; }
  .clr-side { order: 6; width: 100%; }
  .clr-app #clr-ba { height: 330px; }
  .clr-view-tools .istudio-view-toggle { justify-content: center; }
}