/* Stage 9: original uses an actual U+E582 uniicons text glyph, not ::before. */
.back-glyph { display:block; position:relative; top:-.78125px; width:18px; height:18px; color:#fff; font-family:uniicons; font-size:18px; font-weight:400; line-height:18px; }
.ieo-card { height:121.2px; }
.amount-row { height:15px; line-height:15px; }
.amount-row .slash { display:inline-block; width:5px; flex:0 0 5px; font-weight:700; }
.remaining { position:relative; top:1px; }
.remaining [data-role="remaining-value"] { margin-left:5px; }

/* Keep the observed amount group and the remaining group as independent flex
   clusters. This preserves the literal spaces around the slash instead of
   allowing the right-aligned remaining value to compress the number string. */
.amount-row { justify-content:space-between; }
.amount-main { display:flex; align-items:center; min-width:0; white-space:nowrap; }
.remaining { margin-left:0; white-space:nowrap; }

/* The fill label remains visible: v3 pixel comparison confirms the original
   carries the same black percentage glyphs inside the cyan fill. */
.progress-label { display:block; }

/* Confirmed against the original card-scoped DOM: the action label is black. */
.join { color:#000; }
.progress { background:#e5e7eb; }
.progress { border-radius:15px; }
.remaining { top:0; }


/* The original uses a 0.5px rpx band at 375/390 and a 1px rpx band at 768.
   This scales component primitives and retains fluid card widths. */
@media (min-width: 750px) {
  .mobile-header { height: 98.4px; }
  .back { top:18.390625px; width:78px; height:61.59375px; padding:20px 30px; line-height:21.6px; }
  .back-glyph { width:18px; height:18px; font-size:18px; line-height:18px; }
  .title { left: 96px; top: .8px; height: 98.4px; padding: 30px; font-size: 32px; line-height: 38.4px; }
  .orders-link { right: 20px; top: 24px; height: 52.8px; padding: 10px; border-width: 2px; border-radius: 10px; font-size: 24px; line-height: 28.8px; }
  .cards { padding: 30px 30px 0; }
  .ieo-card { height: 242.4px; margin-bottom: 20px; padding: 20px; border-radius: 10px; }
  .card-top { height: 48.8px; margin-bottom: 10px; }
  /* Current ORIGINAL-A/LOCAL-A title scan: a +0.5px text-only baseline
     alignment raises 768 SSIM from .97458950 to .98190348.  It is isolated
     to the rpx/tablet band and leaves the two passed phone viewports intact. */
  .card-name { top: 3.2px; font-size: 32px; line-height: 38.4px; transform:translateY(1.5px); }
  .join { height: 48.8px; padding: 10px 20px; border-radius: 8px; font-size: 24px; line-height: 28.8px; }
  .status { left: 20px; top: 78.8px; height: 44.8px; padding: 6px 10px; border-width: 2px; border-radius: 8px; font-size: 24px; line-height: 28.8px; }
  .amount-row { left: 20px; right: 20px; top: 141.6px; height: 30px; font-size: 24px; line-height:30px; transform:translateY(1px); }
  .amount-row .gap { width:10px; flex-basis:10px; }
  .amount-row .slash { width:10px; flex-basis:10px; }
  .remaining { top:1px; }
  .remaining [data-role="remaining-value"] { margin-left:10px; }
  .progress { left: 20px; right: 20px; bottom: 20px; height: 30px; border-radius:30px; }
  .progress-fill { height: 30px; }
  .progress-label { right: 10px; top:-1px; font-size: 24px; line-height: 30px; }
  .orders-table { padding: 30px; font-size: 24px; }
  .orders-row { height: 76px; min-width: 1440px; }
  .orders-empty { padding-top: 80px; }
}