/* Content Hub: the Client HQ look (body[data-area="hq"]) with a purple accent. Scoped to body[data-sub="content"]. */
body[data-sub="content"]{--brand:#8b5cf6;--brand-ink:#c4b5fd;--brand-soft:rgba(139,92,246,.2);
  --st-idea:#a89f93;--st-scripted:#38bdf8;--st-filmed:#fbbf24;--st-posted:#4CC38A}
body[data-sub="content"] .hq-logo b{background:var(--brand)}
body[data-sub="content"] .btn.brand{background:var(--brand);color:#fff;box-shadow:0 10px 30px -12px rgba(139,92,246,.8)}
body[data-sub="content"] .seg button[aria-pressed="true"]{background:var(--ink);color:#0c0a09;border-color:var(--ink)}
body[data-sub="content"] select.input{appearance:auto}
.ch .linkbtn{background:none;border:0;padding:0;color:var(--brand-ink);font:600 14px var(--body);cursor:pointer}
.ch .linkbtn:hover{text-decoration:underline}

.ch-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.ch-head h1{margin:0}
.ch-stats{display:flex;gap:8px;flex-wrap:wrap}
.ch-stats span{background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:7px 12px;font-size:13px;color:var(--muted)}
.ch-stats b{font:700 15px var(--mono);color:var(--ink);margin-right:3px}
.ch-k{font:700 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink)}
.ch-foot{text-align:center;margin:8px 0 0}
.ch .ch-search{width:220px;max-width:100%}
.ch .ch-sel{width:auto;max-width:100%;min-width:0;flex:0 1 auto}

/* Brain dump */
.ch-dump{padding:16px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;border-color:rgba(139,92,246,.45);background:radial-gradient(120% 160% at 100% 0%,rgba(139,92,246,.16),transparent 55%),var(--surface)}
.ch-dump textarea{min-height:76px;resize:vertical;font:15px/1.55 var(--body)}
.ch-mic{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:99px;padding:6px 12px;font:600 13px var(--body);cursor:pointer}
.ch-mic i{width:8px;height:8px;border-radius:50%;background:var(--brand)}
.ch-mic.on{background:var(--brand);border-color:var(--brand)}
.ch-mic.on i{background:#fff;animation:chPulse 1.1s ease-in-out infinite}
@keyframes chPulse{50%{opacity:.3}}

/* Pillar board: masonry columns, so short pillars don't leave holes */
.ch-board{columns:3 300px;column-gap:16px}
.ch-pillar{break-inside:avoid;margin:0 0 16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;min-width:0;padding:4px 0 2px}
.ch-pillar.over{border-color:var(--pc);box-shadow:0 0 0 3px color-mix(in srgb,var(--pc) 30%,transparent)}
.ch-pillar header{display:flex;align-items:center;gap:10px;padding:12px 16px 8px}
.ch-pillar header i{width:9px;height:9px;border-radius:50%;background:var(--pc);flex:none;box-shadow:0 0 12px var(--pc)}
.ch-pillar h3{margin:0;font:600 15px/1.3 var(--body);letter-spacing:0;flex:1}
body[data-area="hq"] .ch-pillar h3{font-family:var(--body);letter-spacing:0}
.ch-pillar .n{font:500 13px var(--body);color:var(--muted)}
.ch-list{display:grid;gap:0;padding:0 6px}
.ch-none{color:var(--muted);font-size:13px;padding:4px 10px 8px;margin:0}
.ch-quick{display:flex;gap:6px;align-items:center;padding:2px 6px 6px}
.ch-quick input{flex:1;min-width:0;background:transparent;border:0;border-radius:10px;padding:9px 10px;color:var(--ink);font:500 14px var(--body);outline:none}
.ch-quick input::placeholder{color:var(--muted);opacity:.7}
.ch-quick input:hover,.ch-quick input:focus{background:var(--raise)}
.ch-quick input:hover::placeholder{opacity:1}
.ch-quick .btn{display:none;padding:6px 12px;font-size:13px}
.ch-quick:focus-within .btn{display:inline-flex}

.ch-idea{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;min-width:0}
.ch-idea:hover{background:var(--raise)}
.ch-idea.drag{opacity:.35}
.ch-idea[draggable="true"]{cursor:grab}
.ch-t{flex:1;min-width:0;text-align:left;background:none;border:0;padding:2px 0;color:var(--ink);font:500 14.5px/1.4 var(--body);cursor:pointer}
.ch-pillar .ch-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.ch-t small{display:block;font-weight:400;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.ch-dotbtn{flex:none;width:12px;height:12px;border-radius:50%;padding:0;cursor:pointer;border:1.5px solid var(--st-idea);background:transparent;opacity:.7}
.ch-dotbtn:hover{opacity:1;transform:scale(1.2)}
.ch-dotbtn.st-scripted{border-color:var(--st-scripted);background:var(--st-scripted);opacity:1}
.ch-dotbtn.st-filmed{border-color:var(--st-filmed);background:var(--st-filmed);opacity:1}
.ch-dotbtn.st-posted{border-color:var(--st-posted);background:var(--st-posted);opacity:1}
.ch-tag{flex:none;font:600 11.5px var(--body);background:none!important}
.ch-st{flex:none;border:0;border-radius:99px;padding:3px 8px;font:700 10.5px var(--body);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;min-width:66px}
.st-idea{background:rgba(168,159,147,.16);color:var(--st-idea)}
.st-scripted{background:rgba(56,189,248,.15);color:var(--st-scripted)}
.st-filmed{background:rgba(251,191,36,.15);color:var(--st-filmed)}
.st-posted{background:rgba(76,195,138,.15);color:var(--st-posted)}
body[data-sub="content"] .seg button.st-idea[aria-pressed="true"]{background:var(--st-idea);border-color:var(--st-idea);color:#0c0a09}
body[data-sub="content"] .seg button.st-scripted[aria-pressed="true"]{background:var(--st-scripted);border-color:var(--st-scripted);color:#0c0a09}
body[data-sub="content"] .seg button.st-filmed[aria-pressed="true"]{background:var(--st-filmed);border-color:var(--st-filmed);color:#0c0a09}
body[data-sub="content"] .seg button.st-posted[aria-pressed="true"]{background:var(--st-posted);border-color:var(--st-posted);color:#0c0a09}
.ch-fmt{flex:none;font:500 12px var(--body);color:var(--muted)}
.ch-has{flex:none;color:var(--muted);font-size:13px}
.ch-star{flex:none;background:none;border:0;cursor:pointer;font-size:15px;line-height:1;color:rgba(245,238,226,.35);padding:4px;opacity:0}
.ch-idea:hover .ch-star,.ch-star:focus-visible,.ch-star.on{opacity:1}
@media (hover:none){.ch-star{opacity:1;color:rgba(245,238,226,.18)}}
.ch-star:hover{color:rgba(245,238,226,.5)}
.ch-star.on{color:#fbbf24}

/* Up next / Posted */
.ch-rows{padding:6px}
.ch-idea.wide{padding:10px}
.ch-idea.wide+.ch-idea.wide{border-top:1px solid var(--line);border-radius:0}
.ch-num{flex:none;width:24px;font:700 14px var(--mono);color:var(--muted);text-align:center}
.ch-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:0}
.ch-move{display:flex;gap:4px;flex:none}
.ch-move button{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:8px;width:30px;height:28px;cursor:pointer}
.ch-move button:hover:not(:disabled){color:var(--ink);border-color:var(--ink)}
.ch-move button:disabled{opacity:.25;cursor:default}
.ch-month{font:600 18px var(--display);margin:6px 0 -6px}
.ch-month span{font:600 13px var(--mono);color:var(--muted);margin-left:6px}

/* Modal */
.ch-modal{max-width:560px;gap:12px}
.ch-x{background:none;border:0;color:var(--muted);font-size:16px;cursor:pointer;padding:4px}
.ch-title{font:600 19px var(--display)}
.ch-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.ch-two{grid-template-columns:1fr}}
.ch-modal .check{border:0;padding:4px 0}
.ch-modal textarea{resize:vertical;font:14.5px/1.55 var(--body)}
.ch-url{margin:0;word-break:break-all}
.ch-lucky-t{margin:0;font:600 20px var(--display)}

/* Inspo: add */
.ch-add{padding:14px;display:grid;gap:12px}
.ch-add .row>.input{flex:1 1 260px}
.ch-chips{display:flex;flex-wrap:wrap;gap:6px}
.ch-chips .chip{font-size:13px;padding:6px 11px}
.ch-newf{max-width:220px}
.ch-dup{background:rgba(251,191,36,.12);color:#fde68a;border-radius:10px;padding:9px 12px;font-size:14px}

/* Inspo: folders */
.ch-folders{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.ch-folder{position:relative;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 14px 14px;cursor:pointer;color:var(--ink);overflow:hidden;display:grid;gap:4px;transition:transform .12s,border-color .12s}
.ch-folder::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--fc,var(--brand))}
.ch-folder:hover{transform:translateY(-2px);border-color:var(--fc,var(--brand))}
.ch-folder b{font:600 16px/1.25 var(--display)}
.ch-folder span{font-size:13px;color:var(--muted)}
.ch-folder.smart{background:transparent;border-style:dashed}
.ch-folder.smart::before{display:none}

/* Inspo: list */
.ch-crumb h2{margin:0;font:600 22px var(--display)}
.ch-ins{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:10px;align-items:start}
.ch-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;gap:10px;min-width:0}
.ch-card-top{display:flex;gap:12px;align-items:flex-start}
.ch-thumb{flex:none;width:58px;height:74px;border-radius:10px;border:0;cursor:pointer;display:grid;place-items:center;position:relative;color:#fff;font:800 11px var(--body);letter-spacing:.06em}
.ch-thumb span{position:absolute;top:6px;left:0;right:0;text-align:center;opacity:.85}
.ch-thumb svg{width:22px;height:22px;fill:#fff;margin-top:12px}
.ch-thumb.p-instagram{background:linear-gradient(150deg,#f58529,#dd2a7b 50%,#8134af)}
.ch-thumb.p-tiktok{background:linear-gradient(150deg,#25f4ee,#111 45%,#fe2c55)}
.ch-thumb.p-youtube{background:#e0282f}
.ch-thumb.p-other{background:var(--raise);color:var(--muted)}
.ch-thumb.p-other svg{fill:var(--muted)}
.ch-card-main{flex:1;min-width:0}
.ch-note{margin:0;font-weight:600;font-size:14.5px;line-height:1.4;overflow-wrap:anywhere}
.ch-meta{margin:5px 0 0;font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.ch-tag{background:var(--raise);border:1px solid var(--line);color:var(--muted);border-radius:99px;padding:1px 8px;font-size:11.5px;cursor:pointer}
.ch-tag:hover{color:var(--ink);border-color:var(--brand)}
.ch-used{display:inline-block;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--brand-ink);text-decoration:none}
.ch-acts{display:flex;gap:6px;flex-wrap:wrap}
.ch-prev{display:grid;justify-items:center}
.ch-embed{width:100%;max-width:400px;aspect-ratio:16/9;border:0;border-radius:10px;background:#000}
.ch-embed.tall{aspect-ratio:auto;height:min(640px,75vh)}
@media (max-width:560px){.ch-ins{grid-template-columns:1fr}.ch .ch-search{width:100%}}

/* Captions (CapCut caption splitter) */
.cap-list{display:grid;gap:8px}
.cap-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.cap-name{flex:1 1 220px;min-width:0}
.cap-name b{display:block;font:600 15px/1.3 var(--body);overflow-wrap:anywhere}
.cap-name small{color:var(--muted);font-size:12.5px}
.cap-tag{flex:none;border-radius:99px;padding:3px 10px;font:700 11px var(--body);letter-spacing:.03em}
.cap-tag.need{background:var(--brand-soft);color:var(--brand-ink)}
.cap-tag.ok{background:rgba(76,195,138,.15);color:#4CC38A}
.cap-tag.none{background:var(--raise);color:var(--muted)}
.cap-btns{display:flex;gap:6px;flex:none}
.cap-btns .btn{padding:6px 14px}
.cap-warn{padding:12px 14px;border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.08);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cap-warn .btn{padding:5px 12px;margin-left:auto}
.cap-msg{padding:16px;display:grid;gap:10px;justify-items:start}
.cap-msg p{margin:0}
.cap-all{display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.cap-prev{max-height:50vh;overflow-y:auto;display:grid;gap:2px;margin:10px 0 14px;border:1px solid var(--line);border-radius:12px;padding:8px}
.cap-prev div{display:flex;gap:12px;padding:4px 6px;font:600 15px var(--body)}
.cap-prev span{font:500 12px var(--mono);color:var(--muted);min-width:40px;padding-top:2px}

/* Post (#/post, public/post.js) */
.po-side{align-self:flex-start}
.po-accts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.po-acct{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:99px;padding:6px 11px;font-size:13px;color:var(--muted)}
.po-acct i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.po-acct.on{color:var(--ink)}
.po-acct.on i{background:var(--st-posted);box-shadow:0 0 8px var(--st-posted)}
.po-warn{padding:14px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;border-color:rgba(139,92,246,.45)}
.po-drop{display:grid;gap:4px;place-items:center;text-align:center;padding:30px 16px;border:2px dashed var(--line);cursor:pointer;background:radial-gradient(120% 160% at 100% 0%,rgba(139,92,246,.12),transparent 55%),var(--surface)}
.po-drop b{font-size:17px}
.po-drop:hover,.po-drop.over{border-color:var(--brand)}
.po-up{padding:14px 16px;display:grid;gap:10px}
.po-bar{height:8px;border-radius:99px;background:var(--raise);overflow:hidden}
.po-bar i{display:block;height:100%;background:var(--brand);transition:width .3s}
.po-ed{padding:16px;display:grid;gap:16px}
.po-top{display:grid;grid-template-columns:180px minmax(0,1fr);gap:16px;align-items:start}
.po-vid{width:100%;aspect-ratio:9/16;border-radius:12px;background:#000;object-fit:contain}
.po-vid.none{display:grid;place-items:center;padding:10px;color:var(--muted);font-size:13px;text-align:center;word-break:break-all}
.po-about{gap:10px;min-width:0}
.po-name{word-break:break-all}
.po-note{margin:0;padding:8px 12px;border-radius:10px;background:rgba(251,191,36,.12);color:#fde68a;font-size:13px}
.po-plats{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.po-plat{border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;gap:8px;align-content:start;min-width:0}
.po-plat.off{opacity:.55}
.po-plat textarea{min-height:120px;font:14px/1.5 var(--body)}
.po-tog{display:flex;gap:8px;align-items:center;cursor:pointer}
.po-st{font-size:13px;font-weight:600}
.po-st.done{color:var(--st-posted)}
.po-st.work{color:var(--st-filmed)}
.po-st.bad{color:#f87171}
.po-st a{color:inherit}
.po-err{margin:0;font-size:13px;color:#fca5a5}
.po-inline{display:flex;gap:8px;align-items:center;color:var(--muted)}
.po-tt{display:grid;gap:8px}
.po-tt p{margin:0}
.po-checks{gap:14px}
.po-go{padding-top:4px}
.po-go .btn.big{padding:12px 22px;font-size:15px}
.po-h{margin:8px 0 0;font-size:18px}
.po-list{display:grid;gap:6px}
.po-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;color:var(--ink);cursor:pointer;text-align:left;font:inherit}
.po-row.open{border-color:var(--brand)}
.po-rn{min-width:0;display:grid}
.po-rn b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.po-rn small{color:var(--muted)}
.po-chips{display:flex;gap:4px;flex:none}
.po-chip{font-size:11px;font-weight:700;padding:3px 7px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.po-chip.done{background:rgba(76,195,138,.15);border-color:var(--st-posted);color:var(--st-posted)}
.po-chip.working{border-color:var(--st-filmed);color:var(--st-filmed)}
.po-chip.error{border-color:#f87171;color:#f87171}
.po-setup{max-width:640px}
.po-setup details{border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.po-setup summary{cursor:pointer;font-size:15px}
.po-setup ol{padding-left:20px;display:grid;gap:8px;font-size:14px;line-height:1.5}
.po-setup a{color:var(--brand-ink)}
.po-copy{display:inline-flex;gap:6px;align-items:center;max-width:100%;margin-top:2px}
.po-copy code{background:var(--raise);border-radius:6px;padding:3px 7px;font-size:12px;word-break:break-all}
.po-setup.phil ol,.po-setup.phil .po-keys{display:none}
.po-keys.po-cfg{grid-template-columns:1fr auto}
.po-keys{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end;margin:10px 0}
@media (max-width:640px){
  .po-top{grid-template-columns:1fr}
  .po-vid{max-height:360px}
  .po-keys{grid-template-columns:1fr}
}

/* Creator: one big button per tool */
.cr-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.cr-tool{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:20px;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:transform .15s,border-color .15s}
.cr-tool:hover{transform:translateY(-3px);border-color:var(--brand)}
.cr-tool b{font:600 22px/1.15 var(--display)}
.cr-tool p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5;flex:1}
.cr-icon{width:52px;height:52px;border-radius:14px;background:var(--brand-soft);display:grid;place-items:center}
.cr-icon svg{width:30px;height:30px;fill:none;stroke:var(--brand-ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cr-go{font:700 13px var(--body);color:var(--brand-ink)}

/* Drone grade */
.dr-chip{border-radius:99px;padding:6px 12px;font:600 12.5px var(--body);background:var(--raise);color:var(--muted)}
.dr-chip.ok{background:rgba(76,195,138,.15);color:#4CC38A}
.dr-job{display:flex;gap:12px;align-items:flex-start;padding:14px 16px}
.dr-job small{display:block;color:var(--muted);font:500 12px var(--mono);overflow-wrap:anywhere}
.dr-spin{flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;border:2.5px solid var(--brand-soft);border-top-color:var(--brand);animation:drSpin .8s linear infinite}
@keyframes drSpin{to{transform:rotate(360deg)}}
.dr-empty{padding:18px}
.dr-empty p{margin:0}
.dr-done{display:flex;align-items:center;gap:12px;padding:14px 16px;border-color:rgba(76,195,138,.45);background:rgba(76,195,138,.07);flex-wrap:wrap}
.dr-done div{flex:1;min-width:0}
.dr-done b{display:block}
.dr-done small{color:var(--muted);font:500 12px var(--mono);overflow-wrap:anywhere}
.dr-sum{gap:10px;flex-wrap:wrap}
.dr-why{margin:-6px 0 0;text-align:right}
.dr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.dr-clip{display:grid;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:8px}
.dr-clip small{font-size:12px;padding:0 4px}
.dr-pic{position:relative;border-radius:10px;overflow:hidden;background:#000}
.dr-pic img{display:block;width:100%;height:auto}
.dr-pic span{position:absolute;bottom:6px;font:700 10px var(--body);letter-spacing:.06em;text-transform:uppercase;background:rgba(0,0,0,.55);color:#fff;padding:2px 6px;border-radius:6px}
.dr-pic .l{left:6px}
.dr-pic .r{left:calc(50% + 6px)}
.dr-pic::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(255,255,255,.5)}
.dr-name{font-size:14px;padding:8px 10px}
.dr-skip summary{cursor:pointer;padding:4px 0}
.dr-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.dr-thumbs figure{margin:0;width:72px}
.dr-thumbs img{width:100%;border-radius:8px;display:block;opacity:.75}
.dr-thumbs figcaption{font:500 10.5px var(--mono);color:var(--muted);text-align:center;margin-top:2px}
.dr-pic.one span,.dr-pic.one::after{display:none}
