:root {
  --sf-ink: #1f1d1a;
  --sf-muted: #756c62;
  --sf-paper: #f7f3ec;
  --sf-surface: #fffdf9;
  --sf-line: rgba(47, 38, 27, .14);
  --sf-coral: #e45e45;
  --sf-orange: #f0a24a;
  --sf-green: #28735d;
  --sf-violet: #6553a6;
  --sf-shadow: 0 22px 60px rgba(70, 46, 27, .12);
  --sf-radius: 22px;
}

.social-factory-page[hidden] { display: none !important; }
.social-factory-page { min-height: 100vh; padding: 0 0 70px; background: var(--sf-paper); color: var(--sf-ink); }
.social-factory-shell { width: min(1440px, calc(100% - 30px)); margin: 0 auto; }
.social-factory-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: clamp(28px, 5vw, 64px) 0 24px; border-bottom: 1px solid var(--sf-line); }
.social-factory-eyebrow { margin: 0 0 10px; color: var(--sf-coral); font: 950 .7rem/1 system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.social-factory-head h1 { max-width: 780px; margin: 0; color: var(--sf-ink); font: 950 clamp(2.35rem, 6vw, 5.8rem)/.88 Georgia, serif; letter-spacing: -.065em; }
.social-factory-lead { max-width: 620px; margin: 16px 0 0; color: var(--sf-muted); font-size: clamp(.92rem, 1.5vw, 1.08rem); line-height: 1.5; }
.social-factory-back { flex: 0 0 auto; min-height: 46px; padding: 0 15px; border: 1px solid var(--sf-line); border-radius: 11px; background: transparent; color: var(--sf-ink); font: 850 .76rem/1 system-ui, sans-serif; cursor: pointer; }
.social-factory-back:hover { background: var(--sf-ink); color: #fff; }
.social-factory-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 20px 0 10px; }
.social-factory-kpi { display: grid; gap: 5px; min-height: 92px; padding: 15px; border: 1px solid var(--sf-line); border-radius: 16px; background: var(--sf-surface); box-shadow: 0 9px 25px rgba(70, 46, 27, .05); }
.social-factory-kpi strong { color: var(--sf-ink); font: 950 1.7rem/.9 Georgia, serif; }
.social-factory-kpi span { color: var(--sf-muted); font-size: .7rem; font-weight: 800; line-height: 1.25; }
.social-factory-kpi.is-live { border-color: rgba(228, 94, 69, .35); background: #fff3ed; }
.social-factory-kpi.is-live strong { color: var(--sf-coral); }
.social-factory-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; }
.social-factory-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.social-factory-tab, .social-factory-select { min-height: 42px; border: 1px solid var(--sf-line); border-radius: 10px; background: var(--sf-surface); color: var(--sf-ink); font: 850 .73rem/1 system-ui, sans-serif; cursor: pointer; }
.social-factory-tab { padding: 0 13px; }
.social-factory-tab.is-active { border-color: var(--sf-ink); background: var(--sf-ink); color: #fff; }
.social-factory-select { min-width: 190px; padding: 0 10px; }
.social-factory-status { min-height: 22px; margin: 0 0 10px; color: var(--sf-green); font-size: .78rem; font-weight: 800; }
.social-factory-status[data-state="error"] { color: #a23e32; }
.social-factory-workspace { display: grid; grid-template-columns: minmax(245px, .66fr) minmax(0, 2fr); gap: 15px; align-items: start; }
.social-factory-library, .social-factory-main { min-width: 0; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); background: rgba(255, 253, 249, .88); box-shadow: var(--sf-shadow); }
.social-factory-library { padding: 15px; }
.social-factory-library-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 12px; }
.social-factory-library h2, .social-factory-main h2 { margin: 0; font: 900 1.18rem/1.05 Georgia, serif; }
.social-factory-library-count { color: var(--sf-muted); font-size: .68rem; font-weight: 850; }
.social-factory-pack-list { display: grid; gap: 8px; }
.social-factory-pack { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 11px; width: 100%; padding: 13px; border: 1px solid transparent; border-radius: 14px; background: #f0ece4; color: var(--sf-ink); text-align: left; cursor: pointer; }
.social-factory-pack:hover, .social-factory-pack.is-active { border-color: var(--sf-orange); background: #fff5e6; transform: translateY(-1px); }
.social-factory-pack-bar { width: 8px; min-height: 43px; border-radius: 8px; background: var(--sf-coral); }
.social-factory-pack[data-tone="violet"] .social-factory-pack-bar { background: var(--sf-violet); }
.social-factory-pack[data-tone="green"] .social-factory-pack-bar { background: var(--sf-green); }
.social-factory-pack[data-tone="orange"] .social-factory-pack-bar { background: var(--sf-orange); }
.social-factory-pack strong { display: block; font: 900 .92rem/1.08 Georgia, serif; }
.social-factory-pack small { display: block; margin-top: 5px; color: var(--sf-muted); font-size: .68rem; line-height: 1.3; }
.social-factory-pack-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; color: var(--sf-muted); font-size: .61rem; font-weight: 850; }
.social-factory-pack-meta span { padding: 4px 6px; border-radius: 999px; background: rgba(255,255,255,.75); }
.social-factory-calendar { padding: clamp(18px, 3vw, 30px); }
.social-factory-calendar-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; margin-bottom: 20px; }
.social-factory-calendar-head p, .social-factory-package-head p { margin: 8px 0 0; color: var(--sf-muted); font-size: .8rem; line-height: 1.45; }
.social-factory-calendar-head > span { padding: 8px 10px; border-radius: 999px; background: #e9f3ed; color: var(--sf-green); font-size: .65rem; font-weight: 900; white-space: nowrap; }
.social-factory-content-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 14px; }
.social-factory-day-list { display: grid; gap: 8px; }
.social-factory-day { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px; border: 1px solid var(--sf-line); border-radius: 14px; background: var(--sf-surface); cursor: pointer; text-align: left; }
.social-factory-day:hover, .social-factory-day.is-selected { border-color: var(--sf-coral); box-shadow: 0 8px 20px rgba(228,94,69,.1); }
.social-factory-day-date { color: var(--sf-coral); font: 950 .68rem/1.05 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.social-factory-day strong { display: block; font: 900 .95rem/1.1 Georgia, serif; }
.social-factory-day small { display: block; margin-top: 4px; color: var(--sf-muted); font-size: .68rem; line-height: 1.3; }
.social-factory-day-kind { padding: 6px 7px; border-radius: 6px; background: #f5eee2; color: var(--sf-muted); font-size: .59rem; font-weight: 900; }
.social-factory-how { display: grid; gap: 11px; align-content: start; padding: 18px; border-radius: 16px; background: #22201d; color: #fffaf3; }
.social-factory-how h3 { margin: 0; font: 900 1.25rem/1.02 Georgia, serif; }
.social-factory-how p { margin: 0; color: rgba(255,250,243,.72); font-size: .75rem; line-height: 1.45; }
.social-factory-how-list { display: grid; gap: 7px; margin: 2px 0 0; padding: 0; list-style: none; }
.social-factory-how-list li { display: flex; gap: 8px; align-items: baseline; color: rgba(255,250,243,.84); font-size: .7rem; line-height: 1.35; }
.social-factory-how-list b { color: var(--sf-orange); }
.social-factory-package { display: grid; grid-template-columns: minmax(0, .86fr) minmax(290px, 1.14fr); gap: 22px; padding: clamp(18px, 3vw, 30px); }
.social-factory-package-head { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; }
.social-factory-package-label { margin: 0 0 8px; color: var(--sf-coral); font: 950 .65rem/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.social-factory-package-title { margin: 0; font: 950 clamp(1.8rem, 4vw, 3.4rem)/.93 Georgia, serif; letter-spacing: -.045em; }
.social-factory-package-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.social-factory-button { min-height: 42px; padding: 0 12px; border: 1px solid var(--sf-line); border-radius: 9px; background: transparent; color: var(--sf-ink); font: 850 .7rem/1 system-ui, sans-serif; cursor: pointer; }
.social-factory-button:hover { background: #f4eee4; }
.social-factory-button-primary { border-color: var(--sf-coral); background: var(--sf-coral); color: #fff; }
.social-factory-button-primary:hover { background: #c94835; }
.social-factory-button.is-done { border-color: var(--sf-green); background: #e2f1e9; color: var(--sf-green); }
.social-factory-preview-wrap { display: grid; gap: 10px; align-content: start; }
.social-factory-preview { position: relative; aspect-ratio: 9 / 13.7; min-height: 390px; overflow: hidden; border-radius: 20px; background: #26232a center / cover no-repeat; box-shadow: 0 22px 48px rgba(48,26,33,.24); isolation: isolate; transition: background-image .3s ease, transform .3s ease; }
.social-factory-preview:hover { transform: translateY(-2px); }
.social-factory-preview::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(9,13,19,.66) 0%, rgba(9,13,19,.05) 32%, rgba(9,13,19,.5) 70%, rgba(9,13,19,.94) 100%); }
.social-factory-preview::after { content: ''; position: absolute; inset: auto 0 0; z-index: 0; height: 44%; background: linear-gradient(180deg, transparent, rgba(9,13,19,.86)); pointer-events: none; }
.social-factory-preview-top, .social-factory-preview-bottom { position: absolute; left: 18px; right: 18px; z-index: 1; }
.social-factory-preview-top { top: 17px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: rgba(255,255,255,.86); font: 850 .59rem/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
/* L'indirizzo del sito è un vero collegamento, anche nell'anteprima. */
.social-factory-preview-link { display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border: 1px solid rgba(226,181,107,.75); border-radius: 999px; background: rgba(9,13,19,.5); color: #fff8ec; font: 850 .62rem/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: none; text-decoration: none; }
.social-factory-preview-link:hover { background: rgba(226,181,107,.22); }
.social-factory-preview-link:focus-visible { outline: 3px solid rgba(226,181,107,.5); outline-offset: 2px; }
.social-factory-preview-credit { margin: 0; color: var(--sf-muted); font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-align: center; }
.social-factory-preview-credit:empty { display: none; }
/* Comando che porta al sito: stessa forma degli altri, ma è un collegamento. */
.social-factory-button-site { display: inline-flex; align-items: center; justify-content: center; border-color: rgba(226,181,107,.85); background: rgba(226,181,107,.16); color: #7a4f13; font-weight: 900; text-decoration: none; }
.social-factory-button-site:hover { background: rgba(226,181,107,.28); }
.social-factory-preview-bottom { bottom: 20px; }
.social-factory-preview-bottom small { display: block; margin-bottom: 9px; color: rgba(255,255,255,.75); font: 850 .62rem/1 system-ui, sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.social-factory-preview-bottom strong { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 14ch; color: #fff; font: 950 clamp(1.45rem, 4.2vw, 2.7rem)/.9 Georgia, serif; letter-spacing: -.045em; }
.social-factory-preview-bottom .social-factory-preview-hook { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 13px; padding: 10px 12px; border-radius: 12px; background: rgba(9,13,19,.52); color: rgba(255,255,255,.9); font-size: .7rem; font-weight: 750; line-height: 1.4; }
.social-factory-video-preview { display: block; width: min(100%, 380px); max-height: 560px; margin: 0 auto; border-radius: 18px; background: #201c22; box-shadow: 0 14px 30px rgba(48,26,33,.18); object-fit: contain; }
.social-factory-video-status { min-height: 18px; margin: 0; color: var(--sf-green); font-size: .68rem; font-weight: 850; text-align: center; }
.social-factory-preview-music { min-height: 18px; margin: 0; color: var(--sf-muted); font-size: .66rem; font-weight: 800; text-align: center; }
.social-factory-preview-caption { color: var(--sf-muted); font-size: .66rem; font-weight: 800; text-align: center; }
.social-factory-brief { display: grid; gap: 13px; align-content: start; }
.social-factory-brief-block { display: grid; gap: 7px; padding-bottom: 13px; border-bottom: 1px solid var(--sf-line); }
.social-factory-brief-block h3 { margin: 0; color: var(--sf-muted); font: 900 .65rem/1 system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.social-factory-brief-block p { margin: 0; color: var(--sf-ink); font-size: .83rem; line-height: 1.5; }
.social-factory-caption { padding: 11px 12px; border-radius: 10px; background: #f4efe6; font-size: .78rem !important; white-space: pre-line; }
.social-factory-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.social-factory-tags span { padding: 6px 8px; border-radius: 999px; background: #f1e4d3; color: #805129; font-size: .66rem; font-weight: 850; }
.social-factory-checklist { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.social-factory-checklist li { display: flex; gap: 8px; align-items: center; color: var(--sf-muted); font-size: .72rem; }
.social-factory-checklist li::before { content: 'OK'; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #e2f1e9; color: var(--sf-green); font-size: .48rem; letter-spacing: .02em; font-weight: 950; }
.social-factory-empty { padding: 32px 10px; color: var(--sf-muted); text-align: center; font-size: .82rem; }
.social-factory-page button:focus-visible, .social-factory-page select:focus-visible { outline: 3px solid rgba(228,94,69,.28); outline-offset: 3px; }
@media (max-width: 900px) { .social-factory-workspace { grid-template-columns: 1fr; } .social-factory-pack-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .social-factory-content-grid { grid-template-columns: 1fr; } .social-factory-how { min-height: auto; } }
@media (max-width: 680px) { .social-factory-shell { width: min(100% - 18px, 600px); } .social-factory-head { align-items: flex-start; padding-top: 24px; } .social-factory-head h1 { font-size: clamp(2.45rem, 14vw, 4.5rem); } .social-factory-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .social-factory-toolbar { display: grid; } .social-factory-select { width: 100%; } .social-factory-pack-list { grid-template-columns: 1fr; } .social-factory-package { grid-template-columns: 1fr; } .social-factory-package-head { display: grid; } .social-factory-package-actions { justify-content: flex-start; } .social-factory-preview { min-height: 440px; max-width: 330px; width: 100%; margin: 0 auto; } }
@media (max-width: 430px) { .social-factory-day { grid-template-columns: 48px minmax(0, 1fr); } .social-factory-day-kind { display: none; } .social-factory-kpi strong { font-size: 1.45rem; } }

/* ── Il mese pronto: un solo pacchetto per trenta giorni ─────────────────── */
.social-factory-month { display: grid; gap: 16px; margin-top: 18px; padding: clamp(18px, 3vw, 26px); border: 1px solid rgba(228, 94, 69, .3); border-radius: 18px; background: linear-gradient(180deg, #fff6f0, #fffdf9 62%); }
.social-factory-month-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.social-factory-month-eyebrow { margin: 0 0 8px; color: var(--sf-coral); font: 950 .64rem/1 system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.social-factory-month h3 { margin: 0; font: 950 clamp(1.35rem, 2.6vw, 2.1rem)/1 Georgia, serif; letter-spacing: -.04em; }
.social-factory-month-lead { max-width: 62ch; margin: 9px 0 0; color: var(--sf-muted); font-size: .8rem; line-height: 1.5; }
.social-factory-month-badge { flex: 0 0 auto; padding: 8px 11px; border-radius: 999px; background: #fdece5; color: #a8412c; font-size: .66rem; font-weight: 950; white-space: nowrap; }
.social-factory-month-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.social-factory-month-stat { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--sf-line); border-radius: 13px; background: var(--sf-surface); }
.social-factory-month-stat strong { color: var(--sf-ink); font: 950 1.45rem/.9 Georgia, serif; }
.social-factory-month-stat span { color: var(--sf-muted); font-size: .66rem; font-weight: 800; line-height: 1.3; }
.social-factory-month .social-factory-button { min-height: 46px; padding: 0 15px; font-size: .74rem; }
.social-factory-month .social-factory-button:disabled { cursor: progress; opacity: .55; }
.social-factory-month-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.social-factory-button-stop { border-color: rgba(162, 62, 50, .5); background: #fdeceb; color: #a23e32; font-weight: 900; }
.social-factory-button-stop:hover { background: #f9dcd9; }
.social-factory-month-progress { display: grid; gap: 9px; }
.social-factory-month-bar { height: 8px; overflow: hidden; border-radius: 999px; background: #f0e6dc; }
.social-factory-month-bar span { display: block; width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--sf-orange), var(--sf-coral)); transition: width .3s ease; }
.social-factory-month-note { min-height: 20px; margin: 0; color: var(--sf-green); font-size: .76rem; font-weight: 850; }
.social-factory-month-note[data-state="error"] { color: #a23e32; }
.social-factory-month-wait { margin: 0; color: var(--sf-muted); font-size: .72rem; font-weight: 750; }
.social-factory-month-wait:empty { display: none; }
.social-factory-month-hint { margin: 0; color: var(--sf-muted); font-size: .7rem; line-height: 1.45; }
@media (max-width: 680px) { .social-factory-month-head { display: grid; } .social-factory-month-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .social-factory-month-actions { display: grid; } }

/* ── Catalogo completo dei Reel ─────────────────────────────────────────── */
.social-reels-library-panel[hidden] { display: none !important; }
.social-reels-library-panel { padding: clamp(18px, 3vw, 32px); }
.social-reels-library-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.social-reels-library-head h2 { margin: 0; color: var(--sf-ink); font: 950 clamp(1.8rem, 4vw, 3.8rem)/.92 Georgia, serif; letter-spacing: -.05em; }
.social-reels-library-head p:not(.social-factory-package-label) { max-width: 62ch; margin: 10px 0 0; color: var(--sf-muted); font-size: .84rem; line-height: 1.5; }
.social-reels-style-legend { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.social-reels-style-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid currentColor; border-radius: 999px; font-size: .62rem; font-weight: 950; letter-spacing: .09em; }
.social-reels-style-chip--cinematic { color: #9b641e; background: #fff4dc; }
.social-reels-library-count { flex: 0 0 auto; padding: 9px 12px; border-radius: 999px; background: #e9f3ed; color: var(--sf-green); font-size: .72rem; font-weight: 900; }
.social-reels-library-tools { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 10px; margin-bottom: 12px; }
.social-reels-library-tools label { display: grid; gap: 6px; color: var(--sf-muted); font-size: .67rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.social-reels-library-tools input, .social-reels-library-tools select { width: 100%; min-height: 46px; min-width: 0; padding: 0 12px; border: 1px solid var(--sf-line); border-radius: 11px; background: var(--sf-surface); color: var(--sf-ink); font: 650 .86rem/1 system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
.social-reels-library-tools input:focus-visible, .social-reels-library-tools select:focus-visible { outline: 3px solid rgba(228,94,69,.25); outline-offset: 2px; border-color: var(--sf-coral); }
.social-reels-library-actions-top { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.social-reels-library-actions-top .social-factory-button { min-height: 45px; }
.social-reels-library-progress { display: grid; gap: 6px; min-height: 28px; margin-bottom: 16px; }
.social-reels-library-progress-bar { height: 7px; overflow: hidden; border-radius: 999px; background: #f0e6dc; }
.social-reels-library-progress-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sf-orange), var(--sf-coral)); transition: width .25s ease; }
.social-reels-library-progress p { min-height: 18px; margin: 0; color: var(--sf-green); font-size: .74rem; font-weight: 800; }
.social-reels-library-progress p[data-state="error"] { color: #a23e32; }
.social-reels-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.social-reels-library-card { min-width: 0; overflow: hidden; border: 1px solid var(--sf-line); border-radius: 17px; background: var(--sf-surface); box-shadow: 0 12px 28px rgba(70,46,27,.08); transition: transform .2s ease, box-shadow .2s ease; }
.social-reels-library-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(70,46,27,.14); }
.social-reels-library-visual { position: relative; aspect-ratio: 9 / 10; overflow: hidden; background: var(--sf-ink); isolation: isolate; }
.social-reels-library-visual::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.08), transparent 45%, rgba(0,0,0,.7)); pointer-events: none; }
.social-reels-library-visual img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease, filter .35s ease; }
.social-reels-library-card:hover .social-reels-library-visual img { transform: scale(1.06); filter: saturate(1.12) contrast(1.04); }
.social-reels-library-card--cinematic .social-reels-library-visual img { filter: saturate(.88) contrast(1.14) sepia(.08); }
.social-reels-library-card--cinematic .social-reels-library-visual::before { content: ''; position: absolute; inset: 14px; z-index: 2; border-top: 2px solid rgba(226,181,107,.82); border-bottom: 2px solid rgba(226,181,107,.44); pointer-events: none; }
.social-reels-library-visual.is-fallback { background: linear-gradient(135deg, #18243d, #c55d51 56%, #e1b56b); }
.social-reels-library-variant, .social-reels-library-index { position: absolute; z-index: 2; top: 12px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(10,13,18,.58); color: #fff; font-size: .6rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.social-reels-library-variant { left: 12px; }
.social-reels-library-index { right: 12px; color: #ffe2a8; }
.social-reels-library-card-body { display: grid; gap: 8px; padding: 14px; }
.social-reels-library-meta { margin: 0; color: var(--sf-coral); font-size: .62rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.social-reels-library-card h3 { margin: 0; color: var(--sf-ink); font: 950 clamp(1.1rem, 2vw, 1.45rem)/.98 Georgia, serif; letter-spacing: -.03em; }
.social-reels-library-where { margin: 0; color: var(--sf-muted); font-size: .7rem; font-weight: 850; }
.social-reels-library-story { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: 3.9em; margin: 0; color: var(--sf-ink); font-size: .76rem; line-height: 1.4; }
.social-reels-library-card h4 { margin: 4px 0 0; color: var(--sf-muted); font-size: .62rem; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.social-reels-library-caption { max-height: 150px; overflow: auto; margin: 0; padding: 10px; border-radius: 10px; background: #f4efe6; color: var(--sf-ink); font-size: .72rem; line-height: 1.42; white-space: pre-line; }
.social-reels-library-caption:focus-visible { outline: 3px solid rgba(228,94,69,.25); outline-offset: 2px; }
.social-reels-library-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.social-reels-library-actions .social-factory-button { flex: 1 1 96px; min-height: 40px; padding: 0 8px; font-size: .63rem; }
.social-reels-library-actions .social-factory-button:disabled, .social-reels-library-actions-top .social-factory-button:disabled { cursor: progress; opacity: .52; }
.social-reels-library-empty { grid-column: 1 / -1; margin: 0; padding: 42px 12px; border: 1px dashed var(--sf-line); border-radius: 14px; color: var(--sf-muted); text-align: center; }
@media (max-width: 1040px) { .social-reels-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .social-reels-library-head { display: grid; align-items: start; } .social-reels-library-tools { grid-template-columns: 1fr; } .social-reels-library-grid { grid-template-columns: 1fr; } .social-reels-library-card { display: grid; grid-template-columns: minmax(120px, .43fr) minmax(0, 1fr); } .social-reels-library-visual { aspect-ratio: auto; min-height: 100%; } .social-reels-library-card-body { padding: 12px; } .social-reels-library-story { -webkit-line-clamp: 2; min-height: 2.8em; } .social-reels-library-caption { max-height: 118px; } .social-reels-library-actions .social-factory-button { flex-basis: 100%; } }
@media (max-width: 430px) { .social-reels-library-card { display: block; } .social-reels-library-visual { aspect-ratio: 9 / 8; } .social-reels-library-actions .social-factory-button { flex-basis: 96px; } }