/* Yatoon Social Feed v3 - Admin Styles */
.yatoon-sf-wrap { max-width:1500px; margin:24px 20px 60px 0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }

.yatoon-sf-header { background:linear-gradient(135deg,#f9a8d4 0%,#c084fc 50%,#818cf8 100%); border-radius:16px; padding:28px 32px; margin-bottom:24px; color:#fff; }
.yatoon-sf-header h1 { font-size:26px; font-weight:700; margin:0 0 6px; color:#fff; border:none; padding:0; display:flex; align-items:center; gap:10px; }
.yatoon-sf-logo { font-size:28px; }
.yatoon-sf-tagline { margin:0; opacity:.85; font-size:15px; }

.yatoon-sf-section { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:24px 28px; margin-bottom:20px; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.yatoon-sf-section-title { font-size:16px; font-weight:600; color:#1f2937; margin:0 0 16px; display:flex; align-items:center; gap:8px; border-bottom:1px solid #f3f4f6; padding-bottom:12px; }
.yatoon-sf-section-title .dashicons { color:#9333ea; }
.yatoon-sf-section-desc { color:#6b7280; font-size:13.5px; margin:-8px 0 16px; line-height:1.6; }

.yatoon-sf-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.yatoon-sf-fields-3 { grid-template-columns:1fr 1fr 1fr; }
.yatoon-sf-field label { display:block; font-weight:600; font-size:13px; color:#374151; margin-bottom:6px; }
.yatoon-sf-field input[type="text"],.yatoon-sf-field input[type="password"],.yatoon-sf-field select { border:1.5px solid #d1d5db; border-radius:8px; padding:8px 12px; font-size:14px; transition:border-color .2s; width:100%; box-sizing:border-box; }
.yatoon-sf-field input:focus,.yatoon-sf-field select:focus { border-color:#9333ea; outline:none; box-shadow:0 0 0 3px rgba(147,51,234,.1); }
.yatoon-sf-field input[type="number"].small-text { width:90px; }
.yatoon-sf-hint { display:block; font-size:12px; color:#9ca3af; margin-top:4px; }
.yatoon-sf-field-check label { display:flex; align-items:center; gap:8px; font-weight:400; font-size:14px; cursor:pointer; }

/* Token input */
.yatoon-sf-token-input-row { display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; margin-bottom:12px; }
.yatoon-sf-token-input { flex:1; min-width:280px; font-family:'Courier New',monospace !important; font-size:13px !important; }
.yatoon-sf-btn-verify { background:linear-gradient(135deg,#9333ea,#6366f1); color:#fff; border:none; padding:10px 20px; border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; white-space:nowrap; transition:opacity .15s; }
.yatoon-sf-btn-verify:hover { opacity:.88; }
.yatoon-sf-btn-verify.loading { opacity:.5; cursor:wait; }

.yatoon-sf-verify-result { padding:12px 16px; border-radius:8px; font-size:14px; font-weight:600; }
.yatoon-sf-verify-result.success { background:#f0fdf4; border:1px solid #86efac; color:#15803d; }
.yatoon-sf-verify-result.error   { background:#fef2f2; border:1px solid #fca5a5; color:#dc2626; }

/* Connected panel */
.yatoon-sf-connected-panel { display:flex; flex-direction:column; }
.yatoon-sf-platform-row { display:flex; gap:16px; align-items:flex-start; padding:16px 0; }
.yatoon-sf-divider { height:1px; background:#f3f4f6; }
.yatoon-sf-platform-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.yatoon-sf-platform-icon svg { width:24px; height:24px; }
.yatoon-sf-ig-icon { background:linear-gradient(135deg,#f9a8d4,#c084fc); color:#fff; }
.yatoon-sf-fb-icon { background:#1877f2; color:#fff; }
.yatoon-sf-platform-info { flex:1; }
.yatoon-sf-platform-info strong { display:block; font-size:15px; color:#111827; margin-bottom:6px; }
.yatoon-sf-badge-connected { display:inline-block; background:#16a34a; color:#fff; font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px; margin-bottom:4px; }
.yatoon-sf-badge-warn { display:inline-block; background:#f59e0b; color:#fff; font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px; margin-bottom:4px; }
.yatoon-sf-acct { font-size:13px; color:#374151; margin:4px 0 6px; }
.yatoon-sf-last { font-size:11px; color:#9ca3af; margin:0 0 8px; }
.yatoon-sf-warn-text { font-size:12px; color:#b45309; margin:4px 0 0; line-height:1.5; }
.yatoon-sf-sync-diagnostics { margin-top:12px; padding:10px 12px; border:1px solid #fecaca; background:#fef2f2; border-radius:8px; color:#991b1b; font-size:12px; line-height:1.5; }
.yatoon-sf-sync-diagnostics p { margin:0 0 6px; }
.yatoon-sf-sync-diagnostics p:last-child { margin-bottom:0; }

.yatoon-sf-health-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.yatoon-sf-health-card { border:1px solid #e5e7eb; border-radius:10px; padding:14px; background:#f8fafc; }
.yatoon-sf-health-card strong { display:block; font-size:13px; color:#111827; margin-bottom:6px; }
.yatoon-sf-health-card span { display:inline-block; font-size:12px; font-weight:700; border-radius:99px; padding:3px 8px; margin-bottom:8px; }
.yatoon-sf-health-card small { display:block; color:#6b7280; font-size:11px; line-height:1.45; }
.yatoon-sf-health-card.is-ok span { color:#166534; background:#dcfce7; }
.yatoon-sf-health-card.is-warn span { color:#92400e; background:#fef3c7; }

.yatoon-sf-advanced { margin-top:18px; border:1px solid #e5e7eb; border-radius:10px; background:#f9fafb; padding:0; }
.yatoon-sf-advanced > summary { cursor:pointer; padding:12px 14px; color:#374151; font-weight:700; font-size:13px; user-select:none; }
.yatoon-sf-advanced[open] { padding:0 14px 14px; }
.yatoon-sf-advanced[open] > summary { margin:0 -14px 14px; border-bottom:1px solid #e5e7eb; }

.yatoon-sf-btn { display:inline-block; padding:7px 14px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; border:none; transition:opacity .15s,transform .1s; line-height:1.5; text-decoration:none; }
.yatoon-sf-btn:hover { opacity:.85; transform:translateY(-1px); }
.yatoon-sf-btn-all { background:linear-gradient(135deg,#f9a8d4,#818cf8); color:#fff; }
.yatoon-sf-btn-disconnect { background:transparent; color:#ef4444 !important; font-size:12px; padding:6px 10px; text-decoration:underline !important; cursor:pointer; border:none; }

/* Preview */

.yatoon-sf-admin-live-preview {
    border:1px solid #e5e7eb;
    border-radius:10px;
    background:#fff;
    padding:16px;
    overflow:hidden;
}

.yatoon-sf-admin-live-preview .yatoon-sf-headers {
    margin-bottom:14px;
}

.yatoon-sf-admin-live-preview .yatoon-sf-header-card {
    box-shadow:none;
}

/* Shortcode */
.yatoon-sf-section-shortcode { background:#faf5ff; border-color:#e9d5ff; }
.yatoon-sf-shortcode-box { display:flex; align-items:center; gap:12px; background:#fff; border:1.5px solid #e9d5ff; border-radius:8px; padding:12px 16px; margin:8px 0; }
.yatoon-sf-shortcode-box code { font-size:14px; color:#7c3aed; font-family:'Courier New',monospace; flex:1; }
.yatoon-sf-copy-btn { background:#7c3aed; color:#fff; border:none; padding:6px 14px; border-radius:6px; font-size:12px; cursor:pointer; font-weight:600; }
.yatoon-sf-copy-btn:hover { background:#6d28d9; }

/* Guide */
.yatoon-sf-section-guide { background:#f8fafc; }
.yatoon-sf-guide-details { padding:0; overflow:hidden; }
.yatoon-sf-guide-details > summary { display:flex; align-items:center; gap:8px; cursor:pointer; padding:18px 22px; font-weight:700; color:#1f2937; }
.yatoon-sf-guide-details[open] { padding:0 24px 24px; }
.yatoon-sf-guide-details[open] > summary { margin:0 -24px 18px; border-bottom:1px solid #e5e7eb; }
.yatoon-sf-guide-details svg { width:18px; height:18px; }
.yatoon-sf-guide { padding-left:20px; margin:0; }
.yatoon-sf-guide li { margin-bottom:16px; font-size:14px; line-height:1.7; color:#374151; }
.yatoon-sf-guide li strong { color:#111827; }
.yatoon-sf-tip-box { background:#fef3c7; border:1px solid #fde68a; border-radius:8px; padding:12px 16px; font-size:13.5px; color:#92400e; margin-top:20px; }

/* Save bar */
.yatoon-sf-save-bar { position:sticky; bottom:0; background:rgba(255,255,255,.95); backdrop-filter:blur(8px); border-top:1px solid #e5e7eb; padding:16px 0; }

/* Toast */
.yatoon-sf-sync-status { position:fixed; bottom:32px; right:32px; background:#1f2937; color:#fff; padding:14px 20px; border-radius:10px; font-size:14px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.2); z-index:9999; animation:yatoonIn .3s ease; }
@keyframes yatoonIn { from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1} }

/* Header platform blocks in admin */
.yatoon-sf-header-platform-block { background:#f8fafc; border:1px solid #e5e7eb; border-radius:10px; padding:16px 20px; }
.yatoon-sf-platform-label { font-size:14px; font-weight:600; margin:0 0 14px; display:flex; align-items:center; gap:8px; }
.yatoon-sf-platform-label-fb { color:#1877f2; }
.yatoon-sf-platform-label-ig { color:#c084fc; }

/* Synced data preview */
.yatoon-sf-synced-preview { background:#f0fdf4; border:1px solid #86efac; border-radius:10px; padding:14px 18px; margin-top:16px; }
.yatoon-sf-synced-title { font-size:13px; color:#15803d; font-weight:600; margin:0 0 10px; }
.yatoon-sf-synced-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:13px; color:#374151; }
.yatoon-sf-synced-row:last-child { margin-bottom:0; }
.yatoon-sf-synced-platform { display:inline-block; font-size:10px; font-weight:700; color:#fff; padding:2px 6px; border-radius:4px; }
.yatoon-sf-synced-fb { background:#1877f2; }
.yatoon-sf-synced-ig { background:linear-gradient(135deg,#f9a8d4,#c084fc); }
.yatoon-sf-synced-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; }

/* Step 3: side-by-side controls + live preview */
.yatoon-sf-step3-columns { display:flex; gap:28px; align-items:flex-start; margin-top:8px; }
.yatoon-sf-step3-controls { flex:1 1 420px; max-width:600px; min-width:0; }
.yatoon-sf-step3-preview { flex:1 1 420px; min-width:0; }
.yatoon-sf-live-preview-sticky { position:sticky; top:32px; background:#f8fafc; border:1px solid #e5e7eb; border-radius:12px; padding:16px; }
.yatoon-sf-live-preview-title { display:flex; align-items:center; gap:6px; margin:0 0 4px; font-size:14px; }
.yatoon-sf-admin-live-preview { margin-top:10px; max-height:640px; overflow:auto; }
.yatoon-sf-admin-live-preview.is-loading { opacity:.5; transition:opacity .15s ease; }
.yatoon-sf-live-preview-loading { font-size:12px; color:#6b7280; margin-top:8px; text-align:center; }

/* Keep thumbnails at a legible minimum size no matter how many columns
   are configured. If columns * min-size doesn't fit the sidebar, the
   grid becomes wider than its container and scrolls horizontally
   instead of squashing every photo down to an unreadable sliver. */
.yatoon-sf-admin-live-preview .yatoon-sf-grid--grid {
    grid-template-columns: repeat(var(--yatoon-cols, 4), minmax(90px, 1fr));
}

/* Compact the profile header cards specifically when they render inside
   the live preview sidebar - the full-size version (56px avatar, big pill
   button) is designed for a full-width front-end feed, not a narrow
   admin panel next to a small thumbnail grid. */
.yatoon-sf-admin-live-preview .yatoon-sf-headers { gap:10px; margin-bottom:14px; }
.yatoon-sf-admin-live-preview .yatoon-sf-header-card { min-width:0; padding:10px 12px; border-radius:10px; gap:10px; }
.yatoon-sf-admin-live-preview .yatoon-sf-header-left { gap:10px; }
.yatoon-sf-admin-live-preview .yatoon-sf-header-avatar { width:36px; height:36px; }
.yatoon-sf-admin-live-preview .yatoon-sf-header-platform-icon { width:16px; height:16px; }
.yatoon-sf-admin-live-preview .yatoon-sf-header-platform-icon svg { width:8px; height:8px; }
.yatoon-sf-admin-live-preview .yatoon-sf-header-name { font-size:13px; }
.yatoon-sf-admin-live-preview .yatoon-sf-header-followers { font-size:11px; }
.yatoon-sf-admin-live-preview .yatoon-sf-header-bio { font-size:11px; }
.yatoon-sf-admin-live-preview .yatoon-sf-follow-btn { padding:5px 12px; font-size:11px; }

@media (max-width: 1200px) {
    .yatoon-sf-step3-columns { flex-direction:column; }
    .yatoon-sf-step3-controls { max-width:100%; }
    .yatoon-sf-step3-preview { flex-basis:auto; max-width:100%; width:100%; }
    .yatoon-sf-live-preview-sticky { position:static; }
}

@media (max-width: 782px) {
    .yatoon-sf-wrap { margin:16px 12px 60px 0; }
    .yatoon-sf-section { padding:20px; }
    .yatoon-sf-fields,
    .yatoon-sf-fields-3,
    .yatoon-sf-health-grid { grid-template-columns:1fr; }
    .yatoon-sf-token-input { min-width:100%; }
}
