/* Tool hub: floating tool search, favourite stars, My Favourites, admin custom header buttons */

/* floating search button — sits just above the help bot (.cpbot.hb: head 62px at bottom 52px + body; mobile scaled .84 at bottom 44px) */
.ts-fab{position:fixed;right:22px;bottom:134px;z-index:59;width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  color:#fff;font-size:20px;background:linear-gradient(135deg,#2563eb,#7c3aed);box-shadow:0 8px 22px rgba(79,70,229,.45);transition:transform .18s,box-shadow .18s}
.ts-fab::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(124,58,237,.45);animation:tsRing 2.4s ease-out infinite}
.ts-fab:hover{transform:scale(1.08);box-shadow:0 12px 28px rgba(79,70,229,.55)}
.ts-fab.nobot{bottom:18px}
@keyframes tsRing{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.35);opacity:0}}
@media (max-width:760px){.ts-fab{right:15px;bottom:110px;width:48px;height:48px;font-size:18px}.ts-fab.nobot{bottom:14px}}
body.ts-lock{overflow:hidden}

/* search popup (base modal rules repeated here so the landing page, which has no app.css, works too) */
.ts-modal{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;justify-content:center;z-index:100;padding:16px}
.ts-modal.open{display:flex}
.ts-modal{align-items:flex-start;padding-top:9vh}
.ts-box{background:#fff;border-radius:18px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.ts-box{max-width:600px;display:flex;flex-direction:column;max-height:78vh;overflow:hidden;animation:tsIn .2s ease-out}
@keyframes tsIn{from{transform:translateY(-12px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.ts-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.ts-head>i{color:#7c3aed;font-size:18px}
.ts-head input{flex:1;min-width:0;border:0;outline:0;font:500 16px var(--font);color:var(--ink);background:transparent;padding:6px 0}
.ts-head .x{border:0;background:#f3f4f6;width:32px;height:32px;border-radius:9px;font-size:20px;cursor:pointer;color:#374151}
.ts-meta{padding:8px 18px 4px;font-size:12.5px;color:var(--muted)}.ts-meta .fa-star{color:#f59e0b}
.ts-list{overflow-y:auto;padding:4px 10px 12px}
.ts-item{position:relative;display:flex;align-items:center;gap:12px;padding:9px 46px 9px 10px;border-radius:12px;color:var(--ink)}
.ts-item:hover,.ts-item.on{background:#f5f3ff}
.ts-pic{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:11px;background:#fff;border:1px solid var(--line);overflow:hidden}
.ts-pic img{width:100%;height:100%;object-fit:contain;padding:3px}.ts-pic i{color:var(--green,#059669);font-size:18px}
.ts-txt{display:flex;flex-direction:column;min-width:0}.ts-txt b{font-weight:600;font-size:14.5px}.ts-txt small{color:var(--muted);font-size:12px}
.ts-txt mark{background:#fde68a;color:inherit;border-radius:3px;padding:0 1px}
.ts-go{margin-left:auto;color:#c4b5fd;font-size:12px}
.ts-empty{text-align:center;color:var(--muted);padding:28px 10px}.ts-empty i{font-size:26px;color:#a78bfa;margin-bottom:6px}

/* favourite star on cards / search results */
[data-fav]{position:relative}
.fav-star{position:absolute;right:10px;bottom:10px;z-index:3;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:#fff;border:1px solid #e5e7eb;color:#9ca3af;font-size:14px;box-shadow:0 2px 6px rgba(0,0,0,.08);transition:transform .15s,color .15s}
.fav-star:hover{color:#f59e0b;transform:scale(1.12)}
.fav-star.on{color:#f59e0b;border-color:#fcd34d;background:#fffbeb}
.fav-star.pop{animation:favPop .45s}
.fav-star.busy{opacity:.5;pointer-events:none}
.ts-item .fav-star{top:50%;bottom:auto;margin-top:-15px}
.ts-item .ts-go{display:none}
@keyframes favPop{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
@media (max-width:640px){.fav-star{right:6px;bottom:6px;width:27px;height:27px;font-size:12.5px}}

/* My Favourites section + sidebar badge */
.fav-badge{background:linear-gradient(135deg,#f59e0b,#ea580c);animation:none}
.pc-grp{font-size:10.5px;padding:3px 9px;background:linear-gradient(135deg,#6366f1,#8b5cf6);box-shadow:none;max-width:calc(100% - 90px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcards-fav .pcard{background:linear-gradient(160deg,#fff 0%,#fffbeb 55%,#fef3c7 100%) padding-box,linear-gradient(135deg,#fcd34d,#f59e0b,#fb923c) border-box}
.fav-empty{display:none;text-align:center;color:var(--muted);padding:18px 10px}
.fav-empty i{color:#f59e0b}
#myFav.is-empty .fav-empty{display:block}
#myFav.is-empty .pcards-fav{display:none}

/* admin-added header buttons */
.ibtn-custom,.pill-custom{color:#fff}
.ibtn-custom img{width:20px;height:20px;object-fit:contain;border-radius:4px}
.pill-custom img{width:18px;height:18px;object-fit:contain;border-radius:4px;vertical-align:-4px}
.ibtn.srch{background:linear-gradient(135deg,#2563eb,#7c3aed)}

/* #32 wrong-input catcher (assets/js/input-check.js) */
.in-bad{border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.15)!important}
.in-ok{border-color:#10b981!important}
.searchbox:has(.in-bad){border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.15)}
.searchbox:has(.in-ok){border-color:#10b981}
.in-hint{color:#dc2626;font-size:12.5px;font-weight:500;margin-top:5px;text-align:left;animation:cpPop .25s}
html[data-theme="dark"] .in-hint{color:#fca5a5}

/* stick (pin) button on cards — left of the favourite star, same bottom-right corner */
.pin-btn{position:absolute;left:10px;top:10px;z-index:4;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:#fff;border:1px solid #e5e7eb;color:#9ca3af;font-size:13px;box-shadow:0 2px 6px rgba(0,0,0,.08);transition:transform .15s,color .15s}
.pin-btn i{transform:rotate(30deg)}
.pin-btn:hover{color:#2563eb;transform:scale(1.12)}
.pin-btn.on{color:#fff;background:linear-gradient(135deg,#2563eb,#7c3aed);border-color:transparent}
.pin-btn.on i{transform:none}
.pin-btn.busy{opacity:.5;pointer-events:none}
/* when a rank badge (#1, #2…) sits in the top-left, drop the pin to the free bottom-left corner */
[data-fav]:has(.ft-rank) .pin-btn,[data-fav]:has(.pc-rank) .pin-btn{top:auto;bottom:10px}
/* search-result rows: keep the pin next to the star on the right (left side has the tool icon) */
.ts-item{padding-right:84px}
.ts-item .pin-btn{left:auto;right:46px;top:50%;bottom:auto;margin-top:-15px}
@media (max-width:640px){.pin-btn{left:6px;top:6px;width:27px;height:27px;font-size:12px}.ts-item .pin-btn{left:auto;right:38px}}

/* stuck tools: a column of round buttons stacked above the search button (which sits above the bot) */
.pin-dock{position:fixed;right:21px;bottom:194px;z-index:58;display:flex;flex-direction:column-reverse;gap:9px;max-height:calc(100vh - 290px);overflow-y:auto;padding:8px 4px 4px 8px;scrollbar-width:none}
.pin-dock[hidden]{display:none}
.pin-dock.nobot{bottom:82px}
.pin-fab{position:relative;width:44px;height:44px;flex:none}
.pin-fab>a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid #c7d2fe;box-shadow:0 6px 16px rgba(37,99,235,.25);overflow:hidden;transition:transform .15s}
.pin-fab>a:hover{transform:scale(1.1)}
.pin-fab img{width:100%;height:100%;object-fit:contain;padding:5px}
.pin-fab>a i{color:#2563eb;font-size:18px}
.pin-fab.new>a{animation:pinIn .6s cubic-bezier(.28,.84,.42,1)}
@keyframes pinIn{0%{transform:scale(0) translateY(20px)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
.pin-x{position:absolute;left:-5px;top:-5px;width:19px;height:19px;border-radius:50%;border:0;background:#ef4444;color:#fff;font-size:14px;line-height:19px;padding:0;cursor:pointer;opacity:0;transform:scale(.6);transition:.15s;box-shadow:0 2px 5px rgba(0,0,0,.25)}
.pin-fab:hover .pin-x,.pin-x:focus{opacity:1;transform:none}
.pin-name{position:fixed;right:84px;margin-top:-34px;background:#111827;color:#fff;font-size:12px;font-weight:600;padding:5px 10px;border-radius:8px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s}
.pin-fab:hover .pin-name{opacity:1}
@media (hover:none){.pin-x{opacity:1;transform:none}}
@media (max-width:760px){.pin-dock{right:13px;bottom:156px;max-height:calc(100vh - 240px)}.pin-dock.nobot{bottom:70px}.pin-fab,.pin-fab>a{width:40px;height:40px}}
html[data-theme="dark"] .pin-btn,html[data-theme="dark"] .pin-fab>a{background:#1f2937;border-color:#374151}