.social-shell { position:relative; display:flex; flex-direction:column; gap:0; padding:22px; overflow:hidden; border:1px solid var(--border); border-radius:8px; background:linear-gradient(145deg,rgba(37,99,235,.13),rgba(168,85,247,.09) 36%,rgba(16,185,129,.07) 70%,var(--glass) 100%); box-shadow:0 24px 70px rgba(0,0,0,.22); animation:social-enter .4s cubic-bezier(.2,.8,.2,1) both; }
.social-shell::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,#38bdf8,#8b5cf6,#ec4899,#22c55e); background-size:220% 100%; animation:social-spectrum 6s linear infinite; }
.social-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 8px 0 24px; border-bottom: 1px solid var(--border); }
.social-header h1 { font-size: 40px; line-height: 1; margin: 5px 0 8px; letter-spacing: 0; }
.social-header p, .social-band-heading p { color: var(--muted); font-size: 13px; line-height: 1.5; }
.social-eyebrow { color: var(--accent); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .11em; }
.social-summary { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.social-summary-item { min-width: 78px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--glass); }
.social-summary-item strong { display: block; font-size: 18px; }
.social-summary-item span { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.social-account-band, .social-queue-band { padding:24px 0; border-bottom:1px solid var(--border); }
.social-band-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.social-band-heading h2 { font-size: 16px; margin-bottom: 3px; }
.social-accounts { display: flex; flex-wrap: wrap; gap: 8px; }
.social-account { display:flex; align-items:center; gap:10px; min-width:280px; padding:11px 12px; border:1px solid transparent; border-radius:8px; background:linear-gradient(var(--glass-strong),var(--glass-strong)) padding-box,linear-gradient(135deg,rgba(56,189,248,.7),rgba(139,92,246,.5),rgba(236,72,153,.35)) border-box; box-shadow:0 9px 24px rgba(0,0,0,.12); transition:transform .22s ease,box-shadow .22s ease; }
.social-account:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(56,189,248,.12); }
.social-platform-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: white; font-size: 13px; font-weight: 900; flex: 0 0 auto; }
.social-account-copy { min-width: 0; flex: 1; }
.social-account-copy strong, .social-account-copy span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.social-account-copy span { color: var(--muted); font-size: 11px; }
.social-account-actions { display:flex; gap:2px; }
.social-account .icon-btn { opacity:.65; transition:opacity .16s ease,transform .16s ease,background .16s ease; }
.social-account:hover .icon-btn { opacity: 1; }
.social-account .icon-btn:hover { transform:scale(1.08); }
.social-live-dot { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:var(--danger); box-shadow:0 0 0 3px rgba(248,113,113,.12); }
.social-live-dot.online { background:var(--ok); box-shadow:0 0 0 3px var(--ok-dim),0 0 10px rgba(52,211,153,.4); animation:social-pulse 2s ease-in-out infinite; }
.social-empty { color: var(--muted); padding: 22px 0; font-size: 13px; }
.social-account-form { margin-top: 14px; padding: 14px; display: grid; grid-template-columns: 180px minmax(160px, 1fr); gap: 10px; border: 1px solid var(--border-bright); border-radius: 8px; background: var(--glass); }
.social-account-form[hidden] { display: none; }
.social-credential-fields { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.social-account-form input, .social-account-form select, .social-plan-panel input, .social-plan-panel textarea { width: 100%; border: 1px solid var(--border); border-radius: 7px; background: rgba(0,0,0,.16); color: var(--text); padding: 10px 11px; font: inherit; }
html[data-theme="light"] .social-account-form input, html[data-theme="light"] .social-account-form select, html[data-theme="light"] .social-plan-panel input, html[data-theme="light"] .social-plan-panel textarea { background: #fff; }
.social-platform-hint { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.social-form-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.social-builder { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; padding: 24px 0; border-bottom: 1px solid var(--border); align-items: start; }
.social-builder-main { min-width:0; padding:18px; border:1px solid var(--border); border-radius:8px; background:linear-gradient(145deg,rgba(14,165,233,.07),rgba(139,92,246,.06),rgba(0,0,0,.08)); }
.social-media-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.social-upload-btn { cursor: pointer; }
.social-media-grid, .social-vault-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 9px; }
.social-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 2px solid transparent; border-radius: 8px; background: #11131a; padding: 0; cursor: pointer; color: white; animation: social-media-in .25s ease-out both; }
.social-media img, .social-media video { width: 100%; height: 100%; display: block; object-fit: cover; }
.social-media::after { content: ""; position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(transparent, rgba(0,0,0,.68)); pointer-events: none; }
.social-media { transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,border-color .2s ease; }
.social-media:hover { transform:translateY(-4px) scale(1.015); box-shadow:0 16px 30px rgba(0,0,0,.3); }
.social-media.selected { border-color:var(--ok); box-shadow:0 0 0 2px var(--ok-dim),0 14px 28px rgba(16,185,129,.13); }
.social-media-order { position: absolute; z-index: 2; top: 7px; left: 7px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--ok); color: #052e20; font-size: 11px; font-weight: 900; transform: scale(0); transition: transform .18s ease; }
.social-media.selected .social-media-order { transform: scale(1); }
.social-media-kind { position: absolute; z-index: 2; right: 7px; bottom: 7px; font-size: 11px; font-weight: 700; }
.social-plan-panel { position:sticky; top:20px; display:flex; flex-direction:column; gap:10px; padding:18px; border:1px solid var(--border); border-radius:8px; background:linear-gradient(155deg,rgba(139,92,246,.13),rgba(236,72,153,.07),var(--glass)); box-shadow:0 18px 44px rgba(0,0,0,.16); }
.social-plan-panel label { color: var(--muted); font-size: 11px; font-weight: 700; }
.social-plan-count { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.social-plan-count strong { font-size: 34px; color: var(--accent); }
.social-plan-count span { font-size: 12px; color: var(--muted); }
.social-account-checks { display: flex; flex-direction: column; gap: 6px; }
.social-account-check { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid var(--border); border-radius: 7px; font-size: 12px; cursor: pointer; }
.social-account-check input { width: auto; accent-color: var(--accent); }
.social-account-check.disabled { opacity:.5; cursor:not-allowed; }
.social-date-row { display: grid; grid-template-columns: 1fr 92px; gap: 8px; }
.social-date-row label { display: block; margin-bottom: 4px; }
.social-create-plan { width: 100%; min-height: 42px; margin-top: 4px; }
.social-plan-note { color: var(--muted); font-size: 10px; line-height: 1.45; }
.social-vault-picker { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.social-vault-picker[hidden] { display: none; }
.social-picker-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.social-queue-filters { display: flex; gap: 4px; overflow-x: auto; }
.social-queue-filters button { border: 0; border-radius: 6px; background: transparent; color: var(--muted); padding: 7px 10px; cursor: pointer; white-space: nowrap; }
.social-queue-filters button.active { background: var(--glass-strong); color: var(--text); }
.social-queue { display: flex; flex-direction: column; }
.social-job { display:grid; grid-template-columns:58px 110px minmax(0,1fr) 112px 30px; gap:12px; align-items:center; min-height:76px; padding:9px 8px; border-bottom:1px solid var(--border); border-radius:7px; transition:background .18s ease,transform .18s ease; animation:social-media-in .22s ease-out both; }
.social-job:hover { background:linear-gradient(90deg,rgba(56,189,248,.08),rgba(139,92,246,.07),transparent); transform:translateX(2px); }
.social-job-thumb { width: 54px; height: 58px; object-fit: cover; border-radius: 6px; background: #11131a; }
.social-job-when strong, .social-job-when span { display: block; }
.social-job-when span, .social-job-caption small { color: var(--muted); font-size: 10px; }
.social-job-caption p { font-size: 12px; line-height: 1.45; }
.social-status { justify-self: end; padding: 4px 7px; border-radius: 5px; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.social-status.scheduled { color: #2563eb; background: rgba(59,130,246,.13); }
.social-status.published { color: var(--ok); background: var(--ok-dim); }
.social-status.failed { color: var(--danger); background: rgba(248,113,113,.13); }
.social-status.cancelled { color: var(--muted); background: var(--glass); }
.social-skeleton { min-height: 130px; border-radius: 8px; background: linear-gradient(90deg, var(--glass) 25%, var(--glass-hover) 50%, var(--glass) 75%); background-size: 220% 100%; animation: social-shimmer 1.25s linear infinite; }
.icon-btn { width: 30px; height: 30px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: transparent; cursor: pointer; }
.icon-btn:hover { color: var(--text); background: var(--glass-hover); }
@keyframes social-enter { from { opacity: 0; transform: translateY(8px); } }
@keyframes social-media-in { from { opacity: 0; transform: translateY(5px); } }
@keyframes social-shimmer { to { background-position: -220% 0; } }
@keyframes social-spectrum { to { background-position:-220% 0; } }
@keyframes social-pulse { 50% { transform:scale(.82); opacity:.75; } }
@media (prefers-reduced-motion: reduce) { .social-shell, .social-media, .social-job, .social-skeleton { animation: none; } }
@media (max-width: 900px) {
  body.sidebar-open .sidebar-toggle { display: none !important; }
  .sidebar-brand-row { align-items: center; }
  .sidebar-profile-avatar { position: relative; z-index: 2; }
  .social-builder { grid-template-columns: 1fr; }
  .social-plan-panel { position: static; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 640px) {
  .social-header h1 { font-size: 32px; }
  .social-header { align-items: start; flex-direction: column; padding-top: 44px; }
  .social-summary { justify-content: flex-start; width: 100%; }
  .social-summary-item { flex: 1; }
  .social-band-heading { align-items: flex-start; flex-direction: column; }
  .social-band-heading > .btn, .social-media-actions { width: 100%; }
  .social-media-actions .btn { flex: 1; }
  .social-account-form { grid-template-columns: 1fr; }
  .social-account-form > *, .social-credential-fields, .social-platform-hint, .social-form-actions { grid-column: 1; }
  .social-media-grid, .social-vault-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px; }
  .social-job { grid-template-columns: 48px minmax(0,1fr) auto; gap: 8px; }
  .social-job-thumb { width: 44px; height: 50px; }
  .social-job-when { display: none; }
  .social-job .icon-btn { display: none; }
  .social-status { grid-column: 3; grid-row: 1; }
  .social-queue-filters { width: 100%; }
}