/* Shorts on the download page (js/shorts.js): one panel across both columns, in the page's own panel style
   (css/after-approve.css .dlx-card): white panel, hairline, 14px radius, rs tokens only (dark mode follows them). */
:root .p2-stage.dlx > .sh-host { grid-column: 1 / -1; min-width: 0; }
:root .p2-stage.dlx > .sh-host[hidden] { display: none; }
.sh-panel { display: grid; gap: 14px; padding: var(--rs-pad, 12px) calc(var(--rs-pad, 12px) + 4px) calc(var(--rs-pad, 12px) + 4px); border-radius: var(--rs-r-panel, 14px);
  background: var(--rs-panel, #fff); box-shadow: inset 0 0 0 1px var(--rs-line, rgba(31,31,33,.08)), var(--rs-shadow, none); color: var(--rs-tx, #1f1f21);
  font-size: var(--rs-fs-body, 13px); letter-spacing: var(--rs-ls, 0); }
.sh-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-top: 4px; }
.sh-h { margin: 0; font-size: var(--rs-fs-sec, 15px); font-weight: var(--rs-w-med, 500); line-height: 1.4; letter-spacing: 0; }
.sh-sub { margin: 2px 0 0; max-width: 68ch; font-size: var(--rs-fs-cap, 12px); line-height: 1.5; color: var(--rs-tx-2, #636366); }
.sh-head .rs-btn { flex: none; }
.sh-head .rs-btn svg, .sh-acts .rs-btn svg { width: 15px; height: 15px; }

/* empty: three quiet vertical frames, then one line */
.sh-empty { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: var(--rs-r-inner, 10px); background: var(--rs-inset, #f7f6f2); }
.sh-slot { flex: none; width: 30px; aspect-ratio: 9 / 16; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--rs-line-2, rgba(31,31,33,.14)); background: var(--rs-panel, #fff); }
.sh-slot--1 { transform: translateY(-3px); }
.sh-slot--2 { margin-right: 8px; }
.sh-empty-t { margin: 0; font-weight: var(--rs-w-med, 500); }
.sh-empty-n { margin: 0; font-size: var(--rs-fs-cap, 12px); line-height: 1.5; color: var(--rs-tx-2, #636366); }
.sh-empty--fail { align-items: flex-start; }
.sh-glyph { flex: none; color: var(--dk-tx-rs-neg, var(--rs-neg, #b4483c)); margin-top: 1px; }
.sh-warn { margin: 0; padding: 8px 10px; border-radius: var(--rs-r-sm, 8px); background: var(--rs-inset, #f7f6f2); font-size: var(--rs-fs-cap, 12px); color: var(--rs-tx-2, #636366); }
.sh-note { margin: 0; font-size: var(--rs-fs-cap, 12px); color: var(--rs-tx-3, rgba(31,31,33,.64)); }

/* working */
.sh-prog { display: grid; grid-template-columns: 16px auto minmax(60px, 1fr); align-items: center; gap: 10px; font-weight: var(--rs-w-med, 500); }
.sh-spin { display: inline-flex; color: var(--rs-peri-deep, #4c5f92); }
.sh-spin svg { width: 16px; height: 16px; animation: sh-turn 2.4s linear infinite; }
.sh-bar { position: relative; height: 4px; border-radius: 2px; overflow: hidden; background: var(--rs-raise, #eceae4); }
.sh-bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); border-radius: 2px; background: var(--rs-peri-deep, #4c5f92); transition: width .6s ease; }
.sh-bar--run i { width: 30%; animation: sh-run 1.6s ease-in-out infinite; }
@keyframes sh-turn { to { transform: rotate(360deg); } }
@keyframes sh-run { 0% { left: -30%; } 100% { left: 100%; } }

/* the shorts */
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.sh-card { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 14px; padding: 10px; border-radius: var(--rs-r-inner, 10px); background: var(--rs-inset, #f7f6f2); min-width: 0; }
.sh-frame { position: relative; aspect-ratio: 9 / 16; border-radius: var(--rs-r-sm, 8px); overflow: hidden; background: #141416; }
.sh-media { display: block; width: 100%; height: 100%; object-fit: cover; }
.sh-blank { background: var(--rs-raise, #eceae4); }
.sh-cover { all: unset; position: relative; display: block; width: 100%; height: 100%; cursor: pointer; }
.sh-cover:focus-visible { outline: 2px solid var(--rs-peri-deep, #4c5f92); outline-offset: 2px; }
.sh-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  background: rgba(255,255,255,.9); color: #1f1f21; box-shadow: 0 4px 14px rgba(0,0,0,.25); transition: transform .15s ease; }
.sh-play svg { width: 16px; height: 16px; margin-left: 2px; }
.sh-cover:hover .sh-play { transform: scale(1.06); }
.sh-len { position: absolute; left: 6px; bottom: 6px; padding: 2px 6px; border-radius: 999px; background: rgba(0,0,0,.62); color: #fff; font-size: 11px; font-variant-numeric: tabular-nums; }
.sh-veil { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; background: rgba(20,20,22,.62); color: #fff; font-size: var(--rs-fs-cap, 12px); }
.sh-veil .sh-spin { color: #fff; }
.sh-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 2px 0; }
.sh-title { margin: 0; font-size: var(--rs-fs-sec, 15px); font-weight: var(--rs-w-med, 500); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.sh-meta { margin: 0; font-size: var(--rs-fs-cap, 12px); color: var(--rs-tx-2, #636366); font-variant-numeric: tabular-nums; }
.sh-why { margin-top: 4px; font-size: var(--rs-fs-cap, 12px); color: var(--rs-tx-2, #636366); }
.sh-why summary { cursor: pointer; width: max-content; color: var(--rs-tx, #1f1f21); }
.sh-why ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; line-height: 1.45; }
.sh-why b { font-weight: var(--rs-w-med, 500); color: var(--rs-tx, #1f1f21); }
.sh-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.sh-acts .rs-btn--quiet[disabled] { opacity: .5; cursor: default; }
.sh-card.is-swapping .sh-body { opacity: .6; }
.sh-ghost .sh-blank { animation: sh-pulse 1.6s ease-in-out infinite; }
.sh-line { display: block; height: 10px; width: 80%; border-radius: 5px; background: var(--rs-raise, #eceae4); animation: sh-pulse 1.6s ease-in-out infinite; }
.sh-line--s { width: 45%; }
@keyframes sh-pulse { 50% { opacity: .55; } }

@media (max-width: 600px) {
  .sh-head { flex-direction: column; gap: 10px; }
  .sh-grid { grid-template-columns: minmax(0, 1fr); }
  .sh-card { grid-template-columns: 108px minmax(0, 1fr); gap: 12px; }
  .sh-title { font-size: var(--rs-fs-body, 13px); }
  .sh-ghost + .sh-ghost { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-spin svg, .sh-bar--run i, .sh-ghost .sh-blank, .sh-line { animation: none; }
}