/* ==========================================================================
   Free image compression page
   ========================================================================== */

/* ---------- Hero header: brand gradient wash + badge, more energy than a
   bare centered h1/p ---------- */
.compress-hero{
  position:relative;
  padding:64px 0 40px;
  overflow:hidden;
}
.compress-hero::before{
  content:"";
  position:absolute; inset:-30% -10% auto -10%;
  height:480px;
  background:
    radial-gradient(55% 55% at 20% 20%, rgba(30,111,239,.14), transparent 70%),
    radial-gradient(50% 50% at 82% 10%, rgba(139,226,58,.18), transparent 70%),
    radial-gradient(40% 40% at 55% 60%, rgba(18,183,214,.12), transparent 70%);
  filter:blur(10px);
  z-index:0;
}
.compress-hero-head{
  position:relative; z-index:1;
  text-align:center;
  max-width:640px;
  margin:0 auto 36px;
}
.compress-hero-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 16px 7px 12px;
  border-radius:999px;
  background:var(--brand-gradient-soft);
  color:var(--brand-blue-600);
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.01em;
  margin-bottom:18px;
}
.compress-hero-badge svg{ width:14px; height:14px; flex:none; }
.compress-hero-head h1{
  font-size:clamp(28px,3.8vw,42px);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.15;
  margin:0 0 14px;
}
.compress-hero-head p{
  color:var(--ink-500);
  font-size:16.5px;
  line-height:1.65;
  margin:0;
}

.compress-panel{
  position:relative; z-index:1;
  margin-top:8px;
}

/* ---------- Mode tabs: upload vs URL scan ---------- */
/* A pill-shaped segmented switch with a single gradient slider that glides
   between the two positions (transform, not a background swap per button)
   — reads as one physical switch flipping between two states rather than
   two independent buttons, and gives the tab change some motion instead of
   an instant color flip. */
.compress-mode-tabs{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin:0 auto 32px;
  padding:6px;
  width:fit-content;
  min-width:360px;
  background:var(--surface-alt);
  border-radius:999px;
  box-shadow:inset 0 1px 2px rgba(11,18,32,.05);
}
.compress-mode-tabs::before{
  content:"";
  position:absolute;
  top:6px; bottom:6px;
  inset-inline-start:6px;
  width:calc(50% - 6px);
  background:var(--brand-gradient);
  border-radius:999px;
  box-shadow:var(--shadow-brand);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  z-index:0;
}
.compress-mode-tabs[data-active="url"]::before{
  transform:translateX(100%);
}
html[dir="rtl"] .compress-mode-tabs[data-active="url"]::before{
  transform:translateX(-100%);
}
.compress-mode-tab{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:13px 26px;
  border:none;
  border-radius:999px;
  background:none;
  font-size:15px;
  font-weight:700;
  color:var(--ink-500);
  white-space:nowrap;
  transition:color .2s ease;
}
.compress-mode-tab svg{ width:17px; height:17px; flex:none; }
.compress-mode-tab:hover{ color:var(--ink-900); }
.compress-mode-tab:focus{ outline:none; }
.compress-mode-tab:focus-visible{ outline:2px solid var(--brand-blue-500); outline-offset:2px; }
.compress-mode-tab.is-active{ color:#fff; }
@media (max-width:480px){
  .compress-mode-tabs{ width:100%; min-width:0; }
  .compress-mode-tab{ padding-inline:14px; }
}

/* ---------- Card: wraps toolbar + dropzone/URL panel + results in one
   surface, so results that appear after upload read as part of the same
   unit instead of floating loose below it. ---------- */
.compress-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md);
  padding:24px;
}
@media (max-width:600px){
  .compress-card{ padding:16px; border-radius:var(--radius-lg); }
}

/* ---------- Toolbar / settings toggle ---------- */
.compress-toolbar{
  display:flex;
  justify-content:flex-end;
  margin-bottom:10px;
}
.compress-toolbar[hidden]{ display:none; }
.settings-toggle{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:999px;
  padding:10px 18px;
  font-size:13.5px; font-weight:700;
  color:var(--ink-700);
  box-shadow:var(--shadow-sm);
  transition:border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.settings-toggle:hover{
  border-color:var(--brand-blue-500);
  color:var(--brand-blue-600);
  box-shadow:var(--shadow-md);
  transform:translateY(-1px);
}
.settings-toggle svg{ width:16px; height:16px; flex:none; }
.settings-toggle .chev{ width:12px; height:12px; transition:transform .2s ease; }
.settings-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }

/* Collapsible panel: driven by [data-open], animated via grid-template-rows
   (0fr -> 1fr) so the height transition works without a hardcoded max-height.
   Deliberately NOT using the `hidden` attribute for the open/closed state —
   an author-stylesheet `display:grid` on .settings-panel would always beat
   the UA's `[hidden]{display:none}` rule, which is why the show/hide toggle
   didn't work before this. */
.settings-panel{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .28s ease, opacity .22s ease, margin .22s ease;
  margin-bottom:0;
}
.settings-panel[data-open="true"]{
  grid-template-rows:1fr;
  opacity:1;
  margin-bottom:18px;
}
.settings-panel-inner{
  overflow:hidden;
  min-height:0;
  background:var(--surface-alt);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
}

.settings-group{
  padding:18px 20px;
}
.settings-group + .settings-group{
  border-top:1px solid var(--border);
}
.settings-group-title{
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-400);
  margin-bottom:12px;
}
.settings-card{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.settings-card-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.settings-card-label{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:14.5px;
  font-weight:700;
  color:var(--ink-900);
}
.settings-card-label small{
  font-size:12px;
  font-weight:500;
  color:var(--ink-400);
}
.settings-card-label--sub{
  font-size:13px;
  font-weight:600;
  color:var(--ink-500);
}

.quality-control{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  max-width:260px;
}
.quality-control input[type="range"]{
  flex:1;
  accent-color:var(--brand-blue-500);
}
.quality-value{
  min-width:30px;
  text-align:center;
  font-size:13px;
  font-weight:800;
  color:#fff;
  background:var(--brand-gradient);
  border-radius:999px;
  padding:2px 9px;
}
#qualityRow[data-disabled="true"]{ opacity:.4; pointer-events:none; }

.convert-select{
  border:1px solid var(--border);
  border-radius:8px;
  padding:7px 10px;
  font-size:13.5px;
  font-weight:700;
  color:var(--ink-700);
  background:#fff;
  cursor:pointer;
}
.convert-select:focus{ outline:2px solid var(--brand-blue-500); outline-offset:1px; }

.resize-inputs{ display:flex; align-items:center; gap:8px; }
.resize-number{
  width:80px;
  border:1px solid var(--border);
  border-radius:8px;
  padding:7px 10px;
  font-size:13.5px;
  font-weight:700;
  color:var(--ink-700);
  background:#fff;
  text-align:center;
}
.resize-number:focus{ outline:2px solid var(--brand-blue-500); outline-offset:1px; }
.resize-number::-webkit-outer-spin-button,
.resize-number::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.resize-x{ color:var(--ink-400); font-weight:700; }

#resizeFitRow[data-disabled="true"]{ opacity:.4; pointer-events:none; }

.segmented{
  display:inline-flex;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  flex:none;
}
.segmented-btn{
  padding:6px 14px;
  font-size:12.5px;
  font-weight:700;
  color:var(--ink-500);
  background:#fff;
  border-inline-start:1px solid var(--border);
  transition:background .15s ease, color .15s ease;
}
.segmented-btn:first-child{ border-inline-start:none; }
.segmented-btn.is-active{
  background:var(--brand-gradient);
  color:#fff;
}

.switch{ position:relative; width:44px; height:26px; flex:none; }
.switch input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:1; }
.switch-track{
  position:absolute; inset:0;
  background:var(--ink-200);
  border-radius:999px;
  transition:background .18s ease;
}
.switch-track::before{
  content:"";
  position:absolute; top:3px; inset-inline-start:3px;
  width:20px; height:20px;
  border-radius:50%;
  background:#fff;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease;
}
.switch input:checked ~ .switch-track{ background:var(--brand-gradient); }
.switch input:checked ~ .switch-track::before{ transform:translateX(18px); }
html[dir="rtl"] .switch input:checked ~ .switch-track::before{ transform:translateX(-18px); }

/* ---------- Big dropzone ---------- */
.compress-dropzone{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
  background:var(--surface-alt);
  border:2.5px dashed var(--ink-200);
  border-radius:var(--radius-lg);
  padding:56px 24px;
  cursor:pointer;
  overflow:hidden;
  transition:border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.compress-dropzone::before{
  content:"";
  position:absolute; inset:0;
  background:var(--brand-gradient-soft);
  opacity:0;
  transition:opacity .25s ease;
}
.compress-dropzone:hover,
.compress-dropzone.dz-drag{
  border-color:var(--brand-blue-500);
  border-style:solid;
  box-shadow:var(--shadow-lg);
  transform:translateY(-2px);
}
.compress-dropzone:hover::before,
.compress-dropzone.dz-drag::before{ opacity:1; }
.compress-dropzone.dz-drag{ transform:translateY(-2px) scale(1.01); }
.compress-dropzone > *{ position:relative; z-index:1; }
.compress-dropzone .dz-icon-lg{
  width:76px; height:76px;
  border-radius:22px;
  background:var(--brand-gradient);
  box-shadow:var(--shadow-brand);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:10px;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.compress-dropzone:hover .dz-icon-lg,
.compress-dropzone.dz-drag .dz-icon-lg{ transform:translateY(-4px) rotate(-4deg) scale(1.05); }
.compress-dropzone .dz-icon-lg svg{ width:34px; height:34px; color:#fff; }
.compress-dropzone .dz-title{ font-size:19px; font-weight:800; color:var(--ink-900); }
.compress-dropzone .dz-sub{ font-size:14px; color:var(--ink-500); margin-bottom:8px; }

/* ---------- Paste-an-image-URL option (below the dropzone) ---------- */
.image-url-row{ margin-top:18px; }
.image-url-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  color:var(--ink-400);
  font-size:12.5px;
  font-weight:700;
}
.image-url-divider::before,
.image-url-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--border);
}
.image-url-form{
  display:flex;
  gap:10px;
}
.image-url-form input{
  flex:1;
  min-width:0;
  padding:12px 14px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:14px;
  font-family:inherit;
  background:#fff;
  color:var(--ink-900);
}
.image-url-form input:focus{
  outline:none;
  border-color:var(--brand-blue-500);
  box-shadow:0 0 0 3px rgba(30,111,239,.14);
}
.image-url-form button{ white-space:nowrap; }
.image-url-error{
  margin-top:8px;
  font-size:13px;
  color:#b42318;
}
@media (max-width:600px){
  .image-url-form{ flex-direction:column; }
}

/* ---------- Result cards ---------- */
.compress-results{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:20px;
}
.compress-results[hidden]{ display:none; }
.result-card{
  display:flex;
  align-items:center;
  gap:14px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:14px 16px;
}
.result-thumb{
  width:52px; height:52px; flex:none;
  border-radius:10px;
  background:var(--surface-alt);
  object-fit:cover;
  border:1px solid var(--border);
}
.result-thumb.is-comparable{
  position:relative;
  cursor:pointer;
  transition:box-shadow .15s ease, transform .15s ease;
}
.result-thumb.is-comparable:hover,
.result-thumb.is-comparable:focus-visible{
  box-shadow:0 0 0 3px rgba(30,111,239,.16);
  transform:scale(1.04);
}
.result-thumb.is-comparable:focus-visible{ outline:none; }
.result-info{ flex:1; min-width:0; }
.result-name{
  font-size:14px; font-weight:700; color:var(--ink-900);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.result-status{ font-size:13px; color:var(--ink-500); margin-top:2px; }
.result-status.is-failed{ color:#c0392b; }
.result-status .saved-pct{ color:var(--brand-green-500); font-weight:700; }
.result-status .already-optimal{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--brand-blue-600);
  font-weight:700;
}
.result-status .already-optimal::before{
  content:"";
  width:6px; height:6px; flex:none;
  border-radius:50%;
  background:var(--brand-blue-500);
}
.result-status .format-badge{
  color:var(--brand-blue-600);
  font-weight:800;
  font-size:11px;
  letter-spacing:.02em;
}

.result-sizes{
  display:flex; align-items:center; gap:6px;
  margin-top:4px;
  font-size:12.5px; font-weight:700;
}
.result-sizes:empty{ display:none; }
.result-sizes svg{ width:13px; height:13px; flex:none; color:var(--ink-400); }
.result-sizes .size-before{ color:var(--ink-400); text-decoration:line-through; text-decoration-color:var(--ink-200); }
.result-sizes .size-after{ color:var(--brand-green-500); }

.result-resize{
  display:flex; align-items:center; gap:5px;
  margin-top:4px;
  font-size:12px;
  color:var(--ink-500);
}
.result-resize[hidden]{ display:none; }
.result-resize svg{ width:12px; height:12px; flex:none; color:var(--brand-blue-500); }
.result-resize .resize-label{ font-weight:700; color:var(--brand-blue-600); }

.result-progress{
  width:100%; height:4px;
  background:var(--ink-100);
  border-radius:999px;
  overflow:hidden;
  margin-top:6px;
}
.result-progress-bar{
  height:100%;
  width:30%;
  background:var(--brand-gradient);
  border-radius:999px;
  animation:result-indeterminate 1.2s ease-in-out infinite;
}
@keyframes result-indeterminate{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(330%); }
}
/* transform is physical (always LTR), but the bar's container is
   mirrored under RTL — flip the animation direction to match, or the
   bar appears to start from the middle of the track instead of off it. */
html[dir="rtl"] .result-progress-bar{
  animation-name:result-indeterminate-rtl;
}
@keyframes result-indeterminate-rtl{
  0%{ transform:translateX(100%); }
  100%{ transform:translateX(-330%); }
}
.result-card.is-done .result-progress,
.result-card.is-failed .result-progress{ display:none; }

.result-action{ flex:none; display:flex; align-items:center; gap:8px; }
.result-action .btn{ padding:9px 18px; font-size:13.5px; }

/* ---------- Before/After compare modal ---------- */
.compare-modal{
  position:fixed; inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  visibility:hidden;
  opacity:0;
  transition:opacity .2s ease, visibility 0s linear .2s;
}
.compare-modal.is-open{
  visibility:visible;
  opacity:1;
  transition:opacity .2s ease;
}
.compare-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(11,18,32,.6);
  backdrop-filter:blur(2px);
}
.compare-modal-dialog{
  position:relative;
  display:flex;
  max-width:90%;
  max-height:90%;
  transform:scale(.96);
  transition:transform .2s ease;
}
.compare-modal.is-open .compare-modal-dialog{ transform:scale(1); }
.compare-modal-close{
  position:absolute;
  top:-14px; inset-inline-end:-14px;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:var(--shadow-md);
  color:var(--ink-700);
  z-index:2;
}
.compare-modal-close svg{ width:16px; height:16px; }
.compare-modal-close:hover{ color:var(--brand-blue-600); border-color:var(--brand-blue-500); }
.compare-modal .compare{
  box-shadow:var(--shadow-lg);
  max-width:90vw;
  max-height:90vh;
  min-width:180px;
  min-height:180px;
  width:auto;
  height:auto;
}
/* Sizing of the images themselves (as opposed to the box) is computed
   and set inline by compress.js's applyCompareSizing — see the comment
   there. This just re-centers them within the (possibly larger, once
   the 180px floor applies) box instead of the shared .compare rule's
   inset:0 stretch. right/bottom must be reset to auto — the shared
   .compare img{inset:0} rule leaves them at 0, and per the CSS spec, an
   absolutely-positioned box with direction:rtl (.compare sets
   dir="rtl"'s inherited direction) resolves an over-constrained
   left+right+width by honoring `right` and ignoring `left` — which threw
   the centering transform off by the box's full width, pushing the
   image off-screen to the left. */
.compare-modal .compare img{
  width:auto; height:auto;
  top:50%; left:50%; right:auto; bottom:auto;
  transform:translate(-50%, -50%);
}

/* Single-image mode (already-optimal results — see openImageModal in
   compress.js): just the plain image, none of the before/after slider
   chrome that implies there's a second version to compare against. */
.compare-modal.is-single .compare-tag,
.compare-modal.is-single .after-layer,
.compare-modal.is-single .compare-handle,
.compare-modal.is-single .compare-slider-input,
.compare-modal.is-single .compare-meta{ display:none; }

body.compare-modal-lock{ overflow:hidden; }

@media (max-width:600px){
  .compress-dropzone{ padding:40px 16px; }
  .result-card{ flex-wrap:wrap; }
  .result-action{ width:100%; }
  .result-action .btn{ flex:1; }
}

/* ---------- URL scan mode ---------- */
.page-scan-form label{
  display:block;
  font-size:13.5px;
  font-weight:700;
  color:var(--ink-700);
  margin-bottom:8px;
}
.page-scan-form-row{
  display:flex;
  gap:10px;
}
.page-scan-form-row input{
  flex:1;
  min-width:0;
  padding:13px 16px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:15px;
  font-family:inherit;
  background:#fff;
  color:var(--ink-900);
}
.page-scan-form-row input:focus{
  outline:none;
  border-color:var(--brand-blue-500);
  box-shadow:0 0 0 3px rgba(30,111,239,.14);
}
.page-scan-form-row button{ white-space:nowrap; }
@media (max-width:600px){
  .page-scan-form-row{ flex-direction:column; }
}

.page-scan-progress{
  margin-top:22px;
}
.page-scan-progress-bar{
  height:4px;
  background:var(--ink-100);
  border-radius:999px;
  overflow:hidden;
  position:relative;
}
.page-scan-progress-bar::after{
  content:"";
  position:absolute;
  inset-block:0;
  width:30%;
  background:var(--brand-gradient);
  border-radius:999px;
  animation:result-indeterminate 1.2s ease-in-out infinite;
}
html[dir="rtl"] .page-scan-progress-bar::after{ animation-name:result-indeterminate-rtl; }
.page-scan-progress-text{
  margin-top:10px;
  font-size:13.5px;
  color:var(--ink-500);
  text-align:center;
}

/* ---------- Page scan report ---------- */
.page-scan-report{
  margin-top:24px;
}
.page-scan-report.is-failed .page-scan-report-summary{
  background:#fef2f2;
  border-color:#fecaca;
}
.page-scan-report-summary{
  background:var(--brand-gradient-soft);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:26px 28px;
  text-align:center;
}
.page-scan-report-title{
  font-size:18px;
  font-weight:800;
  color:var(--ink-900);
  margin-bottom:4px;
}
.page-scan-report-url{
  font-size:13px;
  color:var(--ink-500);
  margin-bottom:10px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.page-scan-report-url .label{ font-weight:700; margin-inline-end:5px; }
.page-scan-report-url .url{ direction:ltr; unicode-bidi:isolate; }
.page-scan-report-images-found{
  font-size:13.5px;
  color:var(--ink-500);
  margin-bottom:20px;
}
.page-scan-report-stats{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  flex-wrap:wrap;
}
.page-scan-report-stat{ text-align:center; }
.page-scan-report-stat .label{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--ink-400);
  margin-bottom:4px;
}
.page-scan-report-stat .value{
  font-size:22px;
  font-weight:800;
  color:var(--ink-900);
}
.page-scan-report-stat.is-before .value{ color:var(--ink-400); text-decoration:line-through; text-decoration-color:var(--ink-200); }
.page-scan-report-stat.is-after .value{ color:var(--ink-900); }
.page-scan-report-arrow{ color:var(--ink-300); flex:none; }
.page-scan-report-arrow svg{ width:20px; height:20px; }
.page-scan-report-saved-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:18px;
  padding:8px 18px;
  border-radius:999px;
  background:var(--brand-green-500);
  color:#fff;
  font-weight:800;
  font-size:15px;
}
.page-scan-report-saved-badge svg{ width:14px; height:14px; }
.page-scan-report-error{
  color:#b42318;
  font-size:14px;
}

.page-scan-report-per-image-title{
  font-size:14px;
  font-weight:700;
  color:var(--ink-700);
  margin:24px 0 12px;
}

/* ---------- Shared-report notice + share box ---------- */
.page-scan-shared-notice{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  padding:10px 14px;
  border-radius:var(--radius-sm);
  background:var(--brand-gradient-soft);
  color:var(--brand-blue-600);
  font-size:13px;
  font-weight:700;
}
.page-scan-shared-notice svg{ width:15px; height:15px; flex:none; }

.page-scan-share-box{
  margin-top:20px;
  padding:18px 20px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
}
.page-scan-share-label{
  font-size:14px;
  font-weight:800;
  color:var(--ink-900);
  margin-bottom:2px;
}
.page-scan-share-hint{
  font-size:12.5px;
  color:var(--ink-500);
  margin-bottom:12px;
}
.page-scan-share-row{
  display:flex;
  gap:10px;
}
.page-scan-share-input{
  flex:1;
  min-width:0;
  padding:10px 12px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:13px;
  font-family:inherit;
  background:var(--surface-alt);
  color:var(--ink-700);
}
.page-scan-share-input:focus{
  outline:none;
  border-color:var(--brand-blue-500);
}
.page-scan-share-copy-btn{
  white-space:nowrap;
  min-width:96px;
}
@media (max-width:600px){
  .page-scan-share-row{ flex-direction:column; }
}