/* §10 — RESULT RAIL: the result is lifted OUT of the right column and becomes a
   slim full-width band at the foot of each .cs-card (a card-level sibling, below
   the split). A full-width band reading short is correct for its width, so it can
   never look like an under-filled box — and with nothing below the screenshot the
   image->result void disappears entirely. */
.rsg-page .cs-card .cs-result { margin: 16px 0 0; padding-top: 0; display: block; flex: none; }
.rsg-page .cs-card .cs-result .cs-result-card {
  display: flex; align-items: center; gap: 18px; min-height: 0;
  padding: 15px 22px;
  background: linear-gradient(135deg, rgba(110,231,183,0.10), rgba(44,122,75,0.06));
  border: 1px solid rgba(110,231,183,0.28);
  border-top: 1px solid rgba(110,231,183,0.36);
  border-left: 4px solid #34D17F;
  border-radius: 14px;
}
.rsg-page .cs-card .cs-result .cs-result-card .csr-tag {
  flex: 0 0 auto; margin-bottom: 0;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 800; color: #6EE7B7;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(110,231,183,0.10); border: 1px solid rgba(110,231,183,0.30);
  white-space: nowrap;
}
.rsg-page .cs-card .cs-result .cs-result-card .csr-tag svg { width: 13px; height: 13px; }
.rsg-page .cs-card .cs-result .cs-result-card p {
  flex: 1 1 auto; margin: 0; font-size: 15px; line-height: 1.5; color: #fff; font-weight: 600;
}
.rsg-page .cs-card .cs-result .cs-result-card .csr-site {
  flex: 0 0 auto; margin-left: 8px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(110,231,183,0.72); font-weight: 700;
}
.rsg-page .cs-card .cs-result .cs-result-card .csr-site svg { width: 12px; height: 12px; color: #34D17F; flex-shrink: 0; }
@media (max-width: 540px) {
  .rsg-page .cs-card .cs-result .cs-result-card { flex-wrap: wrap; gap: 11px; padding: 14px 16px; }
  .rsg-page .cs-card .cs-result .cs-result-card p { flex: 1 1 100%; font-size: 14px; }
  .rsg-page .cs-card .cs-result .cs-result-card .csr-site { margin-left: 0; }
}
.rsg-page .cs-section .cs-tag { background: rgba(110,231,183,0.12); color:#6EE7B7; }
/* case windows: show the FULL screenshot fitted to the frame at natural aspect (no letterbox/shrink) */
.rsg-page .cs-section .cs-split { align-items: start; }
.rsg-page .cs-section .cs-right .cs-window.cs-window-wide { flex: none; display: block; }
.rsg-page .cs-section .cs-right .cs-window.cs-window-wide img { flex: none; max-height: none; height: auto; width: 100%; object-fit: contain; padding: 0; }
/* cs-eq cards (Su'Coy, Breeze): keep columns equal height so the split's bottom edge
   is flat across both columns. The left brand panel grows (flex:1) to the image baseline;
   the right column holds ONLY the screenshot, top-pinned. The transparent space below the
   screenshot carries NO border/background, so it stays invisibly part of the dark card —
   the full-width result rail directly beneath closes the composition. */
.rsg-page .cs-section .cs-split.cs-eq { align-items: stretch; }
.rsg-page .cs-section .cs-split .cs-right { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
.rsg-page .cs-section .cs-split .cs-right .cs-window.cs-window-wide { align-self: flex-start; margin-top: 0; }
@media (min-width: 881px) {
  .rsg-page .cs-section .cs-split.cs-fill { align-items: stretch; }
  .rsg-page .cs-section .cs-split.cs-fill .cs-right { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .rsg-page .cs-section .cs-split.cs-fill .cs-right .cs-window.cs-window-wide { display: flex; flex-direction: column; flex: 1 1 auto; align-self: stretch; margin: 0; min-height: 0; }
  .rsg-page .cs-section .cs-split.cs-fill .cs-right .cs-window.cs-window-wide img { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center center; padding: 0; }
}
.rsg-page .cs-rename { flex:1; display:flex; flex-direction:column; justify-content:center; gap:9px; margin-top:8px; padding:20px 22px; background:linear-gradient(155deg, rgba(110,231,183,0.08), rgba(110,231,183,0.02)); border:1px solid rgba(110,231,183,0.2); border-radius:14px; }
.rsg-page .cs-rename .csr-label { font-family:var(--font-mono); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; font-weight:800; color:#6EE7B7; margin-bottom:3px; }
.rsg-page .cs-rename .csr-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.rsg-page .cs-rename .csr-old { font-family:var(--font-display); font-size:14px; font-weight:600; color:rgba(255,255,255,0.42); text-decoration:line-through; text-decoration-color:rgba(255,255,255,0.32); flex-shrink:0; }
.rsg-page .cs-rename .csr-arrow { width:26px; height:26px; border-radius:50%; background:rgba(52,209,127,0.15); border:1px solid rgba(52,209,127,0.42); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rsg-page .cs-rename .csr-arrow svg { width:13px; height:13px; color:#34D17F; }
.rsg-page .cs-rename .csr-new { font-family:var(--font-display); font-size:21px; font-weight:800; color:#fff; line-height:1.05; letter-spacing:-0.01em; }
.rsg-page .cs-rename .csr-new span { display:block; font-family:var(--font-body); font-size:12.5px; font-weight:600; color:#6EE7B7; margin-top:4px; }
.rsg-page .cs-rename .csp-chips { display:flex; flex-wrap:wrap; gap:9px; }
.rsg-page .cs-rename .csp-chip { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:12.5px; font-weight:600; color:rgba(255,255,255,0.9); background:rgba(110,231,183,0.06); border:1px solid rgba(110,231,183,0.25); border-radius:999px; padding:7px 13px; }
.rsg-page .cs-rename .csp-chip svg { width:14px; height:14px; color:#34D17F; flex-shrink:0; }