/* ===================================================================
   HIRIRA tool interface

   The images are the content; everything else is chrome and is kept to
   one row. Settings are dropdown buttons (a popover on desktop, a
   bottom sheet on a phone) instead of a panel of chips, and results are
   hairline separated rows instead of cards.

   Ad slots are never styled inside .tool, so nothing can render
   between the drop area and the download button.
=================================================================== */

.tool {
  --ease: cubic-bezier(.22, .61, .36, 1);
  position: relative;
}

/* Once there is work on screen the whole tool accepts a drop, so this
   outline is the only feedback needed. */
.tool.is-over::after {
  content: '';
  position: absolute; inset: -10px;
  border: 2px dashed var(--accent-deep);
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  pointer-events: none;
}

/* ---------- drop area ---------------------------------------------
   The whole invitation while empty; a thin add strip afterwards.
------------------------------------------------------------------- */
/* One tidy block: icon, headline, formats, button. Everything on the
   centre line, generous inside, and clearly separated from the copy
   above it. */
.drop {
  position: relative;
  display: grid; justify-items: center; align-content: center;
  gap: 2px;
  text-align: center;
  margin-top: 22px;
  padding: 34px 24px 32px;
  border: 1.5px dashed var(--line-firm);
  border-radius: 20px;
  background: var(--bg-sunk);
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.drop input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.drop:hover { border-color: var(--ink-faint); background: var(--bg-raised); }
.drop:hover .drop-icon { transform: translateY(-2px); color: var(--ink-soft); }
.drop:hover .drop-cta { background: var(--accent); color: var(--accent-ink); }

.drop-icon {
  width: 26px; height: 26px; margin-bottom: 14px;
  color: var(--ink-faint);
  stroke: currentColor; stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s var(--ease), color .18s var(--ease);
}
.drop-title { font-size: 1.08rem; font-weight: 680; letter-spacing: -.015em; }
.drop-sub { margin-top: 3px; font-size: .85rem; color: var(--ink-faint); }
.drop-cta {
  margin-top: 18px; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: var(--bg);
  padding: 11px 26px; border-radius: 999px;
  font-weight: 680; font-size: .92rem;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.drop-meta { margin-top: 14px; font-size: .75rem; color: var(--ink-faint); }

.safe-note {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 12px; font-size: .78rem; color: var(--ink-faint);
}
.safe-note svg { width: 13px; height: 13px; flex: none; stroke: currentColor; stroke-width: 2; fill: none; }

/* Empty state only. Once files exist, Add lives in the control row. */
.tool.has-files .drop,
.tool.has-files .safe-note { display: none; }

/* ---------- control row --------------------------------------------
   The drop area is gone once there are files, so this needs its own
   breathing room under the page copy. */
.work { margin-top: 24px; }

.bar {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.add-btn {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font: inherit; font-size: .88rem; font-weight: 680;
  padding: 9px 15px; min-height: 40px;
  background: var(--ink); color: var(--bg);
  border: 0; border-radius: 999px; cursor: pointer;
  transition: background-color .14s var(--ease), color .14s var(--ease), transform .12s var(--ease);
}
.add-btn:hover { background: var(--accent); color: var(--accent-ink); }
.add-btn:active { transform: scale(.96); }
.add-btn svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.6; fill: none; stroke-linecap: round; }

.menus { display: flex; align-items: center; gap: 6px; min-width: 0; }

.mbtn {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font: inherit; font-size: .86rem; font-weight: 560;
  padding: 8px 12px; min-height: 40px;
  color: var(--ink-soft);
  background: var(--bg-sunk);
  border: 1px solid transparent;
  border-radius: 999px; cursor: pointer;
  white-space: nowrap;
  transition: background-color .14s var(--ease), border-color .14s var(--ease),
              color .14s var(--ease);
}
.mbtn b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.mbtn:hover { border-color: var(--line-firm); color: var(--ink); }
.mbtn:hover svg { opacity: .9; }
.mbtn:active { transform: scale(.97); }
.mbtn[aria-expanded="true"] { border-color: var(--ink); background: var(--bg); color: var(--ink); }
.mbtn svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.4; fill: none; opacity: .5; transition: transform .16s var(--ease); }
.mbtn[aria-expanded="true"] svg { transform: rotate(180deg); opacity: 1; }
.mbtn-icon { padding: 8px 11px; }
.mbtn-icon svg { width: 16px; height: 16px; opacity: .7; }
.mbtn-icon[aria-expanded="true"] svg { transform: none; }

.bar .spacer { flex: 1; }

/* Batch progress sits on the row divider, so it costs no height. */
.bar-run {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  overflow: hidden; border-radius: 2px;
}
.runbar {
  display: block; height: 100%; width: 0;
  background: var(--accent);
  transition: width .24s var(--ease);
}

/* ---------- popover menu ------------------------------------------- */
.menu {
  position: fixed; z-index: 200;
  width: 248px;
  padding: 6px;
  background: var(--bg-raised);
  border: 1px solid var(--line-firm);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16), 0 2px 6px rgba(0, 0, 0, .06);
  animation: menu-in .14s var(--ease);
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

.menu-title {
  font-size: .69rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint); padding: 8px 10px 6px;
}
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: inherit; text-align: left;
  padding: 9px 10px; min-height: 40px;
  background: none; border: 0; border-radius: 9px; cursor: pointer;
  color: var(--ink);
  transition: background-color .12s var(--ease);
}
.menu-item:hover { background: var(--bg-sunk); }
.mi-text { flex: 1; min-width: 0; }
.mi-label { display: block; font-size: .91rem; font-weight: 600; }
.mi-hint { display: block; font-size: .76rem; color: var(--ink-faint); margin-top: 1px; }
.mi-tick {
  width: 16px; height: 16px; flex: none;
  stroke: var(--accent-deep); stroke-width: 2.6; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: scale(.7);
  transition: opacity .14s var(--ease), transform .14s var(--ease);
}
.menu-item.is-on .mi-tick { opacity: 1; transform: none; }
.menu-item.is-on .mi-label { color: var(--ink); }

.menu-custom { display: flex; gap: 6px; padding: 4px 10px 10px; }
.menu-custom label {
  display: flex; align-items: center; gap: 6px; flex: 1;
  font-size: .76rem; color: var(--ink-faint);
  border: 1px solid var(--line-firm); border-radius: 9px;
  padding: 0 10px 0 10px; min-height: 40px;
}
.menu-custom label:focus-within { border-color: var(--ink); }
.menu-custom input {
  width: 100%; min-width: 0; border: 0; background: transparent;
  font: inherit; font-size: .9rem; font-weight: 650; color: var(--ink);
  text-align: right; padding: 6px 0;
}
.menu-custom input:focus { outline: none; }

.menu-note { font-size: .75rem; color: var(--ink-faint); padding: 2px 10px 8px; }

.menu-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; font-size: .88rem; color: var(--ink-soft);
}
.menu-row select {
  font: inherit; font-size: .86rem; padding: 7px 8px; min-height: 36px;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line-firm); border-radius: 9px;
}
.menu-check {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 10px; font-size: .87rem; color: var(--ink-soft);
  border-radius: 9px; cursor: pointer;
}
.menu-check:hover { background: var(--bg-sunk); }
.menu-check input { margin-top: 1px; width: 16px; height: 16px; flex: none; accent-color: var(--accent-deep); }

/* ---------- notices ------------------------------------------------ */
.note-line {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 9px 12px;
  border-radius: 10px;
  font-size: .84rem;
}
.note-line.tint { background: var(--accent-wash); color: var(--accent-deep); font-weight: 600; }
.note-line.warn { background: var(--warn-wash); color: var(--warn); }
.note-line input[type="color"] {
  width: 34px; height: 28px; padding: 2px; flex: none;
  border: 1px solid var(--line-firm); border-radius: 7px; background: var(--bg);
  cursor: pointer;
}

/* ---------- list head ---------------------------------------------- */
.listhead {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 2px 8px;
}
.listhead .count { font-weight: 680; font-size: .92rem; }
.listhead .spacer { flex: 1; }
.link-btn {
  font: inherit; font-size: .86rem; font-weight: 620;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-faint); padding: 7px 9px; border-radius: 8px;
  transition: color .14s var(--ease), background-color .14s var(--ease);
}
.link-btn:hover { color: var(--ink); background: var(--bg-sunk); }
.busy { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--ink-faint); }
.busy::before {
  content: ''; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent-deep);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- rows ---------------------------------------------------
   Hairlines, not cards. Half the height, and the eye can run straight
   down the numbers.
------------------------------------------------------------------- */
.rows { display: block; }

/* Every cell is placed explicitly. Mixing explicit and automatic
   placement lets the browser drop two items into one cell. */
.row {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px; row-gap: 1px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
}

/* Progress for this one image, along the row divider so it costs no
   height. It runs fast then eases off and never reaches the end on its
   own: the row swapping to the result is what finishes it. Pure CSS, so
   it keeps moving without depending on a JavaScript frame loop. */
.row-bar {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; overflow: hidden; border-radius: 2px;
}
.row-bar i {
  display: block; height: 100%; width: 0;
  background: var(--accent);
  animation: row-creep 7s cubic-bezier(.06, .72, .24, 1) forwards;
}
@keyframes row-creep {
  from { width: 5%; }
  to   { width: 92%; }
}

/* Done: run the line out to the end, then take it away. */
.row-bar.is-done { animation: bar-clear .3s var(--ease) .34s forwards; }
.row-bar.is-done i { animation: bar-finish .3s var(--ease) forwards; }
@keyframes bar-finish { from { width: 92%; } to { width: 100%; } }
@keyframes bar-clear { to { opacity: 0; } }

/* The tick draws itself over the thumbnail, holds, then clears. A
   stroke that draws in reads as a result; a shape that pops in reads
   as decoration. */
.row-tick {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(12, 14, 17, .58);
  animation: tick-clear 1.05s var(--ease) forwards;
}
.row-tick svg {
  width: 20px; height: 20px;
  stroke: var(--accent); stroke-width: 3; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 26; stroke-dashoffset: 26;
  animation: tick-draw .34s cubic-bezier(.5, 0, .3, 1) .04s forwards;
}
@keyframes tick-draw { to { stroke-dashoffset: 0; } }
@keyframes tick-clear {
  0%, 62% { opacity: 1; }
  100%    { opacity: 0; visibility: hidden; }
}
.row.is-working .row-thumb { opacity: .5; }
.row.is-working .row-thumb, .row.is-queued .row-thumb { transition: opacity .2s var(--ease); }
.row-thumb { grid-column: 1; grid-row: 1 / span 2; }
.row-name  { grid-column: 2; grid-row: 1; }
.row-meta  { grid-column: 2; grid-row: 2; }
.row-stat  { grid-column: 3; grid-row: 1 / span 2; }
.row-act   { grid-column: 4; grid-row: 1 / span 2; }
.row-extra { grid-column: 2 / -1; grid-row: 3; }
.row:last-child { border-bottom: 0; }
.row.enters { animation: row-in .22s var(--ease) both; }
@keyframes row-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.row-thumb {
  position: relative;
  width: 44px; height: 44px; padding: 0; flex: none;
  border: 0; border-radius: 9px; overflow: hidden;
  background: var(--bg-sunk); cursor: pointer;
  display: grid; place-items: center;
}
.row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.row-thumb.is-blank { cursor: default; }
.row-eye {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(10, 12, 14, .5);
  opacity: 0; transition: opacity .15s var(--ease);
}
.row-eye svg { width: 17px; height: 17px; stroke: #fff; stroke-width: 1.9; fill: none; }
.row-thumb:hover .row-eye, .row-thumb:focus-visible .row-eye { opacity: 1; }

/* An identifier, not a headline. The numbers on the right are what
   people are actually reading. */
.row-name {
  min-width: 0;
  font-size: .82rem; font-weight: 500; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-meta {
  min-width: 0;
  font-size: .77rem; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.row-stat {
  display: flex; align-items: baseline; gap: 6px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.row-stat s { color: var(--ink-faint); font-size: .82rem; text-decoration-thickness: 1px; }
.row-stat .arw { color: var(--ink-faint); font-size: .72rem; font-style: normal; }
.row-stat b { font-size: 1.02rem; font-weight: 750; letter-spacing: -.015em; }
.row-stat em {
  font-style: normal; font-size: .74rem; font-weight: 750;
  padding: 3px 8px; border-radius: 999px;
  animation: fade-in .3s var(--ease) both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.row-stat .save { background: var(--good-wash); color: var(--good); }
.row-stat .over { background: var(--warn-wash); color: var(--warn); }
.row-stat .bad  { background: var(--bad-wash);  color: var(--bad); }

.row-act { display: flex; gap: 4px; align-items: center; }
.ibtn {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 10px;
  background: transparent; color: var(--ink-faint); cursor: pointer;
  transition: background-color .14s var(--ease), color .14s var(--ease), transform .12s var(--ease);
}
.ibtn svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ibtn:hover { background: var(--bg-sunk); color: var(--ink); }
.ibtn:active { transform: scale(.92); }
.ibtn.go { background: var(--accent); color: var(--accent-ink); }
.ibtn.go:hover { background: var(--ink); color: var(--bg); }

.row-extra { grid-column: 2 / -1; margin-top: 6px; }
.row-warn { font-size: .8rem; color: var(--warn); }
.fix-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pill {
  font: inherit; font-size: .79rem; font-weight: 650;
  padding: 6px 12px; min-height: 32px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-firm); border-radius: 999px; cursor: pointer;
  transition: background-color .14s var(--ease), color .14s var(--ease),
              border-color .14s var(--ease), transform .1s var(--ease);
}
.pill:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pill:active { transform: scale(.96); }

/* Working state: one shimmer bar where the number will land. */
.sk {
  display: inline-block; border-radius: 999px;
  background: linear-gradient(90deg, var(--bg-sunk) 25%, var(--line) 45%, var(--bg-sunk) 65%);
  background-size: 280% 100%;
  animation: sweep 1.1s linear infinite;
}
.sk-a { width: 82px; height: 15px; }
.sk-b { width: 110px; height: 10px; }
@keyframes sweep {
  from { background-position: 140% 0; }
  to   { background-position: -140% 0; }
}

/* ---------- download bar ------------------------------------------- */
.dlbar {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px; padding: 13px 16px;
  border-radius: 14px;
  background: var(--bg-sunk);
}
.dl-stat {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.dl-stat s { color: var(--ink-faint); font-size: .86rem; text-decoration-thickness: 1px; }
.dl-stat .arw { color: var(--ink-faint); font-size: .74rem; font-style: normal; }
.dl-stat strong { color: var(--ink); font-weight: 750; font-size: 1.12rem; letter-spacing: -.015em; }
.dl-stat em {
  font-style: normal; font-size: .76rem; font-weight: 750;
  padding: 3px 9px; border-radius: 999px;
}
.dl-stat .save { background: var(--good-wash); color: var(--good); }
.dl-stat .flag { background: var(--warn-wash); color: var(--warn); }

.btn-zip {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: .92rem; font-weight: 720;
  padding: 12px 22px; min-height: 46px;
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: background-color .14s var(--ease), color .14s var(--ease), transform .12s var(--ease);
}
.btn-zip:hover { background: var(--ink); color: var(--bg); transform: translateY(-1px); }
.btn-zip:active { transform: scale(.98); }
.btn-zip:disabled { opacity: .6; cursor: wait; transform: none; }
.btn-zip svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- preview overlay ---------------------------------------- */
.preview {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: 20px;
  background: rgba(8, 10, 12, .84);
  animation: fade-in .16s var(--ease);
}
.preview-box {
  width: min(780px, 100%);
  background: var(--bg-raised);
  border-radius: 18px; overflow: hidden;
  animation: menu-in .22s var(--ease);
}
.preview-img {
  display: grid; place-items: center;
  background: repeating-conic-gradient(var(--bg-sunk) 0% 25%, var(--bg) 0% 50%) 50% / 18px 18px;
  min-height: 220px;
}
.preview-img img { max-height: 58vh; width: auto; object-fit: contain; }
.preview-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 15px; border-top: 1px solid var(--line);
}
.preview-cap { font-size: .86rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.preview-cap b { color: var(--ink); }
.side-switch { display: flex; gap: 3px; padding: 3px; background: var(--bg-sunk); border-radius: 999px; }
.side-switch button {
  font: inherit; font-size: .83rem; font-weight: 650;
  padding: 7px 15px; min-height: 34px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ink-soft);
  transition: background-color .14s var(--ease), color .14s var(--ease);
}
.side-switch button.is-on { background: var(--bg-raised); color: var(--ink); }
.preview-close { margin-left: auto; }

/* ===================================================================
   PHONE
=================================================================== */
@media (max-width: 899px) {
  .drop { margin-top: 18px; padding: 28px 18px 26px; border-radius: 18px; }
  .drop-icon { margin-bottom: 11px; }
  .drop-title { font-size: 1.02rem; }
  .drop-cta { margin-top: 15px; }

  /* One scrolling row of controls: 48px of chrome, not a panel. */
  .bar {
    gap: 6px;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .bar::-webkit-scrollbar { display: none; }
  .bar .spacer { display: none; }
  .bar-run { left: var(--gutter); right: var(--gutter); }
  .mbtn, .add-btn { min-height: 42px; }

  /* Menus become bottom sheets, which is where thumbs already are. */
  .menu.as-sheet {
    left: 0 !important; right: 0; top: auto !important; bottom: 0;
    width: auto;
    padding: 8px 10px calc(14px + env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
    animation: sheet-in .22s var(--ease);
  }
  .menu.as-sheet::before {
    content: ''; display: block;
    width: 36px; height: 4px; margin: 2px auto 8px;
    border-radius: 99px; background: var(--line-firm);
  }
  @keyframes sheet-in {
    from { transform: translateY(100%); }
    to   { transform: none; }
  }
  .menu-item { min-height: 46px; }

  .listhead { padding: 12px 0 6px; }

  /* Three stacked lines instead of one wide one, and the numbers lead
     because they are what people came for. */
  .row {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    column-gap: 11px; row-gap: 1px;
    padding: 9px 0;
  }
  .row-thumb { grid-column: 1; grid-row: 1 / span 3; width: 42px; height: 42px; }
  .row-name  { grid-column: 2; grid-row: 1; }
  .row-stat  { grid-column: 2; grid-row: 2; }
  .row-meta  { grid-column: 2; grid-row: 3; }
  .row-act   { grid-column: 3; grid-row: 1 / span 3; }
  .row-extra { grid-column: 1 / -1; grid-row: 4; }

  .row-name { font-size: .79rem; font-weight: 500; color: var(--ink-faint); }
  .row-stat b { font-size: 1.02rem; }
  .row-meta { font-size: .73rem; }

  .dlbar {
    position: sticky; bottom: 0; z-index: 40;
    margin: 12px calc(var(--gutter) * -1) 0;
    padding: 11px var(--gutter) calc(11px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(12px);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .08);
  }
  .work { margin-top: 18px; padding-bottom: 64px; }
  .dl-stat { flex: 1; min-width: 0; flex-wrap: nowrap; overflow: hidden; gap: 6px; }
  .dl-stat s, .dl-stat .arw { display: none; }
  .dl-stat strong { font-size: 1rem; }
  .btn-zip { padding: 11px 16px; min-height: 44px; font-size: .85rem; }
  .btn-zip svg { display: none; }

  .preview { padding: 0; align-items: end; }
  .preview-box { width: 100%; border-radius: 20px 20px 0 0; }
  .preview-img img { max-height: 52vh; }
  .preview-foot { padding-bottom: calc(13px + env(safe-area-inset-bottom)); }
}

/* ===================================================================
   DESKTOP
=================================================================== */
@media (min-width: 900px) {
  .drop { margin-top: 26px; padding: 44px 24px 40px; }
  .row { padding: 11px 4px; }
  .row:hover .row-name { color: var(--ink); }
  .row:hover { background: var(--bg-sunk); border-radius: 10px; }
}