/* AI Social Post Generator */
.sp-page { --sp-gold: #c9a45c; --sp-ink: #1d1d1f; max-width: 1600px; }

.sp-card { border: 1px solid #e6e6ea; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }

.sp-drop {
    border: 2px dashed #cfd2d8; border-radius: 10px; padding: .6rem 1rem; cursor: pointer;
    background: #fafafb; transition: border-color .15s, background .15s; margin: 0; min-height: 58px;
}
.sp-drop:hover, .sp-drop.dragover { border-color: var(--sp-gold); background: #fffaf0; }

.sp-status { background: #fffaf0; border: 1px solid #f1e3c3; border-radius: 8px; padding: .6rem .8rem; }

/* parameters */
.sp-param { background: #f7f7f9; border-radius: 8px; padding: .45rem .7rem; height: 100%; }
.sp-param .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; }
.sp-param .v { font-weight: 600; font-size: .92rem; word-break: break-word; }
.sp-param.missing .v { color: #adb5bd; font-weight: 400; font-style: italic; }
.sp-list h6 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; }
.sp-list ul { padding-left: 1.1rem; margin-bottom: 0; font-size: .88rem; }

/* post card */
.sp-post { overflow: hidden; }
.sp-ig-head { border-bottom: 1px solid #f0f0f2; }
.sp-avatar {
    width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px;
    background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7); padding: 2px; position: relative;
}
.sp-avatar::after {
    content: attr(data-initials); position: absolute; inset: 2px; border-radius: 50%; background: #fff;
    display: flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 700; color: var(--sp-ink);
}
.sp-cat { background: #fff4de; color: #8a6a1f; font-weight: 600; }

.sp-canvas-wrap { position: relative; background: #111; aspect-ratio: 4 / 5; }
.sp-canvas { width: 100%; height: 100%; display: block; }
.sp-busy {
    position: absolute; inset: 0; background: rgba(0,0,0,.55); color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; font-size: .9rem;
}
.sp-range .form-range { width: 90px; }
.sp-fit.active { background: var(--sp-ink); color: #fff; }
.sp-title-count.over { color: #dc3545; font-weight: 600; }

/* page picker */
.sp-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; }
.sp-thumb { border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: #f3f3f5; position: relative; }
.sp-thumb:hover { border-color: var(--sp-gold); }
.sp-thumb.current { border-color: #0d6efd; }
.sp-thumb img { width: 100%; display: block; aspect-ratio: 16 / 10; object-fit: contain; background: #fff; }
.sp-thumb span {
    position: absolute; left: 6px; top: 6px; background: rgba(0,0,0,.7); color: #fff;
    font-size: .72rem; padding: 1px 7px; border-radius: 10px;
}
.sp-thumb.suggested::after {
    content: "AI pick"; position: absolute; right: 6px; top: 6px; background: var(--sp-gold); color: #fff;
    font-size: .68rem; padding: 1px 7px; border-radius: 10px;
}

/* unit plans + saved banner path */
.sp-units { font-size: .88rem; max-width: 760px; }
.sp-units th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; font-weight: 600; }
.sp-saved .sp-path { font-size: .74rem; color: #495057; word-break: break-all; }
.sp-plan-post .sp-cat { background: #1d1d1f; color: #d8b46a; }

/* publish-safety checks */
.sp-check { margin-bottom: .2rem; }
.sp-check .badge { text-transform: uppercase; font-size: .62rem; }
.sp-check-error .badge { background: #dc3545; }
.sp-check-warning .badge { background: #f0ad4e; color: #1d1d1f; }
.sp-check-info .badge { background: #adb5bd; }
.sp-list ol { padding-left: 1.3rem; margin-bottom: 0; font-size: .88rem; }
.sp-key-usps li { margin-bottom: .2rem; }