/* CDF — SOCIAL (shared): channel marks, the iPhone preview, batch bar,
   post cards. Used by Channel Preview and Post Editor. */

/* ---------- channel marks ---------- */
.soc-ic{display:inline-grid;place-items:center;flex:0 0 auto;border-radius:30%;color:rgb(var(--soc-rgb,232,180,120));background:rgba(var(--soc-rgb,232,180,120),.13);border:1px solid rgba(var(--soc-rgb,232,180,120),.32)}
.soc-ic svg{width:56%;height:56%}
.soc-ic.util{color:var(--gold);background:var(--gold-soft);border-color:var(--gold-line)}
.soc-ic.plain{background:none;border:0}
.soc-ic[style*="222,226,232"]{color:var(--ink);background:var(--panel2);border-color:var(--line)}

/* ---------- the iPhone ---------- */
.iphone{--w:330px;width:var(--w);aspect-ratio:9/19.5;border-radius:calc(var(--w) * .16);padding:calc(var(--w) * .035);background:linear-gradient(145deg,#2c2a28,#0d0c0b 60%,#252321);box-shadow:0 0 0 1.5px #4a4642,0 30px 60px -20px rgba(0,0,0,.6),inset 0 0 0 1px #000;position:relative;flex:0 0 auto}
.iphone.sm{--w:250px}
.iphone-screen{position:relative;width:100%;height:100%;border-radius:calc(var(--w) * .13);overflow:hidden;background:#fff;color:#111;font:14px/1.38 -apple-system,"SF Pro Text","Segoe UI",system-ui,sans-serif;display:flex;flex-direction:column}
.iphone-screen *{box-sizing:border-box}
.iphone .ph-status{display:flex;align-items:center;justify-content:space-between;padding:12px 26px 6px;font:600 13px/1 -apple-system,system-ui,sans-serif;color:#111;flex:0 0 auto;position:relative;z-index:3}
.iphone .ph-status.dark{color:#fff}
.iphone .ph-island{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:32%;height:22px;border-radius:14px;background:#000}
.iphone .ph-sig{display:flex;align-items:flex-end;gap:2px}
.iphone .ph-sig i{display:block;width:3px;background:currentColor;border-radius:1px}
.iphone .ph-sig i:nth-child(1){height:4px}.iphone .ph-sig i:nth-child(2){height:6px}.iphone .ph-sig i:nth-child(3){height:8px}.iphone .ph-sig i:nth-child(4){height:10px}
.iphone .ph-batt{display:block;width:22px;height:11px;border:1.5px solid currentColor;border-radius:3px;margin-left:5px;position:relative}
.iphone .ph-batt::after{content:"";position:absolute;inset:1.5px;right:4px;background:currentColor;border-radius:1px}
.iphone .ph-home{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);width:36%;height:4.5px;border-radius:3px;background:rgba(0,0,0,.85);z-index:4}
.ch-tiktok .ph-home,.ch-youtube .ph-home{background:rgba(255,255,255,.85)}
.iphone .ph-av{display:grid;place-items:center;line-height:1;text-align:center;flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:linear-gradient(140deg,#b98a35,#5b3d14);color:#fff;font:700 12px/1 system-ui,sans-serif}
.iphone .ph-av.sm{width:30px;height:30px;font-size:10px}
.iphone .ph-link{color:#3b74c4}
.iphone-screen .pv-media,.iphone-screen .pv-tile{border-radius:0}
.iphone-screen .pv-media img,.iphone-screen .pv-media video{width:100%;display:block;object-fit:cover}
.iphone-screen .pv-tag{display:none}
.iphone-screen .pv-tile{min-height:180px}

/* Instagram */
.ig-app{flex:1;overflow:hidden;display:flex;flex-direction:column}
.ig-top{display:flex;align-items:center;justify-content:space-between;padding:4px 14px 8px}
.ig-logo{font:italic 700 21px/1 "Snell Roundhand","Brush Script MT",cursive}
.ig-top-ic{display:flex;gap:14px}.ig-top-ic svg{width:23px;height:23px}
.ig-head{display:flex;align-items:center;gap:9px;padding:6px 12px}
.ig-head b{display:block;font-size:13px}.ig-head div>span{display:block;font-size:11px;color:#666}
.ig-more{margin-left:auto;color:#444;letter-spacing:1px}
.ig-media .pv-media,.ig-media .pv-tile{width:100%;aspect-ratio:4/5;overflow:hidden}
.ig-media .pv-media img,.ig-media .pv-media video{height:100%}
.ig-actions{display:flex;justify-content:space-between;padding:9px 12px 4px}
.ig-actions span{display:flex;gap:14px}.ig-actions svg{width:24px;height:24px}
.ig-likes{padding:2px 12px;font-size:12.5px}
.ig-cap{padding:3px 12px;font-size:12.5px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ig-time{padding:4px 12px;font-size:10.5px;color:#888;text-transform:uppercase}

/* LinkedIn */
.li-app{flex:1;overflow:hidden;background:#f4f2ee;display:flex;flex-direction:column}
.li-top{padding:6px 12px 10px;background:#fff}
.li-search{display:block;background:#edf3f8;border-radius:6px;padding:7px 12px;font-size:13px;color:#666}
.li-post{background:#fff;margin-top:8px;flex:1;overflow:hidden}
.li-head{display:flex;gap:9px;padding:12px 12px 6px;align-items:flex-start}
.li-head b{display:block;font-size:13.5px}.li-head div>span{display:block;font-size:11px;color:#666;line-height:1.35}
.li-follow{margin-left:auto;color:#0a66c2;font-weight:600;font-size:13px;white-space:nowrap}
.li-text{padding:2px 12px 10px;font-size:13px}
.li-more{color:#666;margin-left:4px}
.li-media .pv-media,.li-media .pv-tile{max-height:260px;overflow:hidden}
.li-react{display:flex;align-items:center;gap:6px;padding:8px 12px;font-size:11.5px;color:#666;border-bottom:1px solid #e8e6e2}
.li-dots{display:flex}.li-dots i{width:14px;height:14px;border-radius:50%;border:1.5px solid #fff;margin-left:-4px;background:#378fe9}.li-dots i:nth-child(2){background:#df704d}.li-dots i:nth-child(3){background:#6dae4f}
.li-bar{display:flex;justify-content:space-around;padding:8px 6px;font-size:11.5px;color:#555;font-weight:600}
.li-bar span{display:flex;flex-direction:column;align-items:center;gap:3px}.li-bar svg{width:20px;height:20px}

/* X */
.x-app{flex:1;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.x-top{display:flex;justify-content:center;padding:4px 0 10px;border-bottom:1px solid #eee}
.x-top .soc-ic{color:#000}
.x-post{display:flex;gap:10px;padding:12px}
.x-main{min-width:0;flex:1}
.x-who{display:flex;gap:5px;align-items:baseline;flex-wrap:wrap}.x-who b{font-size:14px}.x-who span{font-size:13px;color:#536471}
.x-text{font-size:14px;margin:2px 0 10px;word-wrap:break-word}
.x-media .pv-media,.x-media .pv-tile{border-radius:14px;overflow:hidden;border:1px solid #e1e8ed;max-height:240px}
.x-bar{display:flex;justify-content:space-between;color:#536471;font-size:12px;margin-top:10px}
.x-bar span{display:flex;align-items:center;gap:4px}.x-bar svg{width:17px;height:17px}
.x-over{margin-top:10px;padding:7px 10px;border-radius:8px;background:#fdecec;color:#b42318;font-size:12px;font-weight:600}

/* TikTok / Shorts */
.vt-app{position:absolute;inset:0;background:#000;color:#fff}
.vt-app .ph-status{position:absolute;left:0;right:0;top:0}
.vt-media{position:absolute;inset:0;display:flex;align-items:center}
.vt-media .pv-media,.vt-media .pv-tile{width:100%;height:100%}
.vt-media .pv-media img,.vt-media .pv-media video{height:100%;object-fit:cover}
.vt-top{position:absolute;top:46px;left:0;right:0;display:flex;justify-content:center;gap:16px;font-size:15px;color:rgba(255,255,255,.7);text-shadow:0 1px 3px rgba(0,0,0,.5)}
.vt-top b{color:#fff;border-bottom:2px solid #fff;padding-bottom:3px}
.vt-rail{position:absolute;right:10px;bottom:120px;display:flex;flex-direction:column;align-items:center;gap:16px}
.vt-rail span{display:flex;flex-direction:column;align-items:center;font-size:11px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.vt-rail svg{width:30px;height:30px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.vt-rail i{font-style:normal}
.vt-cap{position:absolute;left:12px;right:64px;bottom:26px;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.vt-cap b{font-size:14px}.vt-cap p{margin:4px 0 8px;font-size:12.5px;line-height:1.35}
.vt-cap .ph-link{color:#fff;font-weight:600}
.vt-music{display:flex;align-items:center;gap:6px;font-size:11.5px}.vt-music svg{width:14px;height:14px}

/* Mail */
.ml-app{flex:1;overflow:hidden;display:flex;flex-direction:column}
.ml-top{padding:4px 14px 8px;color:#0a84ff;font-size:15px}
.ml-head{display:flex;gap:10px;align-items:center;padding:6px 14px}
.ml-head b{display:block;font-size:14px}.ml-head div>span{display:block;font-size:12px;color:#888}
.ml-time{margin-left:auto;font-size:12px;color:#888}
.ml-subj{padding:6px 14px 10px;font:700 17px/1.25 -apple-system,system-ui,sans-serif;border-bottom:1px solid #eee}
.ml-body{background:#f6f1e7;color:#4a4033;margin:10px;border-radius:8px;padding:14px;flex:1;overflow:hidden;font-size:12.5px}
.ml-mast{font:700 9.5px/1 system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#8a7a5f;text-align:center;padding-bottom:10px;border-bottom:1px solid #e3d9c5;margin-bottom:10px}
.ml-media .pv-media,.ml-media .pv-tile{border-radius:6px;overflow:hidden;max-height:150px}
.ml-body p{margin:10px 0;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.ml-foot{font-size:10px;color:#8a7a5f;text-align:center;border-top:1px solid #e3d9c5;padding-top:8px}

/* ---------- post cards (grid) ---------- */
.pc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.pc{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-lg);overflow:hidden;transition:border-color .16s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease)}
.pc:hover{border-color:var(--gold-line);transform:translateY(-2px);box-shadow:var(--shadow)}
.pc.is-sel{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-soft)}
.pc-media{position:relative;aspect-ratio:4/3;background:var(--panel2);cursor:pointer;overflow:hidden;border:0;padding:0;width:100%;display:block;color:inherit}
.pc-media .pv-media,.pc-media .pv-tile{position:absolute;inset:0;min-height:0;border-radius:0}
.pc-media .pv-media img,.pc-media .pv-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pc-media .pv-tag{display:none}
.pc-media .pv-tile .q{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,transparent 70%,rgba(0,0,0,.25));pointer-events:none}
.pc-ch{position:absolute;top:10px;right:10px;z-index:2}
.pc-ch .soc-ic{background:rgba(16,13,11,.78);backdrop-filter:blur(4px)}
.pc-play{position:absolute;inset:auto auto 10px 10px;z-index:2;font:700 10px/1 var(--mono);letter-spacing:.06em;color:#fff;background:rgba(16,13,11,.72);border-radius:5px;padding:4px 7px}
.pc-check{position:absolute;top:10px;left:10px;z-index:3;width:26px;height:26px;border-radius:8px;border:1.5px solid rgba(255,255,255,.8);background:rgba(16,13,11,.55);display:grid;place-items:center;cursor:pointer;color:transparent;transition:.12s}
.pc-check:hover{border-color:#fff}
.pc.is-sel .pc-check{background:var(--gold);border-color:var(--gold);color:var(--on-ink)}
.pc-check svg{width:15px;height:15px}
.pc-b{padding:13px 15px 4px;display:flex;flex-direction:column;gap:6px;flex:1}
.pc-t{font:600 14.5px/1.35 var(--ui);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-s{font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
.pc-when{font-size:11.5px;color:var(--mut);display:inline-flex;align-items:center;gap:5px}
.pc-warn{font-size:11.5px;color:var(--err-tx,#e79a8d);display:flex;gap:6px;align-items:flex-start;line-height:1.35}
.pc-f{display:flex;gap:8px;padding:11px 15px 14px}
.pc-f .btn{flex:1;justify-content:center}

/* ---------- list view ---------- */
.pl{display:flex;flex-direction:column;border:1px solid var(--line2);border-radius:var(--r-lg);overflow:hidden;background:var(--panel)}
.pl-row{display:grid;grid-template-columns:34px 92px 34px minmax(0,1fr) auto auto auto;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line2);cursor:pointer}
.pl-row:last-child{border-bottom:0}
.pl-row:hover{background:var(--hover)}
.pl-row.is-sel{background:var(--gold-soft)}
.pl-row .pc-check{position:static;border-color:var(--line);background:var(--panel2)}
.pl-row.is-sel .pc-check{background:var(--gold);border-color:var(--gold);color:var(--on-ink)}
.pl-thumb{position:relative;width:92px;aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;background:var(--panel2);border:1px solid var(--line)}
.pl-thumb .pv-media,.pl-thumb .pv-tile{position:absolute;inset:0;min-height:0;padding:6px}
.pl-thumb .pv-media img,.pl-thumb .pv-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pl-thumb .pv-tag,.pl-thumb .pv-tile .q,.pl-thumb .pv-tile .note{display:none}
.pl-t{min-width:0}.pl-t b{display:block;font:600 13.5px/1.3 var(--ui);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pl-t span{display:block;font-size:11.5px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){.pl-row{grid-template-columns:30px 70px minmax(0,1fr) auto}.pl-row>.pl-hide{display:none}.pl-thumb{width:70px}}

/* ---------- selection / batch bar ---------- */
.batch-bar{position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);z-index:900;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;background:var(--panel);border:1px solid var(--gold-line);border-radius:18px;box-shadow:var(--shadow-lg);padding:10px 12px 10px 18px;max-width:calc(100vw - 32px);transition:transform .25s var(--ease)}
.batch-bar.is-on{transform:translate(-50%,0)}
.batch-bar .bb-n{font:700 13.5px/1.2 var(--ui);color:var(--ink);margin-right:4px;white-space:nowrap}
.batch-bar .bb-chs{display:flex;gap:4px;margin-right:6px}
.batch-bar .btn{white-space:nowrap}
@media (max-width:760px){.batch-bar{bottom:10px;padding:10px;border-radius:14px;display:grid;grid-template-columns:1fr 1fr;width:calc(100vw - 20px)}.batch-bar.is-on{transform:translate(-50%,0)}.batch-bar .bb-n{grid-column:1/-1;text-align:center}.batch-bar .bb-chs{display:none}.batch-bar .btn{justify-content:center}}

/* ---------- preview modal ---------- */
.pvm{width:min(1040px,100%)}
.pvm-b{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;padding:24px}
.pvm-phone{display:flex;justify-content:center;align-items:flex-start;position:relative}
.pvm-side{min-width:0;display:flex;flex-direction:column;gap:16px}
.pvm-h{display:flex;align-items:center;gap:12px}
.pvm-h h3{font:700 19px/1.25 var(--ui);color:var(--ink);margin:0}
.pvm-h .sub{font-size:12px;color:var(--mut);margin-top:3px}
.pvm-nav{display:flex;gap:6px;margin-left:auto}
.pvm-nav button{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;color:var(--body)}
.pvm-nav button:hover:not(:disabled){border-color:var(--gold-line);color:var(--ink)}
.pvm-nav button:disabled{opacity:.35}
.pvm-sect{border:1px solid var(--line2);border-radius:var(--r);padding:14px 16px;background:var(--panel2)}
.pvm-sect h4{font:700 10.5px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0 0 10px}
.pvm-msg{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--body)}
.pvm-msg .ic{flex:0 0 auto;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold)}
.pvm-msg.ok .ic{background:rgba(67,160,124,.14);color:var(--ok-tx)}
.pvm-msg.warn .ic{background:rgba(214,158,46,.14);color:#d6a23a}
.pvm-msg.err .ic{background:rgba(178,58,40,.16);color:var(--err-tx,#e79a8d)}
.pvm-msg b{color:var(--ink)}
.pvm-acts{display:flex;flex-wrap:wrap;gap:9px}
.pvm-acts{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.pvm-acts .btn{justify-content:center}
.pvm-counter{display:flex;justify-content:space-between;font-size:12px;color:var(--mut)}
.pvm-counter .over{color:var(--err-tx,#e79a8d);font-weight:600}
.pvm-sibs{display:flex;gap:8px;flex-wrap:wrap}
.pvm-sib{display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 5px;border-radius:99px;border:1px solid var(--line);font:600 12px/1 var(--ui);color:var(--body);background:var(--panel)}
.pvm-sib.on{border-color:var(--gold);color:var(--ink);background:var(--gold-soft)}
@media (max-width:860px){.pvm-b{grid-template-columns:1fr;padding:16px}.iphone{--w:min(310px,78vw)}}

/* ---------- stepper (stage) ---------- */
.stepper{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.stepper .st{display:inline-flex;align-items:center;gap:6px;font:600 11.5px/1 var(--ui);color:var(--faint);padding:6px 10px 6px 7px;border-radius:99px;border:1px solid var(--line)}
.stepper .st i{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font:700 9px/1 var(--ui);font-style:normal;background:var(--panel2);border:1px solid var(--line)}
.stepper .st.done{color:var(--ok-tx)}.stepper .st.done i{background:rgba(67,160,124,.18);border-color:rgba(67,160,124,.4)}
.stepper .st.now{color:var(--ink);border-color:var(--gold-line);background:var(--gold-soft)}.stepper .st.now i{background:var(--gold);border-color:var(--gold);color:var(--on-ink)}
.stepper .sep{width:10px;height:1px;background:var(--line)}

/* ---------- generic dialog built by post-actions.js ---------- */
.pa-list{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto;margin:4px 0}
.pa-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line2);border-radius:var(--r-sm);font-size:13px;background:var(--panel2)}
.pa-row .t{flex:1;min-width:0;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-row .r{font-size:12px;color:var(--mut);text-align:right;max-width:55%}
.pa-row.bad .r{color:var(--err-tx,#e79a8d)}
.pa-note{font-size:12.5px;color:var(--mut);line-height:1.5;margin:10px 0 0}
.pa-opt{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;border:1px solid var(--line2);border-radius:var(--r-sm);margin-top:7px;cursor:pointer;font-size:13px;color:var(--body);background:var(--panel2)}
.pa-opt input{margin-top:2px;accent-color:var(--gold)}
.pa-opt b{color:var(--ink)}
.pa-opt:has(input:checked){border-color:var(--gold-line);background:var(--gold-soft)}
/* Channels page: which brand page/account a connection publishes as */
.ch-target{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--body);padding:2px 0 10px}
.ch-target b{color:var(--ink)}
.ch-target.warn{color:#d6a23a}
.ch-target select{margin-left:6px;padding:5px 9px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font:500 12.5px/1.2 var(--ui)}
.field .pa-opt, .pa-opt span{text-transform:none;letter-spacing:normal;font:400 13px/1.45 var(--ui)}
.pa-opt b{font-weight:600}