/* ==========================================================================
   Social — single-page autolist + calendar (#1001109)
   Tokens from the build brief §7. Everything is scoped under #tab-social so
   the rest of the admin is untouched; the toast + collapsed-sidebar handle are
   appended to <body> (they are position:fixed and must escape .main-content's
   containment) and carry the same tokens on their own class.
   ========================================================================== */
#tab-social, .sc-fixed {
  --sc-bg:#0b1220; --sc-bg2:#0e162a; --sc-panel:#111a2e; --sc-panel2:#152039;
  --sc-line:#1f2b45; --sc-line2:#2a3856;
  --sc-text:#e6edf7; --sc-muted:#94a3b8; --sc-dim:#5f6f8a;
  --sc-cyan:#22d3ee; --sc-cyan-dk:#0e9fb5; --sc-cyan-tint:rgba(34,211,238,.12);
  --sc-amber:#f5b041; --sc-amber-tint:rgba(245,176,65,.14);
  --sc-green:#34d399; --sc-green-tint:rgba(52,211,153,.14);
  --sc-red:#f26363; --sc-red-tint:rgba(242,99,99,.14);
  --sc-violet:#7c5cff;
  --sc-mono:'IBM Plex Mono','JetBrains Mono',ui-monospace,Menlo,monospace;
  --sc-sans:'IBM Plex Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sc-r:6px; --sc-r-lg:10px; --sc-side-w:400px;
  color:var(--sc-text); font-family:var(--sc-sans); font-size:13px; line-height:1.45;
}
#tab-social.active{display:flex;flex-direction:column;gap:10px;min-height:0}
#tab-social *{box-sizing:border-box}
/* Low-specificity reset (:where() = 0 specificity) so the .sc-* component rules
   below actually win — a plain `#tab-social button` reset outranks every
   `.sc-seg/.sc-pl/.sc-mode button.on` rule and silently flattened all
   selected-state styling, so picked options were indistinguishable (#1001119). */
:where(#tab-social) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#tab-social input,#tab-social select,#tab-social textarea{font:inherit;color:inherit}
#tab-social :focus-visible{outline:2px solid var(--sc-cyan);outline-offset:2px}
#tab-social .sc-mono{font-family:var(--sc-mono)}
#tab-social [hidden]{display:none!important}

/* ===== toolbar ===== */
.sc-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;padding:2px 0;min-width:0;overflow:hidden}
.sc-toolbar > *{flex:none}
.sc-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--sc-line2);border-radius:var(--sc-r);font-family:var(--sc-mono);font-size:11px;color:var(--sc-muted);background:var(--sc-panel);letter-spacing:.02em;white-space:nowrap}
.sc-chip.tab.on{background:var(--sc-cyan-tint);border-color:var(--sc-cyan);color:var(--sc-cyan)}
.sc-chip .cnt{background:rgba(0,0,0,.25);padding:0 6px;border-radius:999px;font-size:10px}
.sc-chip.sel{padding-right:6px;flex:0 1 auto!important;min-width:96px}
.sc-chip.sel select{background:transparent;border:0;color:var(--sc-text);font-family:var(--sc-mono);font-size:11px;padding:0;max-width:150px;min-width:0;text-overflow:ellipsis}
.sc-chip.sel select option{background:var(--sc-panel);color:var(--sc-text)}
.sc-sep{width:1px;height:20px;background:var(--sc-line2);margin:0 2px}
.sc-sp{flex:1 1 0!important;min-width:4px}
.sc-toolbar .sc-meta{flex:0 1 auto;min-width:0;overflow:hidden}
.sc-meta{font-family:var(--sc-mono);font-size:11px;color:var(--sc-muted);display:flex;gap:14px;white-space:nowrap}
.sc-meta b{color:var(--sc-text);font-weight:600}
.sc-meta .live{color:var(--sc-green)}
.sc-meta .paused{color:var(--sc-amber)}
.sc-meta .held{color:var(--sc-amber)}
.sc-btn{height:28px;padding:0 12px;border-radius:var(--sc-r);border:1px solid var(--sc-line2);background:var(--sc-panel);font-family:var(--sc-mono);font-size:11px;font-weight:600;color:var(--sc-text);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sc-btn.primary{background:var(--sc-cyan);border-color:var(--sc-cyan);color:#062028}
.sc-btn.ghost{background:transparent}
.sc-btn.danger{color:var(--sc-red);border-color:transparent}
.sc-btn.sm{height:24px;padding:0 8px;font-size:10px}
.sc-btn:hover{border-color:var(--sc-cyan)}
.sc-btn.primary:hover{background:#4de0f5}
.sc-btn:disabled{opacity:.45;cursor:not-allowed}

/* ===== layout ===== */
/* 72px fixed nav + 24px page padding + ~34px toolbar + 10px gap above, ~38px log-footer bar + 12px below */
.sc-wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--sc-side-w);flex:none;min-height:480px;height:calc(100vh - 192px);transition:grid-template-columns .2s ease}
.sc-wrap.side-hidden{grid-template-columns:minmax(0,1fr) 0}
.sc-main{min-width:0;display:flex;flex-direction:column;gap:10px;overflow:hidden;padding-right:8px}
.sc-side{min-width:0;overflow:hidden;border:1px solid var(--sc-line);border-radius:var(--sc-r-lg);background:var(--sc-panel);display:flex;flex-direction:column}
.sc-wrap.side-hidden .sc-side{border:0}

/* ===== strip ===== */
.sc-strip{border:1px solid var(--sc-line2);border-radius:var(--sc-r-lg);background:var(--sc-panel);padding:10px 14px;display:flex;align-items:center;gap:10px;flex-wrap:nowrap;min-height:46px;min-width:0}
.sc-strip > *{flex:none}
.sc-strip .sum{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-strip .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.sc-strip.live{border-color:var(--sc-green)}
.sc-strip.held{border-color:var(--sc-amber)}
.sc-strip .dot{width:8px;height:8px;border-radius:50%;background:var(--sc-dim);flex:none}
.sc-strip.live .dot{background:var(--sc-green);box-shadow:0 0 0 4px var(--sc-green-tint)}
.sc-strip.held .dot{background:var(--sc-amber);box-shadow:0 0 0 4px var(--sc-amber-tint)}
.sc-strip .name{font-family:var(--sc-mono);font-weight:600;font-size:13px}
.sc-strip .sum{color:var(--sc-muted);font-size:12px}
.sc-strip .sum b{color:var(--sc-text);font-weight:500}
.sc-strip .sum .held{color:var(--sc-amber)}
.sc-tog{display:inline-flex;align-items:center;gap:8px;font-family:var(--sc-mono);font-size:11px;color:var(--sc-muted);cursor:pointer;user-select:none}
.sc-tog .sw{width:34px;height:18px;border-radius:999px;background:var(--sc-line2);position:relative;transition:background .15s}
.sc-tog .sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .15s}
.sc-tog.on .sw{background:var(--sc-green)}
.sc-tog.on .sw::after{left:18px}
.sc-tog.on{color:var(--sc-green)}
.sc-brandpill{display:inline-flex;align-items:center;gap:6px;font-family:var(--sc-mono);font-size:11px;color:var(--sc-muted)}
.sc-brandpill i{width:18px;height:18px;border-radius:50%;background:var(--sc-cyan);color:#062028;font-style:normal;font-weight:600;display:grid;place-items:center;font-size:10px}
.sc-plat{display:inline-flex;gap:4px}
.sc-plat span{width:18px;height:18px;border-radius:4px;display:grid;place-items:center;font-family:var(--sc-mono);font-size:9px;font-weight:600;color:#fff}
.sc-plat .tiktok{background:#0f0f0f;border:1px solid #333}
.sc-plat .facebook{background:#1877f2}
.sc-plat .instagram{background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7)}
.sc-plat .linkedin{background:#0a66c2}
.sc-plat .youtube{background:#ff0000}
.sc-plat .x,.sc-plat .twitter{background:#000;border:1px solid #333}
.sc-plat .threads{background:#101010;border:1px solid #333}
.sc-plat .pinterest{background:#e60023}
.sc-plat .bluesky{background:#1185fe}
.sc-plat .other{background:var(--sc-line2)}

/* ===== panel ===== */
.sc-panel{flex:1;min-height:0;border:1px solid var(--sc-line);border-radius:var(--sc-r-lg);background:var(--sc-panel);display:flex;flex-direction:column;overflow:hidden}
.sc-panel-h{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--sc-line);flex-wrap:wrap}
.sc-panel-h .ttl{font-family:var(--sc-mono);font-size:11px;color:var(--sc-muted);letter-spacing:.04em}
.sc-panel-h .ttl b{color:var(--sc-text)}
.sc-viewtabs{display:inline-flex;border:1px solid var(--sc-line2);border-radius:var(--sc-r);overflow:hidden}
.sc-viewtabs button{font-family:var(--sc-mono);font-size:11px;padding:4px 10px;color:var(--sc-muted)}
.sc-viewtabs button.on{background:var(--sc-cyan-tint);color:var(--sc-cyan)}
.sc-filters{display:inline-flex;gap:4px}
.sc-filters button{font-family:var(--sc-mono);font-size:10px;padding:3px 8px;border-radius:999px;border:1px solid transparent;color:var(--sc-muted)}
.sc-filters button.on{border-color:var(--sc-line2);color:var(--sc-text);background:var(--sc-panel2)}
.sc-view{flex:1;min-height:0;overflow:auto}
.sc-empty{padding:30px;text-align:center;color:var(--sc-muted);font-size:12px}
.sc-empty b{color:var(--sc-text);font-weight:500}

/* queue table */
/* Fixed layout: every table shares the 8-column shape [handle][#][thumb][post][to][next][state][actions];
   the caption column takes whatever is left, so the actions never run off the panel. */
.sc-table{width:100%;border-collapse:collapse;table-layout:fixed}
.sc-table th:nth-child(1){width:24px}.sc-table th:nth-child(2){width:36px}.sc-table th:nth-child(3){width:56px}
.sc-table th:nth-child(5){width:92px}.sc-table th:nth-child(6){width:180px}.sc-table th:nth-child(7){width:108px}.sc-table th:nth-child(8){width:164px}
#sc-v-history .sc-table th:nth-child(1){width:8px}#sc-v-history .sc-table th:nth-child(2){width:40px}#sc-v-history .sc-table th:nth-child(6){width:140px}#sc-v-history .sc-table th:nth-child(8){width:34%}
.sc-table thead th{position:sticky;top:0;background:var(--sc-panel);z-index:1;font-family:var(--sc-mono);font-size:10px;font-weight:500;color:var(--sc-dim);letter-spacing:.06em;text-align:left;padding:6px 8px;border-bottom:1px solid var(--sc-line)}
.sc-table tbody tr{border-bottom:1px solid var(--sc-line);cursor:pointer}
.sc-table tbody tr:hover{background:var(--sc-panel2)}
.sc-table tbody tr.sel{background:var(--sc-cyan-tint);box-shadow:inset 3px 0 0 var(--sc-cyan)}
.sc-table tbody tr.draft td{opacity:.55}
.sc-table tbody tr.draft td.st,.sc-table tbody tr.draft td.act,.sc-table tbody tr.draft td.cap{opacity:1}
.sc-table tbody tr.dragging{opacity:.3}
.sc-table tbody tr.over{box-shadow:inset 0 2px 0 var(--sc-cyan)}
.sc-table td{padding:6px 8px;vertical-align:middle;height:56px}
.sc-table td.h{width:24px;color:var(--sc-dim);cursor:grab;font-size:14px;text-align:center}
.sc-table td.n{width:36px;font-family:var(--sc-mono);color:var(--sc-muted);font-size:11px}
.sc-table td.thumb{width:56px}
.sc-thumb{width:44px;height:44px;border-radius:4px;background:linear-gradient(135deg,#1a2a4c,#3d2b7a 60%,#0e9fb5);position:relative;overflow:hidden;flex:none}
.sc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sc-thumb.v::after{content:"▶";position:absolute;right:3px;bottom:2px;font-size:8px;background:rgba(0,0,0,.6);padding:1px 4px;border-radius:2px;color:#fff}
.sc-thumb.none{background:var(--sc-panel2);border:1px dashed var(--sc-line2)}
.sc-table td.cap{overflow:hidden}
.sc-table td.cap .c{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-table td.cap .m{font-family:var(--sc-mono);font-size:10px;color:var(--sc-dim);margin-top:2px}
.sc-table td.plats{width:90px}
.sc-table td.next{font-family:var(--sc-mono);font-size:11px;color:var(--sc-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-table td.next .in{color:var(--sc-cyan)}
.sc-table td.next .off{color:var(--sc-dim)}
.sc-table td.next .shift{color:var(--sc-amber);font-size:10px}
.sc-table td.act{text-align:right;white-space:nowrap;overflow:hidden}
.sc-table td.act .sc-btn{opacity:0}
.sc-table tr:hover td.act .sc-btn,.sc-table tr.sel td.act .sc-btn{opacity:1}
.sc-table td.res{color:var(--sc-muted);font-size:11px;white-space:normal;text-align:left;overflow:visible}
.sc-tag{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:999px;font-family:var(--sc-mono);font-size:10px;font-weight:600;letter-spacing:.03em;white-space:nowrap}
.sc-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.sc-tag.approved{background:var(--sc-green-tint);color:var(--sc-green)}
.sc-tag.draft{background:var(--sc-amber-tint);color:var(--sc-amber)}
.sc-tag.upnext{background:var(--sc-cyan-tint);color:var(--sc-cyan)}
.sc-tag.failed{background:var(--sc-red-tint);color:var(--sc-red)}
.sc-tag.posted{background:rgba(148,163,184,.12);color:var(--sc-muted)}
.sc-tag.paused{background:rgba(148,163,184,.12);color:var(--sc-dim)}
.sc-tag.scheduled{background:var(--sc-cyan-tint);color:var(--sc-cyan)}
.sc-tag.processing{background:var(--sc-cyan-tint);color:var(--sc-cyan)}
.sc-loopmark td{padding:8px;border-bottom:0;height:auto}
.sc-loopmark .l{display:flex;align-items:center;gap:10px;font-family:var(--sc-mono);font-size:10px;color:var(--sc-dim)}
.sc-loopmark .l::before,.sc-loopmark .l::after{content:"";flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--sc-line2) 0 6px,transparent 6px 12px)}
.sc-addrow td{padding:10px 8px;height:auto}
.sc-addrow .sc-btn{width:100%;justify-content:center;border-style:dashed;color:var(--sc-muted)}
.sc-table tbody tr.sc-loopmark,.sc-table tbody tr.sc-addrow{cursor:default}
.sc-table tbody tr.sc-loopmark:hover,.sc-table tbody tr.sc-addrow:hover{background:transparent}

/* calendar */
.sc-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-height:100%}
.sc-cal.weeks-1{grid-auto-rows:minmax(160px,auto)}
.sc-cal.weeks-2{grid-auto-rows:minmax(200px,1fr)}
.sc-cal.month{grid-auto-rows:minmax(120px,auto)}
.sc-day{border-right:1px solid var(--sc-line);border-bottom:1px solid var(--sc-line);display:flex;flex-direction:column;min-width:0}
.sc-day:nth-child(7n){border-right:0}
.sc-day .dh{padding:8px;border-bottom:1px solid var(--sc-line);font-family:var(--sc-mono);display:flex;align-items:baseline;gap:8px;position:sticky;top:0;background:var(--sc-panel);z-index:1}
.sc-day .dh .w{font-size:10px;color:var(--sc-dim);letter-spacing:.06em}
.sc-day .dh .num{font-size:16px;font-weight:600;color:var(--sc-muted)}
.sc-day .dh .mo{font-size:10px;color:var(--sc-dim)}
.sc-day.today .dh .num{color:var(--sc-cyan)}
.sc-day.today{box-shadow:inset 0 2px 0 var(--sc-cyan)}
.sc-day.past{background:rgba(0,0,0,.15)}
.sc-day.past .dh .num{color:var(--sc-dim)}
.sc-day.dropover{background:var(--sc-amber-tint)}
.sc-day .slots{padding:6px;display:flex;flex-direction:column;gap:6px;flex:1;overflow:auto;min-height:60px}
.sc-card{border:1px solid var(--sc-line2);border-radius:var(--sc-r);background:var(--sc-bg2);padding:6px;display:grid;grid-template-columns:36px 1fr;gap:8px;cursor:pointer;min-width:0}
.sc-card:hover{border-color:var(--sc-cyan)}
.sc-card.sel{border-color:var(--sc-cyan);box-shadow:0 0 0 1px var(--sc-cyan)}
.sc-card .th{width:36px;height:36px;border-radius:3px}
.sc-card .b{min-width:0}
.sc-card .c{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-card .m{font-family:var(--sc-mono);font-size:10px;color:var(--sc-muted);display:flex;justify-content:space-between;gap:6px;margin-top:2px;min-width:0}
.sc-card .m span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-card .m span:first-child{flex:none}
.sc-card .m .s{flex:0 1 auto}
.sc-cal .sc-card{grid-template-columns:30px 1fr;gap:6px}
.sc-cal .sc-card .th{width:30px;height:30px}
.sc-card .m .s.up{color:var(--sc-cyan)}
.sc-card .m .s.shift{color:var(--sc-amber)}
.sc-card.auto{border-color:var(--sc-cyan-dk)}
.sc-card.loop2{border-style:dashed;border-color:var(--sc-line2)}
.sc-card.posted{opacity:.5}
.sc-card.posted .m .s{color:var(--sc-green)}
.sc-card.oneoff{border-color:var(--sc-amber);background:var(--sc-amber-tint);cursor:grab}
.sc-card.oneoff .m .s{color:var(--sc-amber)}
.sc-card.oneoff .c::before{content:"📌 ";font-size:9px}
.sc-card.oneoff.dragging{opacity:.35}
.sc-card.oneoff.isdraft{opacity:.55;cursor:pointer}
.sc-day .empty{flex:1;display:grid;place-items:center;font-family:var(--sc-mono);font-size:10px;color:var(--sc-dim);opacity:0;cursor:pointer;min-height:28px}
.sc-day:hover .empty{opacity:1}
.sc-day .empty:hover{color:var(--sc-cyan)}
.sc-day.past .empty{cursor:default}
.sc-day.past:hover .empty{opacity:0}
.sc-calnav{display:inline-flex;align-items:center;gap:6px;font-family:var(--sc-mono);font-size:11px}
.sc-calnav .rng{color:var(--sc-cyan);font-weight:600;padding:0 6px;white-space:nowrap}
.sc-calnav button{height:22px;min-width:22px;padding:0 6px;border:1px solid var(--sc-line2);border-radius:4px;color:var(--sc-muted)}
.sc-legend{display:inline-flex;align-items:center;gap:6px;font-family:var(--sc-mono);font-size:10px;color:var(--sc-muted);margin-right:8px}
.sc-legend i{width:10px;height:10px;border-radius:2px;border:1px solid var(--sc-cyan-dk);background:var(--sc-bg2);margin-left:6px}
.sc-legend i.lp{border-style:dashed;border-color:var(--sc-line2)}
.sc-legend i.oo{border-color:var(--sc-amber);background:var(--sc-amber-tint)}
/* list mode of the calendar */
.sc-callist{padding:8px 12px;display:flex;flex-direction:column;gap:6px}
.sc-callist .dayh{font-family:var(--sc-mono);font-size:10px;color:var(--sc-dim);letter-spacing:.06em;margin-top:8px}
/* list mode is the review view (#1002717): image big enough to judge the
   creative (contain, so portrait + landscape both show uncropped) and the
   caption wrapped instead of cut to one line */
.sc-callist .sc-card{grid-template-columns:220px 1fr;gap:12px;padding:8px;align-items:start}
.sc-callist .sc-card .th{width:220px;height:176px;border-radius:4px;background:var(--sc-bg)}
.sc-callist .sc-card .th img{object-fit:contain}
.sc-callist .sc-card .th.none{background:var(--sc-panel2)}
.sc-callist .sc-card .th.v::after{font-size:11px;right:6px;bottom:6px;padding:2px 6px}
.sc-callist .sc-card .c{font-size:12px;line-height:1.45;white-space:pre-line;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:9;overflow:hidden}
.sc-callist .sc-card .m{margin-top:6px}
@media (max-width:700px){.sc-callist .sc-card{grid-template-columns:1fr}.sc-callist .sc-card .th{width:100%;height:auto;aspect-ratio:4/3}}

/* ===== sidebar ===== */
.sc-side-h{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--sc-line)}
.sc-side-h .t{font-family:var(--sc-mono);font-weight:600;font-size:14px}
.sc-side-h .s{font-family:var(--sc-mono);font-size:10px;color:var(--sc-muted);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.sc-side-h .pin,.sc-side-h .x{width:28px;height:28px;border:1px solid var(--sc-line2);border-radius:6px;display:grid;place-items:center;color:var(--sc-muted);font-size:12px;flex:none}
/* pin toggle mirrors the Agent Board dock pin (board.css .dock-btn, #13027):
   square outline, a diagonal pin icon that straightens and turns amber when
   pinned — so the "keep this panel open" control reads identically in both
   places (#1001125). */
.sc-side-h .pin{border-radius:2px}
.sc-side-h .pin:hover{color:var(--sc-text);border-color:var(--sc-muted)}
.sc-side-h .pin.on{border-color:var(--sc-amber);color:var(--sc-amber);background:var(--sc-amber-tint)}
.sc-side-h .pin svg{display:block;transform:rotate(45deg);transition:transform .2s}
.sc-side-h .pin.on svg{transform:none}
.sc-side-tabs{display:flex;border-bottom:1px solid var(--sc-line)}
.sc-side-tabs button{flex:1;padding:8px;font-family:var(--sc-mono);font-size:11px;color:var(--sc-muted);border-bottom:2px solid transparent}
.sc-side-tabs button.on{color:var(--sc-cyan);border-bottom-color:var(--sc-cyan)}
.sc-side-body{flex:1;overflow:auto;padding:14px}
.sc-side-f{padding:10px 14px;border-top:1px solid var(--sc-line);display:flex;gap:8px;justify-content:flex-end;background:var(--sc-panel);flex-wrap:wrap}
.sc-side-f .sc-btn.danger{margin-right:auto}
.sc-field{margin-bottom:12px}
.sc-field label{display:block;font-family:var(--sc-mono);font-size:10px;color:var(--sc-dim);letter-spacing:.06em;margin-bottom:5px}
.sc-field .in,.sc-field textarea,.sc-field select{width:100%;background:var(--sc-bg2);border:1px solid var(--sc-line2);border-radius:var(--sc-r);padding:7px 9px;font-size:12px;color:var(--sc-text)}
.sc-field select option{background:var(--sc-panel)}
.sc-field textarea{resize:vertical;min-height:72px;font-family:var(--sc-sans)}
.sc-field .in:focus,.sc-field textarea:focus,.sc-field select:focus{border-color:var(--sc-cyan);outline:0}
.sc-field .in[readonly]{color:var(--sc-muted)}
.sc-field .help{font-size:11px;color:var(--sc-muted);margin-top:5px}
.sc-field .help.warn{color:var(--sc-amber)}
.sc-field .help.over{color:var(--sc-red)}
.sc-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sc-seg{display:flex;flex-wrap:wrap;gap:4px}
.sc-seg button{font-family:var(--sc-mono);font-size:11px;padding:5px 9px;border:1px solid var(--sc-line2);border-radius:var(--sc-r);color:var(--sc-muted);background:var(--sc-bg2);transition:background .12s,border-color .12s,color .12s}
.sc-seg button:hover:not(:disabled):not(.on){border-color:var(--sc-cyan-dk);color:var(--sc-text)}
.sc-seg button.on{background:var(--sc-cyan);border-color:var(--sc-cyan);color:var(--sc-bg);font-weight:700}
.sc-seg button:disabled{opacity:.5;cursor:not-allowed}
.sc-seg.days button{width:36px;padding:5px 0;text-align:center}
.sc-pl{display:flex;gap:6px;flex-wrap:wrap}
.sc-pl button{display:inline-flex;align-items:center;gap:6px;font-family:var(--sc-mono);font-size:11px;padding:6px 10px;border:1px solid var(--sc-line2);border-radius:var(--sc-r);color:var(--sc-muted);background:var(--sc-bg2);transition:background .12s,border-color .12s,color .12s}
.sc-pl button:hover:not(:disabled):not(.on){border-color:var(--sc-cyan-dk);color:var(--sc-text)}
.sc-pl button.on{border-color:var(--sc-cyan);background:var(--sc-cyan);color:var(--sc-bg);font-weight:700}
.sc-pl button.on::after{content:"✓";color:var(--sc-bg);font-size:10px;font-weight:700}
.sc-pl button:disabled{cursor:not-allowed;opacity:.7}
.sc-kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-family:var(--sc-mono);font-size:11px;margin:0}
.sc-kv dt{color:var(--sc-dim)}.sc-kv dd{margin:0;color:var(--sc-text)}
.sc-callout{border:1px solid var(--sc-line2);border-radius:var(--sc-r);background:var(--sc-bg2);padding:10px 12px;font-size:12px;color:var(--sc-muted)}
.sc-callout b{color:var(--sc-text);font-weight:500}
.sc-callout.ok{border-color:rgba(52,211,153,.4)}
.sc-callout.warn{border-color:rgba(245,176,65,.5)}
.sc-callout.err{border-color:rgba(242,99,99,.5)}
.sc-preview{border:1px solid var(--sc-line2);border-radius:var(--sc-r);background:var(--sc-bg2);overflow:hidden}
.sc-preview .vid{aspect-ratio:4/3;background:linear-gradient(135deg,#1a2a4c,#3d2b7a 60%,#0e9fb5);display:grid;place-items:center;color:#fff;font-size:22px;opacity:.9;position:relative;overflow:hidden}
/* 4:3 = our 1400x1050 standard; contain so any other size (portrait, 16:9 video) shows whole, never cropped (#1002706) */
.sc-preview .vid:has(img,video){background:#0b0f19;opacity:1}
.sc-preview .vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.sc-preview .vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.sc-preview .vid.none{background:var(--sc-panel2);color:var(--sc-dim);font-size:12px;font-family:var(--sc-mono)}
.sc-preview .pm{padding:8px 10px;font-family:var(--sc-mono);font-size:10px;color:var(--sc-muted);display:flex;justify-content:space-between;gap:8px;align-items:center}
.sc-preview .pm .acts{display:flex;gap:8px}
.sc-preview .pm button{color:var(--sc-cyan);font-family:var(--sc-mono);font-size:10px}
.sc-preview .pm span.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sc-statusline{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid var(--sc-line2);border-radius:var(--sc-r);background:var(--sc-bg2);font-family:var(--sc-mono);font-size:11px;margin-bottom:6px}
.sc-statusline .r{color:var(--sc-muted);text-align:right}
.sc-statusline .r.ok{color:var(--sc-green)}
.sc-statusline .r.err{color:var(--sc-red)}
.sc-statusline .r.up{color:var(--sc-cyan)}
.sc-hr{height:1px;background:var(--sc-line);margin:14px 0}
.sc-h6{font-family:var(--sc-mono);font-size:10px;color:var(--sc-dim);letter-spacing:.06em;margin:0 0 8px}
.sc-mode{display:flex;border:1px solid var(--sc-line2);border-radius:var(--sc-r);overflow:hidden;margin-bottom:12px}
.sc-mode button{flex:1;padding:7px;font-family:var(--sc-mono);font-size:11px;color:var(--sc-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .12s,color .12s}
.sc-mode button.on{background:var(--sc-cyan);color:var(--sc-bg);font-weight:700}
.sc-mode button:disabled{opacity:.5;cursor:not-allowed}
.sc-confirm{display:flex;gap:8px;align-items:center;font-family:var(--sc-mono);font-size:11px;color:var(--sc-amber)}

/* ===== csv import/export panel ===== */
.sc-csv-panel{background:var(--sc-panel2);border:1px solid var(--sc-line2);border-radius:var(--sc-r-lg);padding:12px 16px;margin-bottom:2px}
.sc-csv-inner{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap}
.sc-csv-inner .sc-sp{flex:1 1 0;min-width:4px}
.sc-csv-section{display:flex;flex-direction:column;gap:8px;min-width:180px}
.sc-csv-label{font-family:var(--sc-mono);font-size:10px;color:var(--sc-dim);letter-spacing:.06em;margin:0}
.sc-csv-hint{font-size:11px;color:var(--sc-muted);margin:0;line-height:1.5;max-width:380px}
.sc-csv-hint code{font-family:var(--sc-mono);color:var(--sc-cyan);font-size:10px}
.sc-csv-divider{width:1px;background:var(--sc-line2);align-self:stretch}
.sc-csv-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sc-csv-fname{font-family:var(--sc-mono);font-size:11px;color:var(--sc-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.sc-csv-status{font-family:var(--sc-mono);font-size:11px;color:var(--sc-muted)}

/* ===== fixed chrome (appended to body) ===== */
.sc-fixed.sc-handle{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:1200;writing-mode:vertical-rl;padding:10px 6px;background:var(--sc-panel);border:1px solid var(--sc-line2);border-right:0;border-radius:6px 0 0 6px;font-family:var(--sc-mono);font-size:10px;color:var(--sc-cyan);cursor:pointer;display:none}
.sc-fixed.sc-handle.show{display:block}
.sc-fixed.sc-toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--sc-panel2);border:1px solid var(--sc-cyan);color:var(--sc-text);padding:8px 14px;border-radius:var(--sc-r);font-family:var(--sc-mono);font-size:11px;z-index:1300;transition:.2s;pointer-events:none;max-width:min(90vw,640px);text-align:center}
.sc-fixed.sc-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.sc-fixed.sc-toast.err{border-color:var(--sc-red)}

/* ===== responsive (brief §8: 1100px collapses next-publish, 860px = drawer) ===== */
@media (max-width:1100px){
  #tab-social{--sc-side-w:340px}
  #tab-social .sc-table td.next,#tab-social .sc-table th.next,#tab-social .sc-table th:nth-child(6),#tab-social .sc-table td:nth-child(6){display:none}
  #tab-social .sc-toolbar .sc-meta span:not(.live):not(.paused):not(.held){display:none}
}
@media (max-width:1200px){#tab-social .sc-toolbar .sc-meta{display:none}}
@media (max-width:900px){.sc-toolbar{flex-wrap:wrap;overflow:visible}}
@media (max-width:860px){
  .sc-wrap{grid-template-columns:minmax(0,1fr) 0}
  .sc-side{position:fixed;right:0;top:72px;bottom:0;width:min(400px,100vw);z-index:1100;box-shadow:-10px 0 30px rgba(0,0,0,.5);border-radius:0}
  .sc-wrap.side-hidden .sc-side{display:none}
  .sc-main{padding-right:0}
}
@media (prefers-reduced-motion:reduce){#tab-social *,.sc-fixed{transition:none!important}}