/* Creator workspace: collections first, with explicit creation choices. */
.rail {
  overflow-y: auto;
  padding: 22px 16px 16px;
}
.rail-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.nav-group { margin-bottom: 12px; }
.nav-group + .nav-group { padding-top: 12px; border-top: 1px solid var(--line); }
[data-brand] .rail .nav-group .nav {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px;
  padding: 10px 12px; margin: 2px 0; border: 1px solid transparent;
  border-radius: 5px; background: transparent; color: var(--mute);
  font: 500 13px/1.4 var(--body); text-align: left; text-decoration: none;
}
.rail .nav-group .nav:hover { color: var(--ink); background: var(--line-2); }
.rail .nav-group .nav.active { color: var(--ink); background: var(--tape); border-color: var(--line); font-weight: 650; }
[data-brand="sloppr"] .rail .nav-group .nav.active { border-color: var(--ink); }
[data-brand] .rail .nav-group .nav .icon { width: 18px; height: 18px; }
.rail .who { flex-shrink: 0; }
.mobile-menu { display: none; }
.overview-collections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 30px 0 36px; }
.overview-collection { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.collection-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.collection-heading h2, .overview-create > h2 { font: 700 21px/1.35 var(--body); letter-spacing: -.5px; text-transform: none; }
.collection-heading > a { display: flex; align-items: center; gap: 6px; flex-shrink: 0; min-height: 40px; font-size: 12px; font-weight: 600; text-decoration: none; }
.collection-heading > a:hover { text-decoration: underline; }
.collection-heading > a .icon { width: 15px; height: 15px; }
.collection-count { display: inline-block; color: var(--mute); font-size: 14px; font-weight: 500; margin-left: 4px; }
.collection-description { font-size: 13px; color: var(--mute); margin: 3px 0 20px; }
.collection-empty { min-height: 218px; padding: 34px 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.collection-empty > .icon { width: 28px; height: 28px; margin-bottom: 15px; color: var(--mute); }
.collection-empty h3 { font-size: 16px; margin-bottom: 7px; }
.collection-empty p { max-width: 280px; font-size: 13px; color: var(--mute); line-height: 1.65; }
.overview-product-list { display: grid; gap: 10px; }
.overview-product { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 88px; text-decoration: none; padding: 10px 0; border-top: 1px solid var(--line-2); }
.overview-product:hover strong { text-decoration: underline; }
.overview-product-image { width: 62px; height: 68px; background: var(--cyc); border-radius: 5px; display: grid; place-items: center; overflow: hidden; }
.overview-product-image img { width: 100%; height: 100%; object-fit: contain; }
.overview-product-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.overview-product-info strong { font-size: 14px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.overview-product-info small { font-size: 11px; color: var(--mute); overflow-wrap: anywhere; }
.overview-create { margin: 26px 0 30px; }
.overview-create > h2 { margin-bottom: 14px; }
.creation-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.creation-card { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: start; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); transition: border-color .15s, box-shadow .15s; }
.creation-card:hover { border-color: var(--ink); box-shadow: 0 3px 0 var(--line); }
.creation-icon { grid-row: span 2; width: 40px; height: 40px; border-radius: 8px; background: #e8edde; color: #354738; display: grid; place-items: center; }
.create-video .creation-icon { background: #f0eed6; color: #504a2f; }
.create-remix .creation-icon { background: #f8e6df; color: #733d2d; }
.creation-card h3 { font: 700 16px/1.3 var(--body); margin: 2px 0 4px; letter-spacing: -.3px; text-transform: none; }
.creation-card h3 a, .creation-card h3 button { font: inherit; color: inherit; text-decoration: none; border: 0; background: none; padding: 0; text-align: left; }
.creation-card h3 a::after, .creation-card h3 button::before { content: ''; position: absolute; inset: 0; border-radius: 10px; }
.creation-card:focus-within { outline: 3px solid var(--green); outline-offset: 4px; }
.creation-card p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--mute); }
@media (min-width: 761px) {
  .rail .rail-content { overflow: visible; }
  .rail > .brand { flex-shrink: 0; }
  .rail-content > .spacer { min-height: 10px; }
}
@media (max-width: 1100px) {
  .overview-collections { gap: 16px; }
  .overview-collection { padding: 16px; }
  .collection-heading h2 { font-size: 18px; }
  .creation-card { padding: 16px; }
}
@media (max-width: 900px) {
  .overview-collections { grid-template-columns: minmax(0, 1fr); }
  .collection-empty { min-height: 150px; padding-block: 22px; }
  .creation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .creation-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 760px) {
  .rail { justify-content: space-between; overflow: visible; }
  .rail > .brand { flex-basis: auto; margin: 0; }
  .mobile-menu { display: inline-flex; min-height: 44px; padding: 8px 12px; }
  .rail-content { display: none; flex-basis: 100%; }
  .rail.menu-open .rail-content { display: flex; padding-top: 22px; }
  .rail .nav-group { margin-bottom: 12px; }
  [data-brand] .rail .nav-group .nav { min-height: 44px; font-size: 14px; }
  .rail-content > .spacer { display: none; }
  .overview-collections { margin-top: 24px; margin-bottom: 28px; }
  .overview-collection { padding: 18px; }
  .collection-description { margin-bottom: 12px; }
  .collection-empty { min-height: 160px; }
  .collection-heading h2 { font-size: 20px; }
  .overview-product .pill { font-size: 10px; padding: 3px 6px; }
  .overview-product { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; }
  .overview-product-image { width: 48px; height: 60px; }
}
@media (max-width: 360px) {
  .overview-collection { padding: 14px; }
  .collection-heading h2 { font-size: 18px; }
  .collection-heading > a { font-size: 11px; gap: 3px; }
  .overview-product { grid-template-columns: 42px minmax(0, 1fr); }
  .overview-product > .pill { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .creation-card { transition: none; }
}
.printful-selling-summary { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 24px; }
.printful-selling-summary h2 { margin: 8px 0; font-size: 22px; }
.printful-selling-summary p { max-width: 65ch; line-height: 1.6; }
.printful-selling-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; flex-shrink: 0; }
.printful-preparation { margin: 28px 0; }
@media (max-width: 780px) {
  .printful-selling-summary { flex-direction: column; align-items: flex-start; gap: 12px; }
  .printful-selling-actions { max-width: 100%; }
}

/* Admin moderation: a reason and one action per row. */
.moderation-action {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
}
.moderation-action .field {
  flex: 1 1 220px;
  margin: 0;
}
.moderation-search {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}
.moderation-search .field {
  flex: 1 1 320px;
  margin: 0;
}
.removed-note {
  border-color: var(--signal);
}
.moderation-character { display: flex; align-items: center; gap: 10px; min-width: 0; }
.moderation-character img { width: 40px; aspect-ratio: 2 / 3; flex: none; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; background: #f1f0ea; }
.moderation-character > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.moderation-character small { color: var(--mute); }
.moderation-action .check { flex-basis: 100%; margin: 0; font-size: 13px; }
/* Admin reports: one card per open report, its deadline beside the ticket. */
.report-item .section-heading { flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px; }
.report-item .section-heading .row { gap: 6px; }
.report-item p, .report-history td { overflow-wrap: anywhere; }
.report-details { white-space: pre-wrap; }
.report-outcome { display: flex; flex-wrap: wrap; gap: 4px 20px; flex-basis: 100%; min-width: 0; margin: 0; padding: 0; border: 0; }
.report-outcome legend { padding: 0; margin-bottom: 4px; font-size: 11px; font-weight: 600; }
.report-outcome .check { display: flex; flex-basis: auto; gap: 8px; align-items: center; }

/* Characters: a cast you create once and reuse. Portrait tiles share one
   2:3 frame everywhere (library, creation, studio) so a look never jumps. */
.overview-cast { margin: 30px 0 0; }
.overview-cast + .overview-collections { margin-top: 22px; }
.overview-cast-list { display: flex; gap: 14px; margin-top: 4px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.cast-avatar { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 78px; flex: none; text-decoration: none; color: var(--ink); }
.cast-avatar > span { display: grid; place-items: center; width: 78px; aspect-ratio: 2 / 3; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #f1f0ea; color: var(--mute); transition: border-color .15s, transform .15s; }
.cast-avatar img { width: 100%; height: 100%; object-fit: contain; }
.cast-avatar b { max-width: 100%; font-size: 12px; font-weight: 600; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cast-avatar:hover > span { border-color: var(--ink); transform: translateY(-2px); }
.cast-avatar.is-new > span { border-style: dashed; background: transparent; }
.overview-cast-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.overview-cast-empty p { margin: 0; font-size: 13px; color: var(--mute); }

.cast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 20px; margin-top: 28px; }
.cast-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; text-decoration: none; color: var(--ink); }
.cast-card-image { display: grid; place-items: center; aspect-ratio: 2 / 3; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #f1f0ea; color: var(--mute); transition: border-color .15s, box-shadow .15s, transform .15s; }
.cast-card-image img { width: 100%; height: 100%; object-fit: contain; }
.cast-card:hover .cast-card-image { border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px); }
.cast-card-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cast-card-info b { font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.cast-card-info small { font-size: 12px; color: var(--mute); }
.cast-card.is-removed .cast-card-image img { opacity: .45; filter: grayscale(1); }
.cast-card.is-removed .cast-card-info small { color: var(--signal); }
.cast-empty .empty-icon .icon { width: 26px; height: 26px; }
.cast-drafts { margin-top: 28px; }
.cast-drafts h2 { font: 700 17px/1.4 var(--body); text-transform: none; letter-spacing: -.3px; margin-bottom: 12px; }
.cast-draft-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cast-draft { display: grid; grid-template-columns: 76px minmax(0, 1fr) 18px; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-decoration: none; color: var(--ink); }
.cast-draft:hover { border-color: var(--ink); }
.cast-draft-looks { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 76px; aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden; }
.cast-draft-looks img { width: 100%; height: 100%; object-fit: cover; background: #f1f0ea; }
.cast-draft-looks .look-tile { grid-column: 1 / -1; grid-row: span 2; border-radius: 0; }
.cast-draft-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cast-draft-info b { font-size: 14px; font-weight: 650; }
.cast-draft-info small { font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cast-draft > .icon { width: 18px; height: 18px; }

/* Creation: one calm column. Describe → choose → name. */
.creator { max-width: 1000px; margin-top: 26px; }
.creator-compose { padding: 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.creator-description textarea { min-height: 112px; font-size: 16px; line-height: 1.55; resize: vertical; }
.style-picker { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.style-picker legend, .product-users legend { padding: 0; margin-bottom: 9px; font-size: 11px; font-weight: 600; color: var(--mute); }
.style-options, .product-user-options { display: flex; flex-wrap: wrap; gap: 8px; }
.style-option, .chip-check { position: relative; }
.style-option input, .chip-check input, .look-tile input, .cast-option input, .product-option input { position: absolute; top: 0; left: 0; opacity: 0; width: 1px; height: 1px; margin: 0; }
.style-option span, .chip-check span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 15px; border: 1.5px solid var(--line); border-radius: 7px; background: #fff; font-size: 13px; font-weight: 550; cursor: pointer; transition: border-color .15s, background .15s; }
.style-option span:hover, .chip-check span:hover { border-color: var(--ink); }
.style-option input:checked + span, .chip-check input:checked + span { border-color: var(--ink); background: var(--tape); font-weight: 700; }
.chip-check input:checked + span::before { content: ''; width: 9px; height: 5px; margin: -3px 8px 0 0; border: solid var(--ink); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.style-option input:focus-visible + span, .chip-check input:focus-visible + span { outline: 3px solid #ff5b2e; outline-offset: 2px; }
.chip-check input:disabled + span { opacity: .55; cursor: default; }
.creator-photo { margin: 0 0 22px; }
.creator-photo summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; font-size: 13px; font-weight: 650; list-style: none; }
.creator-photo summary::-webkit-details-marker { display: none; }
.creator-photo summary::before { content: '+'; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--ink); border-radius: 5px; font-size: 15px; line-height: 1; }
.creator-photo[open] summary::before { content: '−'; }
.creator-photo summary small { font-weight: 450; color: var(--mute); }
.creator-photo-body { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 12px; }
.creator-photo-pick { position: relative; cursor: pointer; }
.creator-photo-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.creator-photo-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 120px; aspect-ratio: 2 / 3; border: 1.5px dashed var(--line); border-radius: 10px; overflow: hidden; background: #fff; color: var(--mute); font-size: 12px; text-align: center; }
.creator-photo-preview b { color: var(--ink); font-size: 12px; }
.creator-photo-preview small { font-size: 10px; }
.creator-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.creator-photo-pick:focus-within .creator-photo-preview { outline: 3px solid #ff5b2e; outline-offset: 2px; }
/* Real people: who is in a photo or an uploaded image, asked next to it, in a
   dialog for pictures used before Sloppr asked, and flagged on those characters. */
.likeness { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 14px 16px 16px; border: 1.5px solid var(--ink); border-radius: 10px; background: #fff; }
.likeness[hidden] { display: none; }
.likeness legend { padding: 0 6px; font-size: 14px; font-weight: 700; }
.likeness-subjects { display: flex; flex-wrap: wrap; gap: 8px; }
.likeness-subject { position: relative; }
.likeness-subject input { position: absolute; top: 0; left: 0; opacity: 0; width: 1px; height: 1px; margin: 0; }
.likeness-subject span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 7px; background: #fff; font-size: 13px; font-weight: 550; cursor: pointer; }
.likeness-subject span:hover { border-color: var(--ink); }
.likeness-subject input:checked + span { border-color: var(--ink); background: var(--tape); font-weight: 700; }
.likeness-subject input:focus-visible + span { outline: 3px solid #ff5b2e; outline-offset: 2px; }
.likeness-check { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.5; cursor: pointer; }
.likeness-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); }
.likeness-check input:focus-visible { outline: 3px solid #ff5b2e; outline-offset: 2px; }
.likeness .field { margin: 0; }
.likeness-rules { justify-self: start; font-size: 12px; font-weight: 700; color: var(--ink); }
.creator-photo-body .likeness { flex: 1 1 300px; }
.character-dialog .likeness, .likeness-dialog .likeness { margin-bottom: 19px; }
.likeness-dialog { max-width: 520px; }
.likeness-dialog-intro { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.likeness-dialog-intro img { flex: none; width: 64px; aspect-ratio: 2 / 3; object-fit: cover; border: 1px solid var(--line); border-radius: 8px; background: #f1f0ea; }
.likeness-dialog-intro p { margin: 0; font-size: 14px; line-height: 1.55; }
.likeness-needed { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; width: 100%; padding: 14px 16px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--tape); }
.likeness-needed p { flex: 1 1 220px; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.5; }
.cast-card-confirm { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cast-card-confirm > .btn { align-self: start; }
.creator-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.creator-submit .btn { min-height: 48px; padding: 12px 22px; font-size: 13px; }
.creator-balance { font-size: 12px; color: var(--mute); }
.creator-alt { margin-top: 18px; font-size: 13px; color: var(--mute); }
.creator-alt .text-link, .character-delete { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; cursor: pointer; }

.creator-summary { max-width: 70ch; overflow-wrap: anywhere; }
.creator-choose-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.creator-status { margin: 0; font-size: 14px; color: var(--mute); min-height: 1.5em; }
.creator-saved { margin: 0 0 16px; padding: 10px 14px; border-radius: 8px; background: #edf3e3; font-size: 13px; }
.look-rounds { display: flex; flex-direction: column; gap: 22px; }
.look-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.look-round.is-edit .look-grid { grid-template-columns: minmax(0, calc((100% - 42px) / 4)); }
[data-brand] .look-round-title, [data-brand] .look-earlier { margin: 0 0 10px; font: 600 13px/1.4 var(--body); text-transform: none; letter-spacing: 0; color: var(--mute); }
[data-brand] .look-earlier { margin: 6px 0 -10px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.look-tile { position: relative; display: block; aspect-ratio: 2 / 3; border: 2px solid transparent; border-radius: 13px; overflow: hidden; background: #ecebe4; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.look-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.look-tile:hover { border-color: var(--line); }
.look-tile:has(input:checked) { border-color: var(--ink); box-shadow: 5px 5px 0 var(--ink); transform: translate(-2px, -2px); }
.look-tile:has(input:focus-visible) { outline: 3px solid #ff5b2e; outline-offset: 3px; }
.look-check { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid var(--ink); border-radius: 7px; background: var(--tape); opacity: 0; transform: scale(.7); transition: opacity .15s, transform .15s; }
.look-check .icon { width: 17px; height: 17px; stroke-width: 2.4; }
.look-tile:has(input:checked) .look-check { opacity: 1; transform: none; }
.look-tile.is-loading { cursor: default; background: linear-gradient(100deg, #ecebe4 30%, #f8f7f2 50%, #ecebe4 70%) 0 0 / 250% 100%; animation: look-shimmer 1.6s linear infinite; }
@keyframes look-shimmer { to { background-position: -250% 0; } }
.look-round-error { grid-column: 1 / -1; margin: 0; padding: 14px 16px; border: 1px solid #e3c2b8; border-radius: 10px; background: #fff4ef; font-size: 13px; }
.creator-finish { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 30px; margin-top: 30px; padding: 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.creator-finish[hidden] { display: none; }
.creator-preview { margin: 0; aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden; background: #ecebe4; }
.creator-preview img { width: 100%; height: 100%; object-fit: contain; }
.creator-finish-body h2 { margin: 2px 0 18px; font-size: 26px; }
.creator-finish-body input[name="name"] { font-size: 18px; font-weight: 600; }
.creator-finish-body > .btn.primary { min-height: 48px; padding: 12px 24px; font-size: 13px; }
.creator-change { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.creator-change .field { flex: 1 1 220px; margin: 0; }
.creator-change .btn { min-height: 44px; }
.creator-redo { margin-top: 30px; }
.creator-redo > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; font-size: 13px; font-weight: 650; list-style: none; }
.creator-redo > summary::-webkit-details-marker { display: none; }
.creator-redo > summary::before { content: '+'; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--ink); border-radius: 5px; font-size: 15px; line-height: 1; }
.creator-redo[open] > summary::before { content: '−'; }
.creator-redo .creator-compose { margin-top: 12px; }
.creator-paused { max-width: 620px; margin-top: 24px; }
.creator-resume { display: grid; grid-template-columns: 52px minmax(0, 1fr) 18px; align-items: center; gap: 14px; margin-bottom: 16px; padding: 10px 14px; border: 1px solid var(--ink); border-radius: 12px; background: var(--tape); color: var(--ink); text-decoration: none; }
.creator-resume .cast-draft-looks { width: 52px; }
.creator-resume > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.creator-resume b { font-size: 14px; }
.creator-resume small { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator-resume > .icon { width: 18px; height: 18px; }

.character-detail { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 36px; margin-top: 26px; align-items: start; }
.character-portrait { margin: 0; display: grid; place-items: center; aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden; background: #f1f0ea; border: 1px solid var(--line); color: var(--mute); }
.character-portrait img { width: 100%; height: 100%; object-fit: contain; }
.character-detail-body { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; max-width: 560px; }
.character-detail-body .panel { width: 100%; margin: 0; }
.character-cta { min-height: 50px; padding: 13px 24px; font-size: 13px; }
.character-origin { margin: 0; font-size: 13px; color: var(--mute); line-height: 1.6; overflow-wrap: anywhere; }
.character-delete { font-size: 12px; color: var(--signal); }

/* Studio: the idea first, then who's in it and what they wear. */
.scene-picker { margin: 22px 0; padding-top: 20px; border-top: 1px solid var(--line-2); }
.picker-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
[data-brand] .picker-heading h4 { margin: 0; font: 700 15px/1.3 var(--body); text-transform: none; letter-spacing: -.2px; }
.picker-heading h4 small { margin-left: 6px; font-size: 12px; font-weight: 450; color: var(--mute); }
.picker-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.picker-heading .text-link { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink); cursor: pointer; }
.picker-heading .text-link .icon { width: 14px; height: 14px; }
.cast-search { width: 100%; margin-bottom: 12px; }
.cast-options, .product-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.cast-option, .product-option { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; cursor: pointer; }
.cast-option[hidden] { display: none; }
.cast-option-image, .product-option-image { position: relative; display: grid; place-items: center; aspect-ratio: 2 / 3; border: 2px solid var(--line-2); border-radius: 10px; overflow: hidden; background: #f1f0ea; color: var(--mute); transition: border-color .15s, box-shadow .15s; }
.product-option-image { aspect-ratio: 1; background: #fff; }
.cast-option-image img { width: 100%; height: 100%; object-fit: contain; }
.product-option-image img { width: 100%; height: 100%; object-fit: contain; }
.cast-option-name, .product-option-name { font-size: 12px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cast-option:hover .cast-option-image, .product-option:hover .product-option-image { border-color: var(--line); }
.cast-option:has(input:checked) .cast-option-image, .product-option:has(input:checked) .product-option-image { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.cast-option:has(input:focus-visible) .cast-option-image, .product-option:has(input:focus-visible) .product-option-image { outline: 3px solid #ff5b2e; outline-offset: 2px; }
.cast-option:has(input:disabled:not(:checked)), .product-option:has(input:disabled:not(:checked)) { opacity: .45; cursor: default; }
.cast-option-check { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--ink); border-radius: 5px; background: var(--tape); opacity: 0; }
.cast-option-check .icon { width: 13px; height: 13px; stroke-width: 2.6; }
.cast-option:has(input:checked) .cast-option-check { opacity: 1; }
.product-option.is-none .product-option-image { border-style: dashed; background: transparent; }
.product-option-none { font-size: 12px; font-weight: 650; color: var(--mute); }
.cast-empty-note { grid-column: 1 / -1; margin: 0; padding: 16px; border: 1px dashed var(--line); border-radius: 10px; font-size: 13px; color: var(--mute); }
.product-users { border: 0; margin: 16px 0 0; padding: 0; min-width: 0; }
.product-users[hidden] { display: none; }
.product-users > small { display: block; margin-top: 8px; font-size: 11px; color: var(--mute); }
.scene-picker .product-spec-preview { margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; font-size: 13px; }
.scene-picker .product-spec-preview[hidden] { display: none; }
.product-summary { margin: 0 0 6px; line-height: 1.5; overflow-wrap: anywhere; }
.scene-picker .product-artwork-description { margin: 0 0 8px; color: var(--mute); line-height: 1.5; }
.scene-picker .product-spec-preview .text-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.scene-picker .product-spec-preview .text-link .icon { width: 14px; height: 14px; }
.character-mentions { margin-bottom: 10px; }
/* Create a video: a big idea box, picks as tiles, and the rest behind Options. */
.studio-idea > span { margin-bottom: 8px; font-size: 15px; font-weight: 700; color: var(--ink); }
.studio-idea textarea { min-height: 150px; font-size: 16px; line-height: 1.5; }
.studio-form .character-mentions { margin: -8px 0 0; }
/* A line that reads like a customer review: under the idea, while making, and by the video. */
.claims-note { margin: 14px 0 0; }
.watch-side > .claims-note { margin: 0; }
.studio-title { margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--line-2); }
.studio-options { margin: 4px 0 20px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.studio-options > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 10px 14px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 700; }
.studio-options > summary::-webkit-details-marker { display: none; }
.studio-options > summary small { margin-left: 6px; font-size: 12px; font-weight: 450; color: var(--mute); }
.studio-options > summary:focus-visible { outline: 3px solid #ff5b2e; outline-offset: 2px; }
.studio-options-chevron { flex: none; width: 18px; height: 18px; transition: transform .15s; }
.studio-options[open] .studio-options-chevron { transform: rotate(90deg); }
.studio-options-body { padding: 16px 14px 4px; border-top: 1px solid var(--line-2); }
.studio-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.studio-option-grid select { width: 100%; }
.studio-captions { display: flex; align-items: center; gap: 9px; min-height: 44px; margin: -6px 0 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.studio-captions input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
/* The AI label and ad options: a checkbox with a short note under its words. */
.studio-check { margin: 0 0 12px; }
.studio-check .check { display: flex; align-items: center; gap: 9px; min-height: 44px; font-size: 13px; font-weight: 600; cursor: pointer; }
.studio-check .check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.studio-check small { display: block; margin: -8px 0 0 27px; font-size: 12px; line-height: 1.45; color: var(--mute); }
.ticket .ticket-short { margin: 12px 0 10px; font-size: 13px; font-weight: 650; }
.studio-generation > .btn.primary { min-height: 52px; font-size: 15px; }
@media (min-width: 851px) { .studio-generation { position: sticky; top: 18px; align-self: start; } }
.create-character .creation-icon { background: #e4ecf4; color: #2f4b63; }

@media (min-width: 1201px) {
  .creation-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .creation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .look-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .look-round.is-edit .look-grid { grid-template-columns: minmax(0, calc((100% - 12px) / 2)); }
  .creator-finish { grid-template-columns: 96px minmax(0, 1fr); padding: 18px; gap: 16px; }
  .creator-finish-body h2 { font-size: 22px; margin-bottom: 14px; }
  .character-detail { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .character-portrait { max-width: 360px; }
}

/* Character voices: one panel on the character page. Takes are rows you can
   play and pick; the studio marks voiced cast members with a small mic. */
.character-voice { display: grid; gap: 14px; }
.voice-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 22px; }
.voice-head .icon { width: 20px; height: 20px; }
.voice-player { width: 100%; height: 40px; }
.voice-note, .voice-intro { margin: 0; font-size: 13px; color: var(--mute); line-height: 1.6; overflow-wrap: anywhere; }
.voice-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.voice-remove, .voice-keep { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 700; text-decoration: underline; cursor: pointer; color: var(--ink); justify-self: start; }
.voice-remove { color: var(--signal); }
.voice-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--cyc); justify-self: start; max-width: 100%; flex-wrap: wrap; }
.voice-tabs button { border: 0; border-radius: 7px; background: transparent; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 650; color: var(--mute); cursor: pointer; }
.voice-tabs button[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 0 var(--line), 0 0 0 1px var(--line); }
.voice-tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.voice-design, .voice-record { display: grid; gap: 12px; }
.voice-design .field, .voice-record .field { margin: 0; }
.voice-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.voice-record .check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5; }
.voice-record .check input { margin-top: 3px; }
.voice-rounds { display: grid; gap: 16px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.voice-round { display: grid; gap: 8px; }
.voice-round-title { margin: 0; font-size: 12px; font-weight: 700; color: var(--mute); overflow-wrap: anywhere; }
.voice-take { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); }
.voice-take audio { width: 100%; min-width: 0; height: 36px; }
.voice-take-label { font-size: 13px; font-weight: 700; white-space: nowrap; }
.voice-take.is-loading { display: block; height: 54px; border-color: var(--line-2); background: linear-gradient(100deg, #ecebe4 30%, #f8f7f2 50%, #ecebe4 70%) 0 0 / 250% 100%; animation: look-shimmer 1.6s linear infinite; }
.cast-option-voice { position: absolute; left: 6px; bottom: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--tape); }
.cast-option-voice .icon { width: 13px; height: 13px; stroke-width: 2.2; }
.cast-voice-note { margin: 10px 0 0; font-size: 12px; color: var(--mute); }
/* The voice step that ends character creation: the portrait is a reminder of
   who is being voiced, so the voice stays in view on a phone. */
.voice-step { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
@media (max-width: 900px) {
  .voice-step { grid-template-columns: minmax(0, 1fr); }
  .voice-step .character-portrait { max-width: 140px; }
}
@media (max-width: 760px) {
  .creator { margin-top: 18px; }
  .creator-compose { padding: 18px; }
  .creator-choose-head h2 { font-size: 26px; }
  .cast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .cast-options, .product-options { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  .creator-submit .btn { width: 100%; }
  .cast-draft-list { grid-template-columns: minmax(0, 1fr); }
  .voice-take { grid-template-columns: minmax(0, 1fr) auto; }
  .voice-take audio { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .look-tile, .look-check, .cast-card-image, .cast-avatar > span { transition: none; }
  .look-tile.is-loading, .voice-take.is-loading { animation: none; }
  .look-tile:has(input:checked), .cast-card:hover .cast-card-image, .cast-avatar:hover > span { transform: none; }
}

/* Admin account data: privacy exports and deletion. */
.account-data .field input { width: 100%; box-sizing: border-box; }
.account-data form { margin-top: 12px; }
.account-data details { margin-top: 14px; }
.account-data .account-delete .field { margin: 10px 0; }
.account-data .account-delete .check { display: flex; gap: 8px; align-items: start; margin: 12px 0; font-size: 13px; }
.account-data .note ul { margin: 6px 0 0; padding-left: 18px; }

/* My shop: three ways to sell, then a step-by-step Sloppr shop builder with the
   real private storefront beside it. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.shop-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 26px 0 18px; }
.shop-options .shop-option { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: 0; padding: 24px; }
.shop-option.current { box-shadow: 4px 4px 0 var(--ink); }
.shop-option-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.shop-option-head h2 { font-size: 26px; line-height: 1; margin: 0; }
.shop-option > p { margin: 0; color: var(--mute); font-size: 14px; line-height: 1.55; }
.shop-option-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: 13px; line-height: 1.45; }
.shop-option-points li { display: flex; gap: 8px; align-items: flex-start; overflow-wrap: anywhere; }
.shop-option-points .icon { width: 16px; height: 16px; flex: none; margin-top: 1px; stroke-width: 2.4; }
.shop-option .shop-option-fee { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2); width: 100%; font-size: 12px; color: var(--ink); }
.shop-options-note { font-size: 13px; }
.shop-guide-layout { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr); gap: 22px; align-items: start; margin-top: 24px; }
.shop-guide-layout > .panel + .panel { margin-top: 0; }
.shop-guide h2, .shop-links h2 { font-size: 24px; margin: 0 0 6px; }
.shop-guide-steps { list-style: none; counter-reset: shop-guide; padding: 0; margin: 20px 0 22px; display: grid; gap: 16px; }
.shop-guide-steps li { counter-increment: shop-guide; position: relative; padding-left: 40px; }
.shop-guide-steps li::before { content: counter(shop-guide); position: absolute; left: 0; top: -2px; width: 27px; height: 27px; display: grid; place-items: center; border: 1.5px solid var(--ink); background: var(--tape); font-size: 12px; font-weight: 800; }
.shop-guide-steps b { font-size: 14px; }
.shop-guide-steps p { margin: 3px 0 0 !important; color: var(--mute); font-size: 13px; line-height: 1.55; }
.shop-guide .row { flex-wrap: wrap; margin-bottom: 16px; }
.shop-guide > .muted { font-size: 12px; line-height: 1.6; }
.link-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px 0; border-top: 1px solid var(--line-2); }
.link-row:last-child { padding-bottom: 0; }
.link-row .field { margin: 0; }
.link-row .field input { width: 100%; box-sizing: border-box; }
.link-row .row { flex-wrap: wrap; align-items: center; gap: 12px; }
.link-row .note { margin: 0; }
.link-row-product { display: flex; align-items: center; gap: 12px; min-width: 0; }
.link-row-product h3, .link-row-product b { display: block; margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.link-row-product small, .sale-item-head small { display: block; margin-top: 3px; color: var(--mute); font-size: 12px; }
.state-ok { color: var(--ok); font-weight: 650; }
.state-todo { color: var(--mute); }
.shop-thumb { width: 52px; height: 52px; flex: none; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); background: var(--cyc); color: var(--mute); }
.shop-thumb img { width: 100%; height: 100%; object-fit: contain; }
.shop-empty { display: grid; justify-items: center; gap: 10px; padding: 28px 18px; border: 1px dashed var(--line); text-align: center; }
.shop-empty > .icon { width: 28px; height: 28px; color: var(--mute); }
.shop-empty p { margin: 0; color: var(--mute); font-size: 14px; }
.shop-empty .row { justify-content: center; flex-wrap: wrap; }

.shop-address { padding: 20px 24px; }
.shop-address .row { flex-wrap: wrap; gap: 8px; }
.shop-address [data-unpublished-design][hidden] { display: none; }
.shop-builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .95fr); gap: 26px; align-items: start; }
.shop-steps { display: grid; gap: 12px; min-width: 0; }
.shop-step { border: 1px solid var(--ink); background: var(--panel); scroll-margin-top: 16px; }
.shop-step > summary { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 20px; grid-template-areas: "mark title pill chevron" "mark hint pill chevron"; align-items: center; column-gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none; }
.shop-step > summary::-webkit-details-marker { display: none; }
.shop-step > summary:hover { background: var(--line-2); }
.shop-step > summary:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.step-mark { grid-area: mark; width: 32px; height: 32px; display: grid; place-items: center; border: 1.5px solid var(--ink); font-size: 14px; font-weight: 800; background: var(--panel); }
.shop-step.done .step-mark { background: var(--tape); }
.step-mark .icon { width: 17px; height: 17px; stroke-width: 2.6; }
.shop-step > summary h2 { grid-area: title; margin: 0; font-size: 22px; line-height: 1.05; }
.step-hint { grid-area: hint; color: var(--mute); font-size: 12px; margin-top: 2px; }
.shop-step > summary .pill { grid-area: pill; font-size: 11px; }
.step-chevron { grid-area: chevron; width: 18px; height: 18px; transition: transform .15s; }
.shop-step[open] > summary .step-chevron { transform: rotate(90deg); }
.shop-step[open] > summary { border-bottom: 1px solid var(--line); }
.shop-step-body { padding: 20px 18px 22px; min-width: 0; }
.shop-step-body > :first-child { margin-top: 0; }
.shop-step-body .muted { font-size: 13px; line-height: 1.6; }
.shop-step-body .field input:not([type=checkbox]):not([type=color]):not([type=file]), .shop-step-body .field select, .shop-step-body .field textarea { width: 100%; box-sizing: border-box; }
.shop-step-body .check { display: flex; gap: 9px; align-items: flex-start; margin: 12px 0; font-size: 13px; line-height: 1.5; }
.shop-step-body .check input { flex: none; margin-top: 3px; }
.step-next { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line-2); display: flex; justify-content: flex-end; }
.save-line { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; min-height: 22px; }
.save-state { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--mute); }
.save-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.save-state[data-state=dirty]::before, .save-state[data-state=saving]::before { background: #c8a400; }
.save-state[data-state=saving]::before { animation: pulse 1.2s infinite; }
.save-state[data-state=error], .save-state[data-state=conflict] { color: var(--signal); }
.save-state[data-state=error]::before, .save-state[data-state=conflict]::before { background: var(--signal); }
.save-line .text-link { border: 0; background: none; padding: 0; font-size: 12px; cursor: pointer; }
.accent-field { border: 0; padding: 0; margin: 0 0 19px; min-width: 0; }
.accent-field legend { padding: 0; margin-bottom: 9px; font-size: 11px; font-weight: 600; color: var(--mute); }
.accent-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { position: relative; width: 38px; height: 38px; padding: 0; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--swatch); cursor: pointer; }
.swatch[aria-pressed=true], .swatch-custom.selected { box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px var(--ink); }
.swatch-custom { display: grid; place-items: center; overflow: hidden; background: conic-gradient(#ff5b5b, #ffd23f, #4ade80, #38bdf8, #a78bfa, #ff5b5b); }
.swatch-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.swatch-custom:focus-within { outline: 3px solid var(--ink); outline-offset: 3px; }
.brand-image-field { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 19px; min-width: 0; }
.brand-image-field .field { margin: 0 0 6px; }
.shop-brand-editor .cols { gap: 0 18px; }
[data-brand] .brand-image-field input[type=file] { width: 100%; max-width: 100%; padding: 0; border: 0; background: none; font-size: 12px; color: var(--mute); }
[data-brand] .brand-image-field input[type=file]::file-selector-button { margin-right: 10px; padding: 8px 12px; border: 1.5px solid var(--ink); border-radius: 0; background: var(--panel); color: var(--ink); font: 700 12px/1 var(--body); cursor: pointer; }
.brand-image-field small { display: block; color: var(--mute); font-size: 11px; line-height: 1.5; }
.brand-image-field .text-link { display: inline-block; margin-top: 8px; border: 0; background: none; padding: 0; font-size: 12px; cursor: pointer; }
.brand-image-preview { width: 76px; height: 76px; flex: none; display: grid; place-items: center; border: 1px dashed var(--line); background: var(--cyc); overflow: hidden; }
.brand-image-preview:has(img) { border-style: solid; border-color: var(--ink); background: #fff; }
.brand-image-preview img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: contain; border: 0 !important; border-radius: 0 !important; }
.sale-list { display: grid; gap: 12px; margin: 16px 0; }
.sale-item { border: 1px solid var(--line); padding: 14px; background: #fff; min-width: 0; }
.sale-item-head { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.sale-item-head b { display: block; overflow-wrap: anywhere; }
.sale-item-head .row { justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.sale-item > .muted { margin: 10px 0 0; }
.sale-settings { margin-top: 12px; border-top: 1px solid var(--line-2); padding-top: 10px; }
.sale-settings > summary, .external-checkout > summary, .shop-domains > summary { cursor: pointer; font-weight: 700; font-size: 13px; }
.sale-settings form { margin-top: 14px; }
.sale-settings .cols { gap: 0 16px; }
.external-checkout { margin: 18px 0; padding: 14px 16px; border: 1px solid var(--line); background: #fff; }
.external-checkout > .muted { margin: 10px 0 4px; }
.shop-add { flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.printful-preparation .sale-item + .sale-item { margin-top: 10px; }
.activation-steps { gap: 16px; }
.activation-steps .connection-card { min-width: 0; padding: 18px; border: 1px solid var(--line); background: #fff; }
.activation-steps .connection-card .section-heading { gap: 10px; }
.activation-steps .connection-card h3 { margin: 0; font-size: 20px; }
.activation-steps .connection-card .row { flex-wrap: wrap; }
.launch-checklist { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 0; border: 1px solid var(--line); background: #fff; }
.launch-checklist li { display: flex; align-items: center; gap: 10px; padding: 11px 14px; font-size: 13px; }
.launch-checklist li + li { border-top: 1px solid var(--line-2); }
.launch-checklist li > span:nth-child(2) { flex: 1; min-width: 0; }
.launch-checklist .check-mark { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: 50%; }
.launch-checklist .ready .check-mark { border-color: var(--ink); background: var(--tape); }
.launch-checklist .check-mark .icon { width: 12px; height: 12px; stroke-width: 3; }
.launch-checklist .text-link { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; font-size: 12px; cursor: pointer; white-space: nowrap; }
.launch-checklist .text-link .icon { width: 13px; height: 13px; }
.seller-accept { max-width: 850px; }
.shop-domains { margin-top: 20px; overflow-wrap: anywhere; font-size: 13px; }
.shop-domains code { white-space: normal; overflow-wrap: anywhere; }
.shop-preview { position: sticky; top: 16px; min-width: 0; }
.shop-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.shop-preview-bar .pill { font-size: 11px; }
.segmented { display: inline-flex; border: 1.5px solid var(--ink); }
.segmented button { min-height: 32px; padding: 6px 12px; border: 0; background: var(--panel); font: 700 12px/1 var(--body); cursor: pointer; }
.segmented button + button { border-left: 1.5px solid var(--ink); }
.segmented button[aria-pressed=true] { background: var(--ink); color: var(--panel); }
.shop-frame { position: relative; height: calc(100vh - 150px); min-height: 520px; max-height: 980px; overflow: hidden; border: 1.5px solid var(--ink); background: var(--line-2); }
.shop-frame iframe { position: absolute; top: 0; left: 0; border: 0; background: #fff; transform-origin: 0 0; }
.shop-frame iframe[data-loading] { visibility: hidden; }
.shop-frame[data-size=phone] iframe { box-shadow: 0 0 0 1.5px var(--ink); }
.shop-preview > .muted { margin: 8px 0 0; font-size: 12px; }
@media (max-width: 1180px) {
  .shop-builder { grid-template-columns: minmax(0, 1fr); }
  .shop-preview { display: none; }
}
@media (max-width: 980px) {
  .shop-options { grid-template-columns: minmax(0, 1fr); }
  .shop-guide-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .shop-address { padding: 18px; }
  .shop-step > summary { grid-template-columns: 30px minmax(0, 1fr) 18px; grid-template-areas: "mark title chevron" "mark hint chevron" "mark pill chevron"; padding: 14px; column-gap: 12px; }
  .shop-step > summary .pill { justify-self: start; margin-top: 6px; }
  .step-mark { width: 28px; height: 28px; }
  .shop-step-body { padding: 16px 14px 18px; }
  .sale-item-head { grid-template-columns: 44px minmax(0, 1fr); }
  .sale-item-head .shop-thumb { width: 44px; height: 44px; }
  .sale-item-head .row { grid-column: 1 / -1; justify-content: flex-start; }
  .step-next { justify-content: stretch; }
  .step-next .btn, .shop-add .btn { width: 100%; white-space: normal; }
  .launch-checklist li { flex-wrap: wrap; }
  .accent-swatches { gap: 8px; }
  .swatch { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .step-chevron { transition: none; }
  .save-state[data-state=saving]::before { animation: none; }
}

/* Your videos: a library like a video site's. Vertical thumbnails in a
   responsive grid, the length in the corner, two-line titles and one quiet
   line of detail. The whole card is one link (one button for an upload). */
.vid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 28px 16px; margin-top: 24px; }
.remix-recent .vid-grid { margin-top: 0; }
.vid-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; width: 100%; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.vid-card[hidden] { display: none; }
.vid-card:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
[data-brand="sloppr"] .vid-card:focus-visible { outline-color: #ff5b2e; }
.vid-card:disabled { opacity: 1; cursor: default; }
.vid-thumb { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--line-2); color: var(--mute); transition: transform .15s, box-shadow .15s, border-color .15s; }
.vid-card:not(:disabled):hover .vid-thumb { border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px); }
.vid-thumb > img, .vid-thumb > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid-thumb:has(> img):not(.is-loaded) { background: linear-gradient(100deg, var(--line-2) 30%, var(--cyc) 50%, var(--line-2) 70%) 0 0 / 250% 100%; animation: look-shimmer 1.6s linear infinite; }
.vid-thumb:has(> .vid-thumb-icon) { background: #f0eed6; color: #504a2f; }
.vid-card[data-kind="remix"] .vid-thumb:has(> .vid-thumb-icon) { background: #f8e6df; color: #733d2d; }
.vid-thumb-icon .icon { width: 30px; height: 30px; }
.vid-preview { opacity: 0; transition: opacity .2s; }
.vid-card.is-previewing .vid-preview { opacity: 1; }
.vid-length, .vid-badge { position: absolute; z-index: 2; padding: 1px 6px; border-radius: 4px; font-size: 12px; font-weight: 700; line-height: 20px; }
.vid-length { right: 6px; bottom: 6px; background: rgba(15, 15, 12, .8); color: #fff; font-variant-numeric: tabular-nums; }
.vid-badge { left: 6px; top: 6px; background: var(--tape); color: var(--ink); }
.vid-overlay { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; padding: 12px; background: linear-gradient(to top, rgba(15, 15, 12, .88), rgba(15, 15, 12, .45) 55%, rgba(15, 15, 12, .2)); color: #fff; }
.vid-overlay b { font-size: 14px; font-weight: 750; line-height: 1.3; }
.vid-overlay small { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, .9); overflow-wrap: anywhere; }
.vid-overlay.is-failed { background: linear-gradient(to top, rgba(74, 16, 9, .94), rgba(74, 16, 9, .6) 60%, rgba(74, 16, 9, .3)); }
.vid-retry { align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 750; }
.vid-card:hover .vid-retry { background: var(--tape); }
.vid-progress { position: relative; height: 5px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .3); }
.vid-progress i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--tape); transition: width .4s; }
.vid-progress.is-waiting i { width: 40%; animation: vid-waiting 1.5s ease-in-out infinite; }
@keyframes vid-waiting { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.vid-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0 2px; }
[data-brand] .vid-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font: 650 14px/1.4 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink); overflow-wrap: anywhere; }
.vid-meta { margin: 0; font-size: 12px; line-height: 1.4; color: var(--mute); }
/* Chips (All, Videos, Remixes, Drafts) and, in a long library, search. */
.vid-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: 22px; }
.vid-toolbar + .vid-grid { margin-top: 20px; }
.vid-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vid-chip { min-height: 36px; padding: 7px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font: 650 13px/1 var(--body); cursor: pointer; transition: border-color .15s, background .15s; }
.vid-chip:hover { border-color: var(--ink); }
.vid-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--panel); }
[data-brand="sloppr"] .vid-chip[aria-pressed="true"] { color: var(--tape); }
.vid-search { flex: 0 1 300px; }
.vid-none { margin: 24px 0 0; font-size: 14px; color: var(--mute); }
.vid-none .text-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; cursor: pointer; }
/* No videos yet: a sentence and the two ways to make one. */
.vid-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 24px; padding: 52px 20px; border: 1.5px dashed var(--line); border-radius: 14px; text-align: center; }
.vid-empty p { margin: 0; font-size: 16px; font-weight: 650; color: var(--ink); }
.vid-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.vid-empty.is-small { margin: 0; padding: 30px 16px; gap: 14px; }
.vid-empty.is-small p { font-size: 14px; }
/* The overview's newest videos: three across, four when its card is wide,
   two rows of two when it is narrow. */
.overview-collection:has(> .vid-shelf) { container-type: inline-size; }
.vid-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; }
.vid-shelf > :nth-child(n + 4) { display: none; }
@container (min-width: 600px) {
  .vid-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vid-shelf > :nth-child(4) { display: flex; }
}
@container (max-width: 380px) {
  .vid-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vid-shelf > :nth-child(4) { display: flex; }
}
/* Uploads: tap one to remix it again; delete sits on its thumbnail. */
.remix-source-card { position: relative; min-width: 0; }
.vid-card-delete { position: absolute; z-index: 3; top: 8px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(15, 15, 12, .72); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.vid-card-delete:hover { background: var(--signal); }
@media (hover: hover) and (pointer: fine) {
  .remix-source-card:not(:hover):not(:focus-within) .vid-card-delete { opacity: 0; }
}
/* A finished video: the player first, then what to do with it. */
.watch { --player: min(calc(min(76vh, 780px) * var(--ratio, .5625)), 62%); display: grid; grid-template-columns: var(--player) minmax(0, 1fr); gap: 32px; align-items: start; }
.watch-player video { display: block; width: 100%; aspect-ratio: var(--ratio, .5625); border-radius: 14px; background: #000; }
.watch-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
[data-brand] .watch-side h2 { margin: 0; font-size: 28px; line-height: 1.1; }
.watch-meta { margin: -6px 0 0; font-size: 14px; color: var(--mute); }
.watch-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
[data-brand] .watch-actions .btn { min-height: 44px; padding: 10px 16px; font-size: 13px; }
.watch-actions .note { flex-basis: 100%; margin: 0; }
.watch-more { position: relative; }
.watch-more > summary { list-style: none; }
.watch-more > summary::-webkit-details-marker { display: none; }
.watch-more-menu { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; display: flex; flex-direction: column; width: max-content; min-width: 230px; max-width: calc(100vw - 32px); padding: 6px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--panel); box-shadow: 4px 4px 0 var(--ink); }
.watch-more-menu.is-end { left: auto; right: 0; }
.watch-more-menu > a, .watch-more-menu > button { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: 600 14px/1.3 var(--body); text-align: left; text-decoration: none; cursor: pointer; }
.watch-more-menu > a:hover, .watch-more-menu > button:hover { background: var(--line-2); }
.watch-side > .panel { margin: 0 !important; }
.watch-description { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.watch-description-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
[data-brand] .watch-description h3 { margin: 0; font: 700 15px/1.3 var(--body); letter-spacing: 0; text-transform: none; }
.watch-caption { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.watch-tags { margin: 6px 0 0; color: var(--mute); overflow-wrap: anywhere; }
.watch-notes { margin: 8px 0 0; font-size: 13px; color: var(--mute); }
/* Under a finished video, its settings wait behind one button. */
.studio-again > summary { list-style: none; margin-bottom: 18px; }
.studio-again > summary::-webkit-details-marker { display: none; }
.studio-again:not([open]) > summary { margin-bottom: 0; }
.phone-dialog .field input { width: 100%; box-sizing: border-box; }
.phone-dialog .field > label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 650; }
.phone-dialog .field > small { display: block; margin-top: 6px; }
@media (max-width: 760px) {
  .watch { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .watch-player video { width: min(100%, calc(70vh * var(--ratio, .5625))); margin-inline: auto; }
}
@media (max-width: 600px) {
  .vid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .vid-search { flex: 1 1 100%; }
  [data-brand] .watch-actions .btn, .watch-more { flex: 1 1 calc(50% - 5px); }
  .watch-more > summary { width: 100%; }
}
/* While Your videos loads: empty thumbnails and two title lines, shimmering. */
.vid-grid.is-skeleton .vid-thumb, .vid-grid.is-skeleton .vid-info i { background: linear-gradient(100deg, var(--line-2) 30%, var(--cyc) 50%, var(--line-2) 70%) 0 0 / 250% 100%; animation: look-shimmer 1.6s linear infinite; }
.vid-grid.is-skeleton .vid-info i { display: block; height: 12px; border-radius: 6px; }
.vid-grid.is-skeleton .vid-info i + i { width: 60%; }
.vid-grid.is-skeleton { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .vid-thumb, .vid-preview, .vid-chip, .vid-progress i { transition: none; }
  .vid-thumb:has(> img):not(.is-loaded), .vid-progress.is-waiting i, .vid-grid.is-skeleton .vid-thumb, .vid-grid.is-skeleton .vid-info i { animation: none; }
}

/* Credits page: balance first, then packs, then history. */
.credit-balance { display: grid; gap: 4px; margin: 6px 0 28px; }
.credit-balance > span { font-size: 13px; color: var(--mute); }
.credit-balance > strong { font: 800 40px/1.1 var(--body); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.credit-balance > p { margin: 4px 0 0; font-size: 14px; color: var(--mute); }
[data-brand] .billing-heading { margin: 0 0 12px; font: 700 20px/1.35 var(--body); letter-spacing: -.4px; text-transform: none; }
.credit-pack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.credit-pack .n { margin: 0; }
.credit-pack .btn { margin-top: 8px; }
.billing-fine { margin: -12px 0 18px; font-size: 13px; line-height: 1.6; }

/* "We can't find that page": brand, one line, one way back. */
.not-found { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.not-found > .brand { margin-bottom: 36px; font-size: 44px; }
.not-found p { margin: 0 0 22px; color: var(--mute); }