/* MAKE IT SHARPER (1080p) page (Oct 17 2026, static/sharpen.js) — every rule under .shp- ; colours only through tokens.css variables,
   so both themes work. It stands on the studio's own pieces (.card .cap-hero, .cap-drop, .cap-tiles, .btn, .badge, .jp-bar, .tip) and
   only adds layout. Nothing scrolls the page sideways: long names are cut with … and keep their whole name in the hover hint. */
.shp-card { min-width: 0; }
.shp-h { margin: 0 0 4px; font-size: 20px; display: flex; align-items: center; gap: 8px; }
.shp-lead { margin: 0 0 12px; max-width: 60ch; }
.shp-sub { margin: 16px 0 8px; font-size: 16px; }
#shp-yours-h { margin-top: 0; }
.shp-row, .shp-it { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.shp-it { flex-direction: column; gap: 4px; align-items: stretch; }
.shp-row-main { flex: 1; min-width: 0; }
.shp-name { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.shp-it-h { display: flex; gap: 8px; align-items: center; min-width: 0; }
.shp-it-h .shp-name { flex: 1; }
.shp-why { color: var(--danger); font-size: 13px; margin-top: 2px; }
.shp-note, .shp-say { margin-top: 2px; }
.shp-x { flex: none; min-width: 32px; }
.shp-go { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.shp-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.shp-batch + .shp-batch { margin-top: 14px; }
.shp-batch-h { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
@media (max-width: 640px) {
  .shp-go .btn, .shp-acts .btn { flex: 1 1 100%; }
}