/* Library layout follows the supplied Scenarios reference; the conversation tool keeps its compact layout. */
.workspace:has(.sl-library) { --text:#101828; --muted:#667085; --line:#e4e7ec; --blue:#0a6fb0; --blue-soft:#eef6fc; font-family:"Inbox Manrope",system-ui,sans-serif; background:#f4f5f7; color:#101828; }
.workspace:has(.sl-library) :is(button,input,select,textarea) { font-family:inherit; }
.main:has(.sl-library) > .topbar { height:68px; padding-inline:24px; background:#fff; border-color:#e4e7ec; }
.main:has(.sl-library) > .wrap { max-width:1600px; padding:22px 24px 28px; }
.sl-library { display:flex; flex-direction:column; gap:18px; min-width:0; container-type:inline-size; }
.sl-library .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:8px 14px; border:1px solid #d0d5dd; border-radius:10px; color:#344054; background:#fff; font-size:13px; font-weight:700; line-height:1.4; white-space:normal; box-shadow:none; }
.sl-library .btn:hover:not(:disabled) { border-color:#98a2b3; background:#f9fafb; }
.sl-library .btn.primary { background:#0a6fb0; border-color:#0a6fb0; color:#fff; }
.sl-library .btn.primary:hover:not(:disabled) { background:#075689; border-color:#075689; }
.sl-library button { cursor:pointer; }
.sl-library button:disabled { cursor:not-allowed; opacity:.5; }
.sl-library :is(button,a,input,select):focus-visible { outline:2px solid #0a6fb0; outline-offset:-2px; }
.sl-page-head { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.sl-page-head h1 { margin:6px 0 4px; font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.3; }
.sl-page-head p { margin:0; color:#475467; font-size:14px; line-height:1.6; }
.sl-eyebrow { color:#0a6fb0; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.sl-plus { font-size:21px; font-weight:500; line-height:1; }
.sl-filters { display:grid; grid-template-columns:minmax(200px,1.6fr) repeat(3,minmax(140px,1fr)) auto auto; align-items:end; gap:12px; padding:16px 20px; background:#fff; border:1px solid #e4e7ec; border-radius:16px; }
.sl-filters .f { min-width:0; margin:0; gap:6px; color:#667085; font-size:11px; font-weight:800; letter-spacing:.06em; }
.sl-filters .f > span:first-child { color:#667085; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.sl-filters input[type="search"],.sl-filters select,.sl-filters .select-trigger { width:100%; height:40px; min-height:40px; padding:0 12px; border:1px solid #d0d5dd; border-radius:10px; color:#101828; background:#fff; font-size:13px; font-weight:500; letter-spacing:0; box-shadow:none; }
.sl-filters .select-trigger { padding-right:34px; }
.sl-filters .select-control { min-width:0; max-width:100%; }
.sl-filters input::placeholder { color:#667085; }
.sl-search-field { display:block; position:relative; }
.sl-search-field svg { position:absolute; left:12px; top:12px; width:16px; height:16px; pointer-events:none; color:#667085; }
.sl-filters .sl-search-field input { padding-left:36px; }
.sl-favorite-filter { display:flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:8px 12px; border:1px solid #d0d5dd; border-radius:10px; color:#344054; font-size:13px; font-weight:600; cursor:pointer; }
.sl-favorite-filter input { width:16px; height:16px; flex:0 0 16px; margin:0; accent-color:#0a6fb0; }
.sl-favorite-filter svg { width:14px; height:14px; flex-shrink:0; }
.sl-favorite-filter:has(:checked) { color:#8a4b08; background:#fffaeb; border-color:#f5d9a8; }
.sl-library .sl-search-button { color:#fff; background:#101828; border-color:#101828; }
.sl-library .sl-search-button:hover:not(:disabled) { background:#344054; border-color:#344054; }
.sl-results-line { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; color:#475467; font-size:12px; }
.sl-results-line h2 { display:flex; align-items:center; gap:8px; margin:0; color:#101828; font-size:15px; font-weight:800; }
#sl-library-number { padding:2px 8px; border-radius:20px; color:#475467; background:#e4e7ec; font-size:12px; }
.sl-results-note { display:flex; align-items:center; gap:6px; }
.sl-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.sl-library-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:20px; }
.sl-card { display:flex; flex-direction:column; gap:14px; min-width:0; padding:20px; border:1px solid #e4e7ec; border-radius:16px; background:#fff; }
.sl-card.is-published { border-color:#b9daf0; }
.sl-card:hover { box-shadow:0 4px 16px #1018280f; }
.sl-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.sl-card-heading { min-width:0; }
.sl-card-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:6px; }
.sl-status { padding:3px 7px; border-radius:6px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.sl-status.is-draft { color:#8a4b08; background:#fef0c7; }
.sl-status.is-published { color:#067647; background:#dcfae6; }
.sl-account { color:var(--blue); font-size:10px; font-weight:650; letter-spacing:.09em; }
.sl-library .sl-account { display:flex; align-items:center; gap:6px; min-width:0; color:#475467; font-size:12px; font-weight:500; letter-spacing:0; overflow-wrap:anywhere; }
.sl-account-avatar { display:grid; place-items:center; width:18px; height:18px; flex:0 0 18px; border-radius:50%; color:#4b3ba8; background:#ece9fb; font-size:10px; font-weight:800; text-transform:uppercase; }
.sl-card h3 { margin:0; font-size:18px; font-weight:800; letter-spacing:-.01em; line-height:1.4; }
.sl-title-link { display:block; border:0; padding:0; background:none; text-align:left; font:inherit; color:inherit; overflow-wrap:anywhere; }
.sl-title-link:hover { color:#0a6fb0; }
.sl-star { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; border:1px solid #e4e7ec; border-radius:10px; background:#fff; color:#667085; }
.sl-star svg { width:16px; height:16px; }
.sl-star:hover { background:#f9fafb; border-color:#d0d5dd; }
.sl-star.on { color:#8a4b08; background:#fffaeb; border-color:#f5d9a8; }
.sl-star.on svg { fill:#fdb022; }
.sl-card-tags { display:flex; flex-wrap:wrap; gap:6px; }
.sl-card-tags > span { padding:3px 8px; border-radius:6px; color:#344054; background:#f2f4f7; font-size:11px; font-weight:600; overflow-wrap:anywhere; }
.sl-description { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#475467; font-size:13px; line-height:1.6; margin:0; overflow-wrap:anywhere; }
.sl-card-content { display:flex; flex:1; flex-direction:column; justify-content:center; gap:10px; min-height:120px; }
.sl-card-content.is-empty { align-items:center; gap:6px; padding:12px; border:1px dashed #d0d5dd; border-radius:12px; background:#fcfcfd; color:#475467; text-align:center; font-size:12px; }
.sl-empty-step-icon { display:grid; place-items:center; width:22px; height:22px; border:1.5px solid #98a2b3; border-radius:4px; color:#667085; font-size:20px; line-height:1; }
.sl-text-steps { align-self:flex-start; padding:10px 12px; border-radius:10px; background:#f2f4f7; color:#475467; font-size:12px; }
.sl-step-bar { display:flex; gap:3px; height:6px; }
.sl-step-bar span { flex:1; min-width:0; border-radius:3px; }
.sl-step-bar .is-free { background:#15b79e; }
.sl-step-bar .is-paid { background:#0a6fb0; }
.sl-step-summary { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 12px; font-size:12px; }
.sl-step-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 10px; color:#475467; font-size:12px; }
.sl-step-legend > span { display:inline-flex; align-items:center; gap:5px; }
.sl-step-legend > span::before { content:""; width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:#15b79e; }
.sl-step-legend .sl-paid::before { background:#0a6fb0; }
.sl-media-strip, .sl-selected-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.sl-media-strip .thumb, .sl-selected-strip .thumb { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 7px; overflow: hidden; border: 1px solid var(--line); padding: 0; }
.sl-media-strip .thumb img, .sl-selected-strip .thumb img { width: 100%; height: 100%; object-fit: cover; }
.sl-more-media { display: grid; place-items: center; width: 36px; height: 52px; color: var(--muted); font-weight: 600; font-size: 12px; }
.sl-library .sl-media-strip { gap:6px; }
.sl-library .sl-media-strip .thumb { width:56px; height:56px; flex-basis:56px; border-radius:10px; border:0; background:#f2f4f7; }
.sl-library .sl-more-media { width:56px; height:56px; border-radius:10px; background:#f2f4f7; color:#344054; font-size:13px; font-weight:700; }
.sl-card-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; }
.sl-card-metrics.has-commission { grid-template-columns:repeat(2,minmax(0,1fr)); }
.sl-card-metrics > div { display:flex; flex-direction:column; gap:2px; min-width:0; padding:10px 12px; border-radius:10px; background:#f9fafb; }
.sl-card-metrics dt { order:1; color:#667085; font-size:11px; font-weight:600; overflow-wrap:anywhere; }
.sl-card-metrics dd { margin:0; }
.sl-card-metrics b { display:block; color:#101828; font-size:clamp(14px,1.1vw,18px); font-weight:800; letter-spacing:-.01em; line-height:1.5; overflow-wrap:anywhere; }
.sl-card-actions { display:flex; flex-wrap:wrap; gap:8px; }
.sl-card-actions .btn { flex:1 1 115px; }
.sl-empty { grid-column: 1/-1; padding: 48px 20px; border: 1px dashed var(--line); background: #fff; border-radius: 10px; text-align: center; }
.sl-empty > span { font-size: 30px; }
.sl-empty p { color: var(--muted); font-size: 12px; }
@container (max-width:1150px) { .sl-filters { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@container (max-width:760px) { .sl-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@container (max-width:460px) {
  .sl-filters { grid-template-columns:minmax(0,1fr); padding:16px; }
  .sl-card { padding:16px; }
  .sl-card-metrics > div { padding:10px 8px; }
}
@media (max-width:760px) {
  .main:has(.sl-library) > .wrap { padding:16px 12px; }
  .main:has(.sl-library) > .topbar { padding-inline:16px; }
}
.sl-notice { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 15px; margin-bottom: 14px; border-radius: 8px; background: var(--blue-soft); font-size: 12px; }
.sl-modal { width: min(780px, calc(100vw - 32px)); max-width: 780px; }
.sl-dialog h2 { margin: 0 0 8px; }
.sl-dialog h2:focus { outline: none; }
.sl-dialog-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0; }
.sl-detail-description, .sl-caption { white-space: pre-wrap; overflow-wrap: anywhere; }
.sl-detail-description { font-size: 12px; color: var(--muted); }
.sl-steps, .sl-tool-steps { list-style: none; padding: 0; margin: 15px 0; }
.sl-step { display: flex; align-items: start; gap: 13px; border-top: 1px solid var(--line); padding: 18px 0; }
.sl-step-number { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; background: var(--blue-soft); color: var(--blue); border-radius: 50%; font-size: 12px; font-weight: 700; }
.sl-step-content { flex: 1; min-width: 0; }
.sl-step-heading { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sl-step-heading b { font-size: 12px; }
.sl-caption { font-size: 12px; line-height: 1.65; margin: 8px 0 10px; }
.sl-step-controls { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.sl-form { display: flex; flex-direction: column; gap: 14px; }
.sl-form textarea { resize: vertical; min-height: 75px; }
.sl-form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.sl-form .sl-dialog-toolbar { margin: 4px 0 0; }
.sl-price-help { margin: 0 0 5px; }
.sl-error, .sl-blocked { color: #a44e13; font-size: 12px; line-height: 1.6; }
.sl-error[hidden] { display: none; }
.sl-picker-heading { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 10px; }
.sl-picker-heading b { font-size: 12px; }
.sl-selected-strip .thumb { position: relative; }
.sl-selected-strip .thumb > span { position: absolute; inset: 0 0 auto auto; width: 19px; height: 19px; background: #183c56; color: white; }
.sl-picker-search { display: flex; gap: 10px; align-items: end; }
.sl-picker-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; padding: 2px; }
.sl-picker-item { min-width: 0; border: 1px solid var(--line); padding: 5px; border-radius: 7px; background: #fff; text-align: left; }
.sl-picker-item.selected { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 1px var(--blue); }
.sl-picker-item:disabled { opacity: .45; cursor: not-allowed; }
.sl-picker-item .thumb { display: block; width: 100%; aspect-ratio: 1; border: none; margin-bottom: 5px; padding: 0; }
.sl-picker-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.sl-picker-item b, .sl-picker-item > span:last-child { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.sl-picker-item > span:last-child { color: var(--muted); }
.sl-tool { margin: 14px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sl-tool-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sl-tool-heading > b { font-size: 13px; }
.sl-tool > p { line-height: 1.6; }
.sl-tool-story { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-top: 8px; }
.sl-tool-story > summary { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; gap: 8px; background: #f7fbfe; cursor: pointer; list-style: none; }
.sl-tool-story > summary::-webkit-details-marker { display: none; }
.sl-tool-story > summary b { font-size: 12px; }
.sl-tool-story > summary small { display: block; margin-top: 4px; font-size: 10px; color: var(--muted); }
.sl-tool-steps { margin: 0; }
.sl-tool-step { padding: 13px 12px; border-top: 1px solid var(--line); }
.sl-tool-step.is-next { background: #f3faff; border-left: 3px solid #229ed9; padding-left: 9px; }
.sl-tool-step .sl-media-strip .thumb { width: 38px; height: 38px; flex-basis: 38px; }
.sl-tool-step > button { margin-top: 10px; }
.sl-progress { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.sl-sent-by { font-size: 9px; color: var(--muted); }
.sl-status-paid { color: #176644; background: #dff4e9; }
.sl-status-sent { color: #166297; background: #e2f1fd; }
.sl-status-sending, .sl-status-uncertain, .sl-status-refunded { color: #835400; background: #fff0d7; }
.sl-send-preview { display: flex; flex-direction: column; align-items: start; gap: 12px; padding: 14px; margin: 15px 0; border-radius: 8px; background: #f3f9fe; border: 1px solid var(--line); }
#sl-tool-error { font-size: 11px; color: #a44e13; line-height: 1.6; }
@media (max-width: 650px) {
  .sl-page-head { align-items: start; flex-direction: column; gap: 12px; }
  .sl-results-line { align-items:flex-start; flex-direction:column; gap:8px; }
  .sl-form-pair { grid-template-columns: 1fr; }
  .sl-picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sl-dialog-toolbar .btn { white-space: normal; }
  .sl-picker-heading { align-items: start; flex-wrap: wrap; }
  .sl-card { padding: 16px; }
}

.sl-quick { margin:0 0 18px; padding:14px; background:#f5f8fc; border:1px solid #dae5ef; border-radius:12px; }
.sl-quick-use { width:100%; justify-content:center; }
.sl-quick select { width:100%; }
.sl-quick .sl-tool-heading { margin-bottom:12px; }