/* Agency workspace. Reclorio palette and motion tokens; phone first, transform/opacity only. */

/* ---------- Cards and lists ---------- */
.agency-card, .agency-creator-head, .agency-stat-row {
  display: flex; align-items: center; gap: var(--space-md); width: 100%; min-height: 70px;
  padding: var(--space-md); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  background: var(--surface-raised); color: var(--text); text-align: left;
  transition: transform .38s var(--ease-spring, ease), background-color .18s, border-color .18s;
}
.agency-card:active, .agency-creator-head:active:not(:disabled), .agency-stat-row:active { transform: scale(.982); transition-duration: .1s; }
.agency-card .button-label, .agency-creator-head .button-label, .agency-stat-row .button-label,
.agency-tile .button-label, .agency-picker-chip .button-label { display: none; }
.agency-card .avatar, .agency-creator .avatar, .agency-member .avatar, .agency-stat-row .avatar,
.agency-membership-head .avatar { width: 44px; height: 44px; border-radius: 13px; font-size: 16px; }
.agency-avatar { background: linear-gradient(145deg, #173a63, #0f2440); border-color: #2f5f92; }
.agency-card-copy { display: grid; gap: 3px; flex: 1; min-width: 0; }
.agency-card-copy strong { font-size: 15px; font-weight: 650; line-height: 1.3; overflow-wrap: break-word; }
.agency-card-copy > .agency-status { justify-self: start; margin-top: 4px; }
.agency-card-copy small { color: var(--muted); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.agency-list, .agency-roster, .agency-stat-list { gap: var(--space-sm); }
.agency-chevron { flex: none; width: 16px; height: 16px; color: var(--subtle); transition: transform .3s var(--ease-spring, ease); }
:is(.agency-card, .agency-creator-head, .agency-stat-row):active .agency-chevron { transform: translateX(3px); }

/* ---------- Status pills ---------- */
.agency-status {
  display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 4px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap;
  color: var(--muted); background: var(--surface); border: 1px solid var(--border-soft);
}
.agency-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.agency-status--active { color: #6fe3bd; border-color: #1d5a49; background: #0d241e; }
.agency-status--pending { color: #f5c26b; border-color: #5b4524; background: #251d12; }
.agency-status--pending::before { animation: agency-pulse 1.8s ease-in-out infinite; }
.agency-status--owner { color: #cfe6ff; border-color: #2765a6; background: #133457; }
.agency-status--manager { color: #86c5ff; border-color: #1f4469; background: var(--accent-soft); }
.agency-status--declined, .agency-status--expired, .agency-status--left { color: #ff9aa0; border-color: #5b2a2e; background: #2a1416; }

/* ---------- Roster ---------- */
.surface-card.agency-creator { display: grid; gap: var(--space-sm); padding: var(--space-sm); }
.agency-creator .agency-creator-head { border: 0; background: transparent; min-height: 60px; padding: var(--space-sm); }
.agency-creator .agency-creator-head:disabled { opacity: 1; cursor: default; }
.agency-creator .detail-hint { margin: 0 var(--space-sm); }
.agency-creator-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: 0 var(--space-sm) var(--space-sm); }
.agency-creator-actions .secondary { flex: 1 1 0; min-width: 0; min-height: 42px; gap: 6px; padding-inline: 8px; font-size: 13px; }
.agency-creator-actions .secondary .icon { width: 16px; height: 16px; flex: none; }
.agency-creator-actions .icon-button { flex: none; width: 42px; height: 42px; }
.agency-creator-actions .secondary .button-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agency-creator--pending, .agency-creator--expired { border-color: #3a3320; }
.agency-creator--left { opacity: .7; }

/* ---------- Home ---------- */
.agency-summary.stats-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.agency-summary .stat-card:not(:first-child) .stat-number, .agency-split .stat-number {
  font-size: clamp(16px, 4.4vw, 22px); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.agency-pending-notice { display: flex; align-items: center; gap: var(--space-md); border-color: #5b4524; background: #251d12; color: #eac58d; }
.agency-pending-notice > span { flex: 1; }
.agency-pending-notice .text-button { flex: none; color: #f5c26b; }
.agency-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin: var(--space-lg) 0 var(--space-sm); }
.agency-tile {
  position: relative; display: grid; align-content: start; gap: 6px; min-height: 124px; padding: var(--space-md);
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg); text-align: left; color: var(--text);
  background: radial-gradient(120% 90% at 100% 0%, rgba(42, 140, 255, .14), transparent 60%), var(--surface-raised);
  animation: motion-rise .46s var(--ease-out-expo, ease) backwards; animation-delay: calc(var(--i, 0) * 55ms);
  transition: transform .38s var(--ease-spring, ease), border-color .2s;
}
.agency-tile:active { transform: scale(.97); transition-duration: .1s; }
.agency-tile strong { font-size: 15px; line-height: 1.3; }
.agency-tile small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.agency-tile-icon, .agency-intro-icon {
  display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 4px; border-radius: 12px;
  background: var(--accent-soft); color: #86c5ff;
}
.agency-tile-icon .icon, .agency-intro-icon .icon { width: 20px; height: 20px; }
.agency-tile:active .agency-tile-icon { transform: scale(.92); }
.agency-tile-icon { transition: transform .3s var(--ease-spring, ease); }

/* ---------- First visit ---------- */
.surface-card.agency-intro { margin: var(--space-lg) 0; }
.agency-intro-steps { display: grid; gap: var(--space-md); }
.agency-intro-step { display: flex; gap: var(--space-md); align-items: flex-start; animation: motion-rise .5s var(--ease-out-expo, ease) backwards; }
.agency-intro-step:nth-child(2) { animation-delay: 80ms; }
.agency-intro-step:nth-child(3) { animation-delay: 160ms; }
.agency-intro-copy { display: grid; gap: 3px; }
.agency-intro-copy strong { font-size: 15px; }
.agency-intro-copy small { color: var(--muted); font-size: 13px; line-height: 1.45; }
.agency-create { margin-top: var(--space-xl); }

/* ---------- Add a blogger: three steps ---------- */
.agency-flow { position: relative; display: grid; gap: var(--space-sm); margin: 0 0 var(--space-lg); padding: 0; list-style: none; }
.agency-flow-step {
  display: flex; align-items: center; gap: var(--space-md); padding: 10px var(--space-md); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); background: var(--surface-raised); animation: motion-rise .44s var(--ease-out-expo, ease) backwards;
}
.agency-flow-step > span:last-child { display: grid; gap: 2px; min-width: 0; }
.agency-flow-step:nth-child(2) { animation-delay: 70ms; }
.agency-flow-step:nth-child(3) { animation-delay: 140ms; }
.agency-flow-step strong { display: block; font-size: 14px; }
.agency-flow-step small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }
.agency-flow-number { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #2277d1; color: #fff; font-size: 12px; font-weight: 700; }

/* ---------- Links: box, actions, sheet ---------- */
.agency-link-body { display: grid; gap: var(--space-md); padding: 0 0 calc(var(--space-sm) + var(--safe-bottom)); }
.agency-link-body .detail-hint { margin: 0; }
.agency-link-box {
  display: flex; align-items: center; gap: var(--space-sm); min-width: 0; padding: var(--space-md);
  border: 1px dashed #2f5f92; border-radius: var(--radius-md); background: #0b1a2b; color: #a9d2ff;
}
.agency-link-box .icon { flex: none; width: 18px; height: 18px; }
.agency-link-value { min-width: 0; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.agency-link-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.agency-link-actions > button { min-height: 46px; }
.agency-link-note { margin: 0; }
.surface-card.agency-link-card { display: grid; gap: var(--space-md); margin: var(--space-lg) 0; }

/* ---------- Success screens ---------- */
.agency-done { display: grid; justify-items: center; gap: var(--space-sm); padding: var(--space-2xl) 0 var(--space-lg); text-align: center; }
.agency-done h1 { margin: var(--space-sm) 0 0; font-size: 26px; line-height: 1.2; letter-spacing: -.4px; }
.agency-done .lead { max-width: 34ch; margin: 0; }
.agency-done-mark {
  position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3aa0ff, #1a63c0); color: #fff;
  box-shadow: 0 18px 40px -18px var(--accent-glow, rgba(42, 140, 255, .55));
  animation: motion-pop .6s var(--ease-spring, ease) backwards;
}
.agency-done-mark::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(42, 140, 255, .45); animation: motion-halo 1.4s .3s var(--ease-out-expo, ease) 2 backwards; }
.agency-done-mark .icon { width: 34px; height: 34px; stroke-width: 2.4; stroke-dasharray: 30; stroke-dashoffset: 30; animation: motion-draw .5s .3s var(--ease-out-expo, ease) forwards; }
.agency-done-mark.is-error { background: radial-gradient(circle at 35% 30%, #ff7b82, #c23a44); box-shadow: none; }
.agency-done-mark.is-error::after { border-color: rgba(255, 101, 109, .45); }

/* ---------- Team ---------- */
.surface-card.agency-team-intro { display: flex; gap: var(--space-md); align-items: flex-start; margin: var(--space-lg) 0; }
.agency-team-intro > .icon { flex: none; width: 22px; height: 22px; color: #86c5ff; }
.agency-team-intro p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.surface-card.agency-member { display: grid; gap: var(--space-sm); padding: var(--space-md); min-width: 0; }
.agency-member-head { display: flex; align-items: center; gap: var(--space-md); min-width: 0; }
.agency-member-head .agency-status { flex: none; }
.agency-member-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm);
  padding-top: var(--space-sm); border-top: 1px solid var(--border-soft);
}
.agency-member .icon-button { flex: none; }
.offer-group-result.is-clickable { cursor: pointer; }

/* ---------- Statistics ---------- */
.agency-stat-row { min-height: 76px; }
.agency-stat-amount { flex: none; font-size: 15px; font-variant-numeric: tabular-nums; }
.agency-stat-bar { position: relative; display: block; height: 4px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: var(--border-soft); }
.agency-stat-bar::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: var(--share, 0%); border-radius: inherit;
  background: linear-gradient(90deg, #2277d1, #4aa8ff); transform-origin: left;
  animation: agency-grow .8s .15s var(--ease-out-expo, ease) backwards;
}

/* ---------- Calendar: whose calendar ---------- */
.agency-calendar-scope { display: grid; gap: var(--space-sm); margin: 0 0 var(--space-md); }
.agency-calendar-scope .field-help { margin: 0; }
.agency-picker {
  display: flex; gap: var(--space-sm); margin: 0 calc(-1 * var(--space-lg)); padding: 2px var(--space-lg) 6px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.agency-picker::-webkit-scrollbar { display: none; }
.agency-picker-chip {
  display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 5px 14px 5px 5px;
  border: 1px solid var(--border-soft); border-radius: 999px; background: var(--surface-raised); color: var(--muted);
  scroll-snap-align: center; font-size: 14px; font-weight: 600;
  transition: transform .34s var(--ease-spring, ease), background-color .2s, border-color .2s, color .2s;
}
.agency-picker-chip:active { transform: scale(.95); transition-duration: .1s; }
.agency-picker-chip.is-active { color: var(--text); border-color: #2765a6; background: var(--accent-soft); box-shadow: 0 6px 18px -10px var(--accent-glow, rgba(42, 140, 255, .55)); }
.agency-picker-avatar.avatar { width: 32px; height: 32px; border-radius: 50%; font-size: 12px; }

/* ---------- Settings ---------- */
.surface-card.agency-page-card { display: grid; gap: var(--space-md); margin: var(--space-lg) 0; }
.agency-page-head { display: flex; align-items: center; gap: var(--space-md); }
.agency-page-head .agency-tile-icon { margin: 0; }
.agency-page-card .detail-hint { margin: 0; }
.surface-card.agency-switch-card { margin: 0 0 var(--space-lg); padding: var(--space-sm) var(--space-md); }

/* ---------- Blogger panel inside an agency ---------- */
.agency-mode { display: grid; gap: var(--space-sm); margin-top: var(--space-md); animation: motion-rise .36s var(--ease-out-expo, ease); }
.agency-mode .notice { margin: 0; }
.agency-mode-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.agency-mode-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; max-width: 100%; min-width: 0; padding: 6px 14px 6px 10px;
  border: 1px solid #2765a6; border-radius: 999px; background: var(--accent-soft); color: #cfe6ff; font-size: 13px; font-weight: 600;
  transition: transform .32s var(--ease-spring, ease);
}
.agency-mode-back .button-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agency-mode-back .icon { width: 16px; height: 16px; flex: none; transition: transform .3s var(--ease-spring, ease); }
.agency-mode-back:active { transform: scale(.96); }
.agency-mode-back:active .icon { transform: translateX(-3px); }

/* ---------- Blogger's confirmation ---------- */
.agency-claim-hero { display: grid; justify-items: center; gap: var(--space-sm); padding: var(--space-xl) 0 var(--space-lg); text-align: center; }
.agency-claim-hero h1 { margin: 0; font-size: 24px; line-height: 1.25; letter-spacing: -.4px; }
.agency-claim-hero .lead { max-width: 36ch; margin: 0; }
.agency-claim-avatars { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.agency-claim-avatars .avatar { width: 64px; height: 64px; border-radius: 20px; font-size: 22px; animation: motion-pop .55s var(--ease-spring, ease) backwards; }
.agency-claim-avatars .avatar:last-child { animation-delay: .16s; }
.agency-claim-link {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #86c5ff; background: var(--accent-soft);
  animation: motion-pop .45s .08s var(--ease-spring, ease) backwards, agency-pulse-ring 2.4s 1s ease-out infinite;
}
.agency-claim-link .icon { width: 17px; height: 17px; }
.surface-card.agency-claim-profile { display: grid; gap: var(--space-md); }
.agency-membership-head { display: flex; align-items: center; gap: var(--space-md); }
.agency-claim-channels, .agency-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.agency-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--border-soft); background: var(--surface); color: var(--muted); font-size: 12px;
}
.agency-chip .icon { width: 14px; height: 14px; }
.agency-claim-points { display: grid; gap: var(--space-md); margin: var(--space-lg) 0; padding: 0; list-style: none; }
.agency-claim-points li { display: flex; align-items: center; gap: var(--space-md); font-size: 14px; line-height: 1.45; color: #d5dde7; animation: motion-rise .46s var(--ease-out-expo, ease) backwards; }
.agency-claim-points li:nth-child(2) { animation-delay: 70ms; }
.agency-claim-points li:nth-child(3) { animation-delay: 140ms; }
.agency-claim-points .agency-intro-icon { flex: none; margin: 0; }
.surface-card.agency-claim-consent { display: grid; gap: var(--space-md); }
.agency-claim-actions { display: grid; gap: var(--space-sm); margin-top: var(--space-lg); }
.surface-card.agency-membership { display: grid; gap: var(--space-sm); }
.surface-card.agency-membership .detail-hint { margin: 0; }

/* ---------- Advertiser: several bloggers for one offer ---------- */
.agency-pick .section-head { align-items: center; }
.agency-pick .detail-hint { margin: 0 0 var(--space-md); }
.agency-pick-list .creator-card { transition: transform .34s var(--ease-spring, ease), border-color .2s, background-color .2s; }
.agency-pick-list .creator-card.selected { border-color: #2765a6; background: var(--accent-soft); }
.agency-pick-list .creator-card.selected > .icon { color: var(--accent); animation: motion-pop .35s var(--ease-spring, ease); }
.agency-pick-bar .primary { transition: transform .36s var(--ease-spring, ease), opacity .2s, box-shadow .25s; }
.agency-pick-bar:not(.is-ready) .primary { opacity: .55; }
.surface-card.offer-group { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); }
.offer-group-avatars { display: flex; flex: none; padding-left: 10px; }
.offer-group-avatars .avatar {
  width: 38px; height: 38px; margin-left: -10px; border-radius: 50%; font-size: 13px; border: 2px solid var(--surface-raised);
  animation: motion-pop .45s var(--ease-spring, ease) backwards; animation-delay: calc(var(--i, 0) * 60ms);
}
.offer-group-more { display: grid; place-items: center; width: 38px; height: 38px; margin-left: -10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--surface-raised); color: var(--muted); font-size: 12px; font-weight: 700; }

@keyframes agency-pulse { 50% { opacity: .35; transform: scale(.8); } }
@keyframes agency-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(42, 140, 255, .45); } 100% { box-shadow: 0 0 0 12px rgba(42, 140, 255, 0); } }
@keyframes agency-grow { from { transform: scaleX(0); } }

@media (max-width: 374px) {
  .agency-summary.stats-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agency-tile { min-height: 112px; }
}
@media (hover: hover) and (pointer: fine) {
  .agency-card:hover, .agency-stat-row:hover, .agency-tile:hover, .agency-creator-head:hover:not(:disabled) { border-color: var(--border); background-color: var(--surface-hover); }
}
@media (prefers-reduced-motion: reduce) {
  .agency-tile, .agency-intro-step, .agency-flow-step, .agency-done-mark, .agency-done-mark::after, .agency-done-mark .icon,
  .agency-claim-avatars .avatar, .agency-claim-link, .agency-claim-points li, .agency-mode, .agency-status--pending::before,
  .agency-stat-bar::after, .offer-group-avatars .avatar, .agency-pick-list .creator-card.selected > .icon { animation: none !important; }
  .agency-done-mark .icon { stroke-dashoffset: 0; }
}

/* ---------- Agency / Manager plan: pick how many bloggers ---------- */
.agency-plan { display: grid; gap: var(--space-sm); }
.agency-plan-total { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.agency-plan-total small { font-size: 15px; font-weight: 500; color: var(--muted); }
.agency-plan-total.is-bumped span { display: inline-block; animation: motion-pop .38s var(--ease-spring, ease); }
.agency-plan-per-seat { margin: 0; }
.agency-seat-stepper { display: flex; align-items: center; gap: var(--space-sm); margin: var(--space-sm) 0; }
.agency-seat-stepper .icon-button { width: 48px; height: 48px; }
.agency-seat-field {
  display: flex; flex: 1; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 var(--space-md);
  border: 1px solid #2765a6; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--muted); font-size: 14px;
}
.agency-seat-input {
  width: 5ch; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 22px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.agency-seat-input::-webkit-outer-spin-button, .agency-seat-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.agency-plan-warning { margin: 0; }
.agency-plan-tiers { display: grid; gap: 4px; margin: var(--space-sm) 0; padding: 0; list-style: none; }
.agency-plan-tiers li {
  display: flex; justify-content: space-between; gap: var(--space-sm); padding: 8px 12px; border-radius: 10px;
  color: var(--muted); font-size: 13px; transition: background-color .25s, color .25s;
}
.agency-plan-tiers li strong { color: var(--text); font-variant-numeric: tabular-nums; }
.agency-plan-tiers li.is-active { background: var(--accent-soft); color: #cfe6ff; box-shadow: inset 0 0 0 1px #2765a6; }

/* ---------- Seats meter and access banner ---------- */
.surface-card.agency-seats { display: grid; gap: var(--space-sm); margin: var(--space-md) 0; padding: var(--space-md); }
.agency-seats-head { display: flex; align-items: center; gap: var(--space-md); }
.agency-seats-bar { position: relative; display: block; height: 6px; overflow: hidden; border-radius: 999px; background: var(--border-soft); }
.agency-seats-bar::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: var(--share, 0%); border-radius: inherit;
  background: linear-gradient(90deg, #2277d1, #4aa8ff); transform-origin: left; animation: agency-grow .8s .1s var(--ease-out-expo, ease) backwards;
}
.agency-seats.is-full .agency-seats-bar::after { background: linear-gradient(90deg, #c98a1b, #f5c26b); }
.agency-access-ended { margin-top: 0; }

/* ---------- Commission ---------- */
.agency-commission-chip {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin: 0 var(--space-sm); padding: 6px 12px;
  border: 1px solid var(--border-soft); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 13px;
  transition: transform .3s var(--ease-spring, ease), border-color .2s, color .2s;
}
.agency-commission-chip .icon { width: 15px; height: 15px; }
.agency-commission-chip:active { transform: scale(.96); }
.agency-percent-field { justify-content: center; }
.agency-percent-input { width: 4ch; }
.agency-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin: 0 0 var(--space-lg); }
.ov2-agency-fee {
  display: grid; gap: 10px; margin: 10px 0 14px; padding: 14px 16px; border: 1px solid #1d5a49; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(32, 201, 151, .1), transparent 70%), var(--surface-raised);
  animation: motion-rise .4s var(--ease-out-expo, ease) backwards;
}
.ov2-agency-fee-head { display: flex; align-items: center; gap: var(--space-md); }
.ov2-agency-fee-head strong { font-size: 17px; }
.ov2-agency-fee-bar { position: relative; display: block; height: 6px; overflow: hidden; border-radius: 999px; background: #193a5c; }
.ov2-agency-fee-bar::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: var(--share, 0%); border-radius: inherit;
  background: linear-gradient(90deg, #15a37a, #6fe3bd); transform-origin: left; animation: agency-grow .8s .15s var(--ease-out-expo, ease) backwards;
}
.ov2-agency-fee-split { display: flex; justify-content: space-between; gap: var(--space-md); }
.ov2-agency-fee-split > span { display: grid; gap: 2px; }
.ov2-agency-fee-split > span:last-child { text-align: right; }
.ov2-agency-fee-split small { color: var(--muted); font-size: 12px; }
.ov2-agency-fee-split strong { font-variant-numeric: tabular-nums; }

/* ---------- Settings: photo and the danger zone ---------- */
.surface-card.agency-photo-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin: 0 0 var(--space-lg); }
.agency-photo-preview.avatar { width: 64px; height: 64px; border-radius: 18px; transition: opacity .2s, transform .3s var(--ease-spring, ease); }
.agency-photo-preview.is-uploading { opacity: .5; transform: scale(.94); }
.agency-photo-actions { display: flex; gap: var(--space-sm); width: 100%; }
.agency-photo-actions .secondary { flex: 1; min-height: 44px; }
.surface-card.agency-danger { display: grid; gap: var(--space-sm); margin: var(--space-xl) 0; border-color: #5b2a2e; background: #170d0f; }
.agency-danger h2 { margin: 0; font-size: 17px; color: #ff9aa0; }
.agency-danger .detail-hint { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .agency-plan-total.is-bumped span, .agency-seats-bar::after, .ov2-agency-fee, .ov2-agency-fee-bar::after { animation: none !important; }
}

/* ---------- Fixes: steps, spacing, tabs, catalog switch, commission chip ---------- */
.agency-intro-step > .agency-intro-icon { flex: none; margin: 0; }
.agency-intro-step { align-items: flex-start; }
.switcher.agency-navigation.creator-navigation { grid-template-columns: .9fr .95fr 1.35fr 1fr; }
.agency-navigation + .agency-content > :first-child,
.agency-access-ended + .agency-navigation + .agency-content > :first-child { margin-top: var(--space-lg); }
.agency-content > .full-button { margin-bottom: var(--space-md); }
.agency-content > .full-button + .empty-state, .agency-content > .agency-seats + .full-button { margin-top: var(--space-md); }
.surface-card.agency-switch-card { padding: 0 var(--space-md); }
.agency-switch-card .app-switch-row, .agency-switch-card .app-switch-row:last-child { min-height: 68px; padding: 14px 0; }
.agency-commission-chip { position: relative; gap: 5px; min-height: 28px; margin: 0 var(--space-sm); padding: 4px 10px; font-size: 12px; line-height: 1.3; }
/* Small to the eye, still easy to tap. */
.agency-commission-chip::after { content: ''; position: absolute; inset: -8px -4px; }
.agency-commission-chip .icon { width: 13px; height: 13px; }
.surface-card.agency-creator { gap: 6px; }
.agency-creator .detail-hint { margin-top: 2px; }
main.is-quiet *, main.is-quiet *::before, main.is-quiet *::after { animation: none !important; }
.agency-mode .back { margin-bottom: 0; }
.notice.agency-invites-notice { display: flex; align-items: center; gap: var(--space-md); }
.agency-invites-notice > .icon { flex: none; width: 20px; height: 20px; color: #86c5ff; }
.agency-invites-notice .agency-card-copy strong { font-size: 14px; color: var(--text); }
.agency-invites-notice .text-button { flex: none; }

/* ---------- New profile: photo and every platform ---------- */
.profile-setup { display: grid; gap: var(--space-sm); margin: var(--space-sm) 0 var(--space-lg); }
.profile-setup-photo { display: flex; align-items: center; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.profile-setup-face {
  position: relative; flex: none; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  transition: transform .34s var(--ease-spring, ease);
}
.profile-setup-face:active { transform: scale(.94); }
.profile-setup-avatar.avatar {
  width: 84px; height: 84px; border-radius: 50%; font-size: 28px; border: 2px dashed #2f5f92; overflow: hidden;
  background: radial-gradient(circle at 30% 25%, #1b3d63, #0f2440);
}
.profile-setup-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-setup-face.has-photo .profile-setup-avatar { border-style: solid; border-color: var(--accent); }
.profile-setup-face.is-popped .profile-setup-avatar { animation: motion-pop .45s var(--ease-spring, ease); }
.profile-setup-badge {
  position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 30px; height: 30px;
  border: 3px solid var(--surface-raised); border-radius: 50%; background: var(--accent); color: #fff;
}
.profile-setup-badge .icon { width: 14px; height: 14px; }
.profile-setup-photo-copy { display: grid; gap: 3px; justify-items: start; min-width: 0; }
.profile-setup-photo-copy strong { font-size: 15px; }
.profile-setup-photo-copy small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.profile-setup-photo-copy .text-button { min-height: 32px; padding: 0; }
.profile-setup-heading { display: grid; gap: 2px; margin-top: var(--space-sm); }
.profile-setup-heading strong { font-size: 15px; }
.profile-setup-heading small { color: var(--muted); font-size: 12px; }
.profile-setup-platforms { display: grid; gap: var(--space-sm); }
.profile-setup-platform {
  display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  background: var(--surface); animation: motion-rise .38s var(--ease-out-expo, ease) backwards;
  transition: opacity .2s, transform .22s var(--ease-out-expo, ease), border-color .2s;
}
.profile-setup-platform:focus-within { border-color: #2765a6; }
.profile-setup-platform.is-leaving { opacity: 0; transform: translateX(16px) scale(.98); }
.profile-setup-url-row { display: flex; align-items: center; gap: 6px; }
.profile-setup-url-row .profile-setup-url { flex: 1; min-width: 0; }
.profile-setup-platforms.is-single .profile-setup-url-row .icon-button { display: none; }
.profile-setup-url-row .icon-button { flex: none; width: 42px; height: 46px; }
.profile-setup-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.profile-setup-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 36px; padding: 6px 3px; border: 1px solid var(--border-soft);
  border-radius: 999px; background: var(--surface-raised); color: var(--muted); font-size: 12px; font-weight: 600;
  transition: transform .3s var(--ease-spring, ease), background-color .2s, border-color .2s, color .2s;
}
.profile-setup-chip .icon { width: 14px; height: 14px; flex: none; }
.profile-setup-chip .button-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-setup-avatar.is-empty { color: #86c5ff; }
.profile-setup-avatar.is-empty .icon { width: 30px; height: 30px; }
.profile-setup-chip:active { transform: scale(.94); }
.profile-setup-chip.is-active { color: #fff; border-color: #2a8cff; background: #1c5ea8; box-shadow: 0 4px 14px -8px var(--accent-glow, rgba(42, 140, 255, .55)); }
.profile-setup-custom, .profile-setup-url input {
  width: 100%; min-width: 0; min-height: 46px; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  outline: none; background: var(--surface-raised); color: var(--text); font: inherit; font-size: 14px;
}
.profile-setup-url { position: relative; display: block; }
.profile-setup-url input { padding-left: 42px; }
.profile-setup-url-icon { position: absolute; left: 13px; top: 50%; display: grid; transform: translateY(-50%); color: #86c5ff; pointer-events: none; }
.profile-setup-url-icon .icon { width: 18px; height: 18px; }
.profile-setup-custom:focus, .profile-setup-url input:focus { border-color: var(--accent); }
.profile-setup-add { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) {
  .profile-setup-platform, .profile-setup-face.is-popped .profile-setup-avatar { animation: none !important; }
}

/* Short offer form: chips, the own-price block, the brief card and the folded full form. */
.simple-offer-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.simple-offer-chips--2, .simple-offer-chips--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.simple-offer-chips .profile-setup-chip.is-locked { opacity: .5; }
.simple-offer-form .field-hint { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.simple-offer-own-budget { display: grid; gap: var(--space-sm); margin-top: var(--space-sm); }
.simple-offer-own-budget[hidden] { display: none; }
.simple-offer-own-budget .field { margin: 0; }
.surface-card.simple-offer-brief { display: grid; gap: var(--space-md); margin: var(--space-lg) 0 0; padding: var(--space-md); }
.simple-offer-brief-head { display: flex; align-items: flex-start; gap: var(--space-md); }
.simple-offer-brief-head > .icon { flex: none; width: 22px; height: 22px; color: #86c5ff; }
.simple-offer-brief .file-picker, .simple-offer-brief .field { margin: 0; }
.simple-offer-details { margin-top: var(--space-lg); }
.simple-offer-details > summary .agency-card-copy small { font-weight: 400; }
.simple-offer-details > .form-grid { padding: 0 var(--space-md) var(--space-md); }

/* Group send results keep the one-line row (team members use a two-line card). */
.surface-card.agency-member.offer-group-result { display: flex; align-items: center; gap: var(--space-md); }