:root {
  --consumer-accent: #b8a8ff;
  --consumer-accent-strong: #8069e8;
  --trifit-coral: #f16f6a;
}
.partner-api-callout { display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 32px; margin: 32px 0; padding: 32px; border: 1px solid var(--consumer-line); border-radius: 20px; background: #ede7ff; color: #292332; }
.partner-api-callout h2 { margin: 8px 0 12px; font-size: clamp(22px, 3vw, 30px); line-height: 1.2; }
.partner-api-callout p { margin: 0; line-height: 1.6; }
.partner-api-callout a { display: inline-block; padding: 14px 20px; border-radius: 999px; background: #433270; color: white; text-decoration: none; font-weight: 700; line-height: 1.4; }
.partner-api-callout a:focus-visible { outline: 3px solid #433270; outline-offset: 4px; }
.partner-api-callout small { display: block; margin-top: 12px; font-size: 12px; line-height: 1.5; }
@media (max-width: 760px) { .partner-api-callout { grid-template-columns: 1fr; padding: 24px; gap: 20px; } }
body {
  background:
    radial-gradient(circle at 88% 4%, rgba(128, 105, 232, .17), transparent 25rem),
    radial-gradient(circle at 7% 65%, rgba(241, 111, 106, .08), transparent 20rem),
    var(--consumer-paper);
}
.environment-badge { border-color: #8069e8; color: #4f3aaa; background: #f5f1ff; }
.brand-mark i { background: var(--consumer-accent-strong); }
.environment-badge { padding: 6px 10px; font-size: 11px; font-weight: 650; letter-spacing: 0; text-transform: none; }
.install-button, .refresh-button { border-color: var(--consumer-line); background: var(--consumer-card); color: var(--consumer-ink); }
.paired-workspace { margin: 16px 0 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px dashed var(--consumer-line); border-radius: 18px; overflow: hidden; }
.reference-block { margin-top: 18px; }
.selection-pane[data-selection-pane="reference"] h3 { color: #bd4f4b; }
.reference-block .recent-progress,
.selection-pane[data-selection-pane="reference"] .recent-progress { --consumer-progress-accent: var(--consumer-accent-strong); border-radius: inherit; }
.selection-pane[data-selection-pane="reference"] .selection-media { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--trifit-coral) 25%, transparent); }
.paired-workspace .selection-media > img[data-selection-preview] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  background: var(--consumer-paper-2);
}
.request-progress {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 14px 110px;
  text-align: center;
  background: rgba(17, 17, 17, .56);
  color: white;
  font-size: clamp(12px, 1vw, 16px);
}
.shared-result-page { min-height: 100dvh; padding: 0; }
.shared-result-page .shared-result { width: 100%; max-height: none; margin: 0; background: var(--consumer-card); border-radius: 0; }
.shared-result .recipient-shell { grid-template-rows: auto minmax(180px, 1fr) auto auto auto; min-height: 600px; gap: 8px; }
.shared-result [data-share-stage] { min-height: 0; }
.shared-result .recipient-viewer { grid-template-rows: auto minmax(0, 1fr) auto; }
.shared-result .recipient-viewer .asset-header { width: 100%; grid-template-columns: 1fr; }
.shared-result .presentation-title { margin-inline: 0; }
.shared-result .presentation-title h1 { font-size: clamp(20px, 4vw, 28px); margin: 4px 0; }
.shared-result .presentation-title p { margin: 0; font-size: 12px; color: var(--consumer-muted); }
.shared-result .presentation-title a { color: inherit; text-decoration: none; }
.recipient-motion { position: relative; height: 100%; display: grid; place-items: center; }
.recipient-motion video { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.recipient-motion [data-video-status] { position: absolute; inset: 45% 10% auto; text-align: center; padding: 10px; background: #fffef9e6; border-radius: 12px; }
.shared-result [hidden] { display: none; }
.shared-result .recipient-actions { flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; }
.recipient-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 12px; border: 1px solid var(--consumer-line); border-radius: 12px; color: inherit; text-decoration: none; font-size: 12px; }
.shared-result .presentation-note { display: block; font-size: 11px; }
.shared-result .recipient-feedback { display: flex; justify-content: center; gap: 40px; text-align: center; }
.shared-result .recipient-feedback .feedback-label { display: block; font-size: 11px; }
.recipient-rating { --rating-fill: 0%; font-size: 23px; letter-spacing: 3px; line-height: 1.2; }
.recipient-rating span { color: transparent; background: linear-gradient(90deg, #b88400 var(--rating-fill), #aaa69e var(--rating-fill)); background-clip: text; }
.shared-result .recipient-feedback .compact-mood-picker summary { width: 64px; }
.shared-result .recipient-feedback .reactions { grid-template-columns: repeat(4, 1fr); }
.shared-result .recipient-feedback .reactions button { width: auto; min-width: 44px; font-size: 17px; opacity: 1; color: var(--consumer-ink); }
@media (max-width: 520px) {
  .shared-result .recipient-actions a { font-size: 11px; padding-inline: 8px; }
  .shared-result .recipient-shell { gap: 6px; }
}
.request-progress strong { font-size: 1.2em; }
.request-progress small { opacity: .8; }
.request-progress .job-progress-button { --consumer-progress-accent: var(--consumer-accent-strong); position: relative; inset: auto; margin: 0 0 24px; flex: 0 0 auto; }
.request-progress.is-terminal .job-progress-button { display: none; }
.asset-viewer[data-active-request-kind]:not([data-active-request-kind=""]) .request-progress { padding: 24px 14px; }
.asset-viewer .asset-header[hidden], .asset-viewer .asset-controls[hidden],
.asset-viewer [data-comparison-handle][hidden], .asset-viewer [data-reference-preview][hidden],
.asset-viewer [data-reset-comparison][hidden] { display: none !important; }
.request-progress .job-progress-button small { white-space: nowrap; }
.has-request-progress .comparison-control,
.has-request-progress .reset-comparison,
.has-request-progress .comparison-label,
.has-request-progress .motion-copy { visibility: hidden; }
.presentation .request-progress { padding-bottom: 24px; }
.asset-viewer .request-progress.preserves-motion {
  inset: 8px 8px auto;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(17, 17, 17, .84);
  font-size: 12px;
  gap: 4px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  column-gap: 12px;
  text-align: left;
}
.request-progress.preserves-motion .job-progress-button { width: 54px; height: 54px; margin: 0 0 16px; grid-column: 1; grid-row: 1 / span 2; }
.request-progress.preserves-motion .job-progress-button span { font-size: 10px; }
.request-progress.preserves-motion > strong,
.request-progress.preserves-motion > span { grid-column: 2; font-size: 11px; }
.request-progress.preserves-motion.is-terminal { grid-template-columns: minmax(0, 1fr); }
.request-progress.preserves-motion.is-terminal > strong,
.request-progress.preserves-motion.is-terminal > span { grid-column: 1; }
.request-progress.preserves-motion [data-progress-detail] { display: none; }
.empty-media svg { width: 38px; height: 38px; fill: none; stroke: var(--consumer-accent-strong); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.thumbnail-rail .rail-item {
  display: grid;
  place-items: center;
  overflow: hidden;
}
.thumbnail-rail .rail-item img {
  object-fit: contain;
  object-position: 50% 50%;
  background: var(--consumer-paper-2);
}
.source-actions { grid-template-columns: repeat(4, 44px); justify-content: center; gap: 9px; }
.source-button { position: relative; width: 42px; min-height: 42px; padding: 0; border-color: var(--consumer-line); border-radius: 12px; }
.source-button svg { width: 18px; height: 18px; }
.source-button > span {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: calc(100% + 7px);
  width: max-content;
  padding: 6px 8px;
  border-radius: 7px;
  background: var(--consumer-ink);
  color: white;
  box-shadow: 0 7px 20px rgba(0,0,0,.18);
  font-size: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .14s ease, transform .14s ease;
}
.source-button:hover > span, .source-button:focus-visible > span { opacity: 1; transform: translate(-50%, 0); }
.tab-primary-action { background: linear-gradient(135deg, #8069e8, #9c63eb); }
.asset-tabs button[aria-selected="true"] { background: linear-gradient(135deg, #11120f, #27231f); }
.asset-tabs button[aria-selected="true"]::after { content: ""; display: block; width: 48%; height: 2px; margin: 3px auto -4px; border-radius: 2px; background: #8069e8; }
.asset-tabs [data-tab="animateme"][aria-busy="true"] { background: #e7ddff; color: #46269b; box-shadow: inset 0 0 0 1px #ad8bed; }
.asset-tabs [data-tab="animateme"][aria-busy="true"][aria-selected="true"] { background: #5832a8; color: white; }
.asset-tabs [data-tab="animateme"][aria-busy="true"] > svg,
.asset-tabs [data-tab="animateme"][aria-busy="true"] .tab-state-dot { display: none; }
.asset-tabs [data-tab="animateme"][aria-busy="true"]::before { content: ''; display: inline-block; width: 12px; height: 12px; flex: 0 0 12px; vertical-align: -.15em; margin-right: 5px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: trifit-tab-progress .8s linear infinite; }
@keyframes trifit-tab-progress { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .asset-tabs [data-tab="animateme"][aria-busy="true"]::before { animation: none; border-style: dotted; } }
.trifit-gallery-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.trifit-gallery-rail .asset-card { padding: 8px; }
@media (min-width: 1101px) {
  .trifit-gallery-rail .asset-header { gap: 4px; }
  .trifit-gallery-rail .asset-tabs { padding: 2px; }
  .trifit-gallery-rail .asset-tabs button { min-height: 30px; font-size: 8.5px; white-space: nowrap; }
  .trifit-gallery-rail .asset-tabs button svg { width: 10px; height: 10px; }
  .trifit-gallery-rail .tab-state-dot { width: 5px; height: 5px; margin-left: 1px; }
  .trifit-gallery-rail .provenance-pill { min-height: 30px; padding-inline: 5px; gap: 2px; font-size: 8px; }
  .trifit-gallery-rail .provenance-pill svg { width: 10px; height: 10px; }
}
.asset-card .asset-viewer { position: relative; }
.asset-card .asset-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}
.asset-card .asset-media { aspect-ratio: 3 / 4; }
.asset-card .comparison-panel img,
.asset-card .motion-empty img {
  object-fit: contain;
  object-position: 50% 50%;
}
.asset-card .comparison-label { display: none; }
.comparison-input-warning { position: absolute; z-index: 3; top: 48px; left: 10px; right: 10px; margin: 0; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.9); color: #302b39; font-size: 12px; text-align: center; pointer-events: none; }
.comparison-stage[data-original-unavailable="true"] .comparison-input-warning { top: 10px; }
.comparison-result:not([data-image-state="ready"]) > img { visibility: hidden; }
.comparison-result:not([data-image-state="ready"])::before { content: ''; position: absolute; inset: 0; background: var(--result-placeholder, none) center / contain no-repeat; filter: blur(14px); opacity: .55; pointer-events: none; }
.result-image-status { position: absolute; top: 25%; left: var(--compare-position, 50%); right: 0; display: grid; justify-items: center; gap: 8px; padding: 8px; color: #302b39; text-align: center; font-size: 12px; }
.result-image-status > span { padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.85); }
.comparison-result[data-image-state="loading"] .result-image-status::before { content: ''; width: 22px; height: 22px; border: 3px solid #b5a4da; border-right-color: #6842c2; border-radius: 50%; animation: trifit-tab-progress .8s linear infinite; }
.result-image-status button { min-height: 44px; border: 1px solid #aaa; border-radius: 8px; background: #fff; font-size: 12px; }
.result-image-status[hidden], .result-image-status button[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .comparison-result[data-image-state="loading"] .result-image-status::before { animation: none; border-style: dotted; } }
.asset-card .asset-media::after {
  position: absolute;
  z-index: 7;
  inset: 52% 0 0;
  content: "";
  background: linear-gradient(transparent, rgba(14,13,12,.88));
  pointer-events: none;
}
.asset-card .asset-controls {
  position: absolute;
  z-index: 10;
  right: 12px;
  bottom: 10px;
  left: 12px;
  display: grid;
  gap: 4px;
}
.asset-card .feedback-strip {
  position: static;
  padding: 4px 0;
  border: 0;
  color: white;
}
.asset-card .rating button { width: 24px; height: 25px; color: white; font-size: 16px; text-shadow: 0 1px 5px rgba(0,0,0,.8); }
.asset-card .compact-mood-picker summary { width: 44px; height: 44px; border-color: rgba(255,255,255,.5); border-radius: 999px; background: rgba(255,255,255,.88); color: var(--consumer-ink); font-size: 22px; }
.presentation .compact-mood-picker { display: block; }
.presentation .compact-mood-picker summary { margin-inline: auto; }
.asset-card .asset-footer { position: static; gap: 4px; margin: 0; }
.trifit-card-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.asset-card .trifit-card-actions { gap: 4px; margin: 0; }
.asset-card .trifit-card-actions button {
  position: relative;
  min-height: 28px;
  height: 28px;
  padding: 0;
  border-color: rgba(255,255,255,.32);
  border-radius: 999px;
  background: rgba(10,10,8,.58);
  color: white;
  backdrop-filter: blur(10px);
  font-size: 8px;
}
.asset-card .trifit-card-actions button > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.asset-card .trifit-card-actions button::after {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: calc(100% + 6px);
  width: max-content;
  padding: 5px 7px;
  border-radius: 7px;
  content: attr(data-tooltip);
  background: var(--consumer-ink);
  color: white;
  box-shadow: 0 7px 20px rgba(0,0,0,.2);
  font-size: 9px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .14s ease, transform .14s ease;
}
.asset-card .trifit-card-actions button:hover::after,
.asset-card .trifit-card-actions button:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.asset-card .trifit-card-actions button svg { width: 15px; height: 15px; }
.asset-card .trifit-card-actions .danger { color: #ffb2ae; }
.asset-card .tab-primary-action { min-height: 34px; height: 34px; border-radius: 999px; font-size: 11px; }
.asset-card .motion-meta { bottom: 126px; }
@media (max-width: 1100px) {
  .first-view { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .paired-workspace { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .selection-pane { padding: 10px; }
  .selection-media { aspect-ratio: 9 / 10; }
  .source-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .source-button { width: 100%; min-width: 0; min-height: 38px; }
}
@media (max-width: 520px) {
  .asset-card .asset-header { align-items: center; gap: 4px; }
  .asset-card .asset-tabs button { font-size: 10px; }
  .asset-card .asset-header .provenance-pill { min-width: 0; min-height: 34px; padding-inline: 7px; gap: 3px; align-self: center; font-size: 9px; }
  .asset-card .asset-header .provenance-pill svg { width: 12px; height: 12px; }
}
@media (max-width: 760px) {
  .trifit-gallery-rail { grid-template-columns: none; grid-auto-columns: min(100%, 390px); gap: 14px; }
  .gallery-filters,
  .trifit-gallery-rail { scrollbar-width: none; }
  .gallery-filters::-webkit-scrollbar,
  .trifit-gallery-rail::-webkit-scrollbar { display: none; }
  .presentation .feedback-strip { grid-template-columns: 1fr auto; }
  .presentation .compact-mood-picker { display: block; }
  .presentation .full-mood-options { display: none; }
}

.presentation .motion-empty img {
  object-fit: contain;
  object-position: 50% 50%;
}
.presentation .asset-header { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.presentation .asset-header { grid-row: 1; }
.presentation .asset-media { grid-row: 2; }
.presentation .asset-controls { grid-row: 3; }
.presentation .asset-tabs button, .presentation .provenance-pill { min-height: 40px; }
.presentation .asset-controls { display: grid; gap: 4px; min-height: 0; }
.presentation .feedback-strip { grid-template-columns: minmax(0, 1fr) auto; margin: 0; padding: 0; border: 0; min-height: 44px; }
.presentation .feedback-group + .feedback-group { border: 0; }
.presentation .feedback-label { display: none; }
.presentation .feedback-group { padding: 0; }
.presentation .rating { justify-content: center; }
.presentation .rating button { width: 44px; min-height: 44px; padding: 0; }
.presentation .compact-mood-picker summary { width: 44px; height: 44px; }
.presentation .asset-footer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(125px, 180px); gap: 6px; margin: 0; }
.presentation .trifit-card-actions { margin: 0; gap: 6px; }
.presentation .trifit-card-actions button, .presentation .tab-primary-action { min-height: 44px; height: 44px; padding: 0 8px; }
@media (max-width: 760px), (max-height: 560px) {
  .presentation .asset-footer { grid-template-columns: minmax(0, 1fr) 112px; gap: 4px; }
  .presentation .trifit-card-actions { gap: 2px; }
  .presentation .trifit-card-actions button { min-width: 0; padding: 0; }
  .presentation .trifit-card-actions button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .presentation .tab-primary-action { padding-inline: 4px; font-size: 11px; }
  .presentation .asset-tabs button { font-size: 12px; padding-inline: 6px; }
  .presentation .provenance-pill { padding-inline: 8px; font-size: 11px; }
}
.request-progress [data-reload-result] {
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  background: #fff;
  color: #171717;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.request-progress [data-reload-result]:disabled { opacity: .65; cursor: wait; }
.deletion-preview { display: block; width: 100%; height: min(32dvh, 240px); object-fit: contain; border-radius: 14px; background: #e8e4dc; }
.reference-collection-slot { position: relative; min-width: 0; }
.collection-shell[data-mode="swipe"] .reference-collection-slot { flex: 0 0 100%; height: 100%; scroll-snap-align: center; }
.collection-shell[data-mode="swipe"] .reference-collection-slot .collection-poster { height: 100%; }
[data-delete-look-status]:empty { display: none; }
.trifit-collection { width: calc(100vw - 24px); max-width: none; height: calc(100dvh - 24px); max-height: none; padding: 0; border: 0; border-radius: 20px; background: var(--surface, #fffdf8); }
.collection-shell { height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 20px; box-sizing: border-box; }
.collection-shell > header, .collection-shell > nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.collection-shell > header h2 { margin: 0; flex: 1; }
.collection-shell button { cursor: pointer; }
.collection-shell > header button, .collection-shell > nav button { min-width: 44px; min-height: 44px; padding: 8px 16px; border-radius: 24px; border: 1px solid #d8d5ce; background: transparent; font: inherit; }
.collection-shell [aria-pressed="true"] { background: #171717; color: white; }
.collection-shell [data-collection-size] { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.collection-shell [data-collection-size][hidden] { display: none; }
.collection-shell > p { margin: 0; color: #74746c; }
.collection-list { --poster-size: 300px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--poster-size)), 1fr)); grid-auto-rows: max-content; gap: 12px; overflow: auto; flex: 1; min-height: 0; align-content: start; }
.collection-poster { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; background: #e8e4dc; border: 0; border-radius: 16px; overflow: hidden; padding: 0; }
.collection-poster img { width: 100%; height: 100%; object-fit: contain; }
.collection-poster span { position: absolute; inset: auto 0 0; padding: 24px 12px 12px; background: linear-gradient(transparent, #000c); color: #fff; text-align: left; }
.collection-shell[data-mode="swipe"] .collection-list { display: flex; scroll-snap-type: x mandatory; align-items: stretch; }
.collection-shell[data-mode="swipe"] .collection-poster { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: center; }
.collection-shell[data-mode="swipe"] .collection-list > .asset-card { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; }
.presentation-scroll-lock { overflow: hidden; }
[data-url-dialog] { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
[data-url-dialog] > form { width: 100%; min-width: 0; }
[data-url-dialog] .url-image-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
[data-url-dialog] .url-image-choice { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px; border-radius: 12px; }
[data-url-dialog] .url-image-choice img { display: block; width: 100%; height: 130px; object-fit: contain; border-radius: 8px; }
[data-url-dialog] .url-image-choice.is-unavailable { opacity: .5; }
@media (max-width: 440px) { [data-url-dialog] .url-image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Link-first sharing; optional export controls never crowd the mobile sheet. */
[data-share-dialog] { width: min(540px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
[data-share-dialog] .share-card { width: 100%; padding: 20px; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
.share-card .share-heading { grid-column: 1 / -1; text-align: center; padding-inline: 24px; }
.share-card .share-heading h2 { font-size: 22px; margin: 0 0 4px; }
.share-card .share-heading p, .share-card p { margin: 0; }
.share-card .share-preview { display: block; margin: 0; align-self: start; }
.share-card .share-preview img { width: 100%; height: 108px; object-fit: contain; border-radius: 12px; background: #e9e5db; }
.share-card .share-details, .share-card .share-delivery { display: grid; gap: 10px; min-width: 0; }
.share-card label { margin: 0; gap: 5px; font-size: 14px; }
.share-card label input, .share-card label select { min-height: 42px; padding: 8px 10px; }
.share-card .share-comparison-option { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.share-card .share-comparison-option input { width: 18px; height: 18px; min-height: 18px; flex: 0 0 18px; padding: 0; }
.share-card h3 { font-size: 14px; font-weight: 600; margin: 2px 0 0; }
.share-card .share-hint { font-size: 12px; color: var(--consumer-muted); line-height: 1.4; }
.share-card .share-media-list { margin: 0; font-size: 13px; display: grid; gap: 5px; }
.share-card .share-media-list li { padding: 7px 10px; border: 1px solid var(--consumer-line); border-radius: 12px; }
.share-card .share-links { font-size: 12px; line-height: 1.5; }
.share-card .share-delivery, .share-card .share-actions, .share-card .share-more, .share-card [data-share-status], .share-card .share-link-note { grid-column: 1 / -1; }
.share-card .share-more > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--consumer-muted); font-size: 13px; }
.share-card .share-more > summary::after { content: '+'; margin-left: auto; font-size: 20px; }
.share-card .share-more[open] > summary::after { content: '−'; }
.share-card .share-link-note { font-size: 12px; color: var(--consumer-muted); line-height: 1.4; }
.share-card .share-delivery { gap: 8px; }
.share-card .privacy-warning { padding: 10px 12px; font-size: 13px; }
.share-card .share-revoke { justify-self: start; min-height: 36px; padding: 4px 0; border: 0; background: none; text-decoration: underline; color: var(--consumer-muted); font: inherit; font-size: 12px; cursor: pointer; }
.share-card [data-share-status]:empty { display: none; }
.share-card .share-actions { display: grid; grid-template-columns: 1fr 1.4fr; margin: 0; background: var(--consumer-card, #fffdf8); }
.share-card [data-share-native] { background: var(--consumer-ink); color: white; }
.share-card .share-actions button { font-size: 12px; min-height: 44px; flex: 1; padding-inline: 8px; white-space: normal; }
@media (max-width: 520px) {
  [data-share-dialog] .share-card { padding: 16px; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; }
  .share-card .share-heading h2 { font-size: 20px; }
  .share-card .share-heading p { font-size: 13px; }
  .share-card .share-actions { grid-template-columns: 1fr 1.4fr; }
}

/* Acknowledged state, not a transient hover colour. Text/ARIA also change. */
.trifit-card-actions [data-demo-action="save"][aria-pressed="true"],
.trifit-card-actions [data-bookmark-save][aria-pressed="true"],
.trifit-card-actions [data-demo-action="visibility"][aria-pressed="true"] { background: #ffe36b; border-color: #ffe36b; color: #211c08; }
.trifit-card-actions [data-demo-action="save"][aria-pressed="true"] svg { fill: #ffe36b; }
.trifit-card-actions [data-demo-action="visibility"].is-review-pending { background: #ffdb91; border-color: #e9a62b; color: #513000; }
.trifit-card-actions [data-demo-action="visibility"].is-review-pending svg { display: none; }
.trifit-card-actions [data-demo-action="visibility"].is-review-pending::before {
  content: ''; display: inline-block; width: 15px; height: 15px; flex: 0 0 15px;
  box-sizing: border-box; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: trifit-tab-progress 1.2s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .trifit-card-actions [data-demo-action="visibility"].is-review-pending::before { animation: none; border-style: dotted; }
}
.rating button.is-selected, .asset-card .rating button.is-selected { color: #ffe36b; }

/* Native horizontal galleries: the same grid and top controls at every size. */
.gallery-panel > .collection-paging { justify-content: flex-end; padding: 4px 0 12px; }
.collection-paging [data-page-status] { order: -1; margin-right: auto; font-variant-numeric: tabular-nums; }
.collection-paging button { min-width: 44px; }
.gallery-live-count { display: inline-block; margin-left: 5px; padding: 3px 6px; border-radius: 99px; color: #211139; background: #e7ddff; font-size: 11px; white-space: nowrap; }
.gallery-live-count[hidden] { display: none; }
.trifit-gallery-rail[data-horizontal-collection] { height: clamp(380px, calc(100dvh - 290px), 700px); }
.trifit-gallery-rail[data-horizontal-collection],
.collection-shell .collection-list[data-horizontal-collection] {
  display: grid; grid-template-columns: none; grid-auto-flow: column;
  grid-template-rows: repeat(var(--horizontal-rows, 1), minmax(0, 1fr));
  grid-auto-columns: calc((100% - (var(--horizontal-columns, 1) - 1) * 12px) / var(--horizontal-columns, 1));
  gap: 12px; overflow-x: auto; overflow-y: hidden; align-content: stretch;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
[data-horizontal-collection] > * { min-width: 0; min-height: 0; scroll-snap-align: start; }
[data-horizontal-collection] > .asset-card { height: 100%; box-sizing: border-box; }
[data-horizontal-collection] .asset-viewer { display: flex; flex-direction: column; height: 100%; min-height: 0; }
[data-horizontal-collection] .asset-header { flex-shrink: 0; }
[data-horizontal-collection] .asset-media { flex: 1; aspect-ratio: auto; }
.collection-shell [data-horizontal-collection] .collection-poster { height: 100%; aspect-ratio: auto; }
.collection-shell [data-horizontal-collection] .reference-collection-slot { height: 100%; }
.collection-shell [data-horizontal-collection] > .gallery-empty { grid-column: 1; }
.collection-shell > [data-paging] { padding: 0; flex-wrap: nowrap; }
.collection-shell[data-mode="swipe"] [data-horizontal-collection] { --horizontal-columns: 1 !important; --horizontal-rows: 1 !important; }
@media (max-width: 520px) {
  .collection-shell { padding: 12px; gap: 8px; }
  .collection-shell > header h2 { font-size: 19px; }
  .collection-shell > [aria-label="Collection layout"], .collection-shell > [data-collection-hint] { display: none; }
  .trifit-gallery-rail[data-horizontal-collection] { height: clamp(360px, calc(100dvh - 260px), 620px); }
}
/* Batch imports use the existing input area; no full-screen upload wizard. */
.import-batch { margin-block: 12px; padding: 12px; border: 1px solid var(--line, #ddd); border-radius: 14px; font-size: 13px; }
.import-batch p { margin: 0 0 8px; }
.import-batch ol { max-height: 180px; overflow-y: auto; margin: 8px 0; padding-left: 20px; }
.import-batch li { padding-block: 4px; overflow-wrap: anywhere; }
.import-batch li span { display: block; }
.import-batch li span + span { color: var(--muted, #666); font-size: 12px; }
.import-batch .dialog-actions { flex-wrap: wrap; margin-top: 8px; }
.import-batch button { min-height: 44px; }
.recipient-vote { display:flex; align-items:center; justify-content:center; gap:12px; }
.recipient-vote[hidden] { display:none; }
.recipient-vote .rating button { min-width:44px; min-height:44px; font-size:26px; color:#666; }
.recipient-vote .rating button.is-selected { color:#9b7000; }
[data-community-summary] { font-size:11px; white-space:nowrap; }
[data-remote-kind] .asset-footer { grid-template-columns: minmax(0, 1fr); }
[data-unread-count].gallery-unread-count { margin-inline-start: .35rem; padding: .1rem .35rem; border-radius: 1rem; background: var(--accent, #8061ee); color: #fff; font-size: .75em; }
.asset-card.is-unread { box-shadow: 0 0 0 2px #9b7bea; }
.gallery-result-unread { position: absolute; top: 10px; right: 10px; z-index: 5; padding: 6px 10px; border-radius: 99px; background: #e7ddff; color: #29164a; font-size: 12px; font-weight: 700; pointer-events: none; animation: trifit-unread-attention 1.35s ease-in-out infinite; }
@keyframes trifit-unread-attention { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .gallery-result-unread { animation: none; } }
.owner-filters[hidden], [data-unread-count][hidden] { display: none; }
.public-report-dialog { width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; border: 1px solid var(--consumer-line); border-radius: 22px; padding: 22px; background: var(--consumer-card); }
.public-report-dialog form, .public-report-dialog fieldset { display: grid; gap: 12px; }
.public-report-dialog fieldset label { display: flex; align-items: start; gap: 8px; }
.public-report-dialog small { display: block; }
.public-report-dialog textarea { display: block; width: 100%; box-sizing: border-box; }
.public-report-dialog button { min-height: 44px; }
[data-gallery-filter][hidden], [data-owner-filter][hidden] { display: none; }
.presentation [data-remote-open] { display: none; }
/* Optional input matching uses the existing gallery/collection window. */
.gallery-input-filter{display:inline-flex;align-items:center;gap:8px;min-height:40px;font-size:13px;cursor:pointer;margin:0 0 8px}
.gallery-input-filter input{width:16px;height:16px;accent-color:#8766ef;margin:0}
.gallery-input-filter:has(input:checked){color:#6542bf}
.clear-input-selection{display:block;margin:2px auto 0;padding:2px 6px;border:0;background:transparent;font:inherit;font-size:11px;color:var(--muted,#696961);min-height:28px}
.clear-input-selection:hover{text-decoration:underline}
:root .trifit-continuation-dialog { width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; border: 1px solid var(--line, #ddd); border-radius: 24px; padding: 24px; background: var(--paper, #fffef9); color: #171714; }
.trifit-continuation-dialog::backdrop { background: #14141099; backdrop-filter: blur(5px); }
.trifit-continuation-dialog h2 { margin-top: 0; }
.trifit-continuation-dialog img { display: block; width: 100%; height: min(36dvh, 260px); object-fit: contain; border-radius: 14px; background: #e8e4da; }
.trifit-continuation-dialog img[hidden] { display: none; }
.trifit-continuation-dialog .dialog-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.trifit-continuation-dialog button { padding: 12px 16px; border-radius: 14px; border: 1px solid #d8d5cd; min-height: 44px; }
.trifit-continuation-dialog button[type=submit] { background: #8964ed; color: white; flex: 1; }
.trifit-continuation-dialog button:disabled { opacity: .5; }

/* Public product explanation remains readable below the creation workspace. */
.discovery-info{max-width:1100px;margin:32px auto;padding:24px;line-height:1.65;overflow-wrap:anywhere}.discovery-info h2{font-size:clamp(22px,4vw,32px);line-height:1.2}.discovery-info details{border-top:1px solid #8884;padding:14px 0}.discovery-info summary{cursor:pointer;font-weight:700}.discovery-info a{color:inherit;text-decoration:underline}.discovery-info p{max-width:78ch}.discovery-info ol{padding-left:24px}

/* Compact public allowance; operational details stay collapsed. */
[data-credits-dialog] { max-height: calc(100dvh - 28px); overflow: auto; }
[data-credits-dialog] [data-credits-summary] { white-space: normal; }
.allowance-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0 18px; }
.allowance-card { padding: 16px 12px; border: 1px solid var(--consumer-line); border-radius: 16px; background: color-mix(in srgb, var(--consumer-accent) 9%, var(--consumer-card)); text-align: center; }
.allowance-card h3 { margin: 0 0 8px; font-size: 14px; }
.allowance-number { display: block; font-size: 38px; line-height: 1.1; letter-spacing: -.04em; }
.allowance-card span { display: block; margin-top: 5px; color: var(--consumer-muted); font-size: 12px; }
.allowance-state { display: block; padding: 8px 0; font-size: 14px; line-height: 1.4; }
.allowance-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.allowance-table caption { padding: 0 0 7px; text-align: left; color: var(--consumer-muted); font-size: 12px; }
.allowance-table th, .allowance-table td { padding: 10px 3px; border-bottom: 1px solid var(--consumer-line); text-align: right; white-space: nowrap; }
.allowance-table th:first-child { text-align: left; }
.allowance-table thead th { color: var(--consumer-muted); font-size: 12px; font-weight: 500; }
.allowance-details { margin-top: 18px; font-size: 12px; color: var(--consumer-muted); }
.allowance-details summary { min-height: 28px; cursor: pointer; color: var(--consumer-ink); font-size: 13px; font-weight: 650; }
.allowance-details h4 { margin: 12px 0 5px; color: var(--consumer-ink); }
.allowance-details ul { padding-left: 18px; margin: 6px 0; line-height: 1.6; }
.allowance-details p { margin: 8px 0; }
@media (max-width: 380px) {
  [data-credits-dialog] .modal-card h2 { font-size: 24px; }
  .allowance-cards { gap: 8px; }
  .allowance-table { font-size: 12px; }
}


/* Live per-service header balances; zero is visible in text and colour. */
[data-shell-action="credits"].allowance-pill { padding: 8px 14px; border-radius: 16px; }
.allowance-pill-grid { display: grid; grid-template-columns: auto repeat(3, minmax(36px, 1fr)); gap: 3px 12px; align-items: center; font-size: 12px; line-height: 1.3; text-align: center; font-variant-numeric: tabular-nums; }
.allowance-pill-grid > :nth-child(4n + 1) { text-align: left; }
.allowance-pill-heading { font-size: 10px; font-weight: 500; color: var(--consumer-muted); }
.allowance-pill-status { grid-column: span 3; font-size: 11px; color: var(--consumer-muted); }
.allowance-exhausted { color: #b42318; font-weight: 800; }
@media (max-width: 1000px) {
  .top-actions:has(.allowance-pill) { flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 760px) {
  .top-actions:has(.allowance-pill) { width: 100%; }
  [data-shell-action="credits"].allowance-pill { margin-right: auto; }
}
@media (max-width: 520px) {
  [data-shell-action="credits"].allowance-pill[data-allowance-state="ready"] { width: 100%; }
}
/* Public discovery copy and owner-approved examples. */
#public-examples-title,#page-title{scroll-margin-top:120px}
.create-copy h1{font-size:clamp(28px,3vw,40px);line-height:1.12;letter-spacing:-.035em;text-transform:none}
.discovery-intro,.discovery-allowance{font-size:14px;line-height:1.55;max-width:65ch}
.public-examples article{margin:32px 0;padding:24px;border:1px solid #8884;border-radius:24px;background:var(--surface,#fffef9)}
.public-example-images{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.public-example-images figure{margin:0;min-width:0}.public-example-images img{width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;background:#e8e4da;border-radius:12px}
.public-example-images figcaption{font-size:13px;line-height:1.4;padding-top:8px}
.public-examples video{display:block;max-width:100%;width:270px;border-radius:16px}
@media(max-width:600px){.public-examples article{padding:14px}.public-example-images{gap:6px}.public-example-images figcaption{font-size:11px}}

.request-progress [data-dismiss-request],
.request-progress [data-restore-request-inputs] {
  border: 1px solid #fff;
  border-radius: 999px;
  padding: 9px 16px;
  background: #fff;
  color: #111;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.request-progress [data-dismiss-request]:focus-visible,
.request-progress [data-restore-request-inputs]:focus-visible {
  outline: 3px solid var(--consumer-accent-strong);
  outline-offset: 3px;
}
:where(.google-sign-in:not([hidden])) { display: grid; justify-items: center; gap: 8px; margin: 18px 0; }
.google-sign-in-status, .auth-divider { font-size: 13px; text-align: center; color: #64645e; }
.auth-divider { width: 100%; margin: 8px 0; }