/* ═══════════════════════════════════════════════════════
   FileVault Tools Registry CSS v4
   Share · Follow · Comments · Premium · Visitor · Ads
   ═══════════════════════════════════════════════════════ */

/* ── Share Button ─────────────────────────────────────── */
.fv-share-wrap,.fv-follow-wrap{position:relative;display:inline-block}
.fv-share-panel,.fv-follow-panel{position:absolute;bottom:calc(100% + 8px);right:0;background:var(--s2);border:1px solid var(--b2);border-radius:18px;padding:16px;min-width:320px;max-width:360px;box-shadow:0 8px 40px rgba(0,0,0,.6);z-index:800;display:none;animation:fpIn .2s ease both}
.fv-share-panel.show,.fv-follow-panel.show{display:block}
@keyframes fpIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.fv-share-title{font-family:var(--fd);font-weight:700;font-size:.86rem;margin-bottom:12px;color:var(--t2)}
.fv-share-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.fv-share-item{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 6px;background:var(--s3);border:1px solid var(--b1);border-radius:12px;font-size:.68rem;color:var(--t2);text-decoration:none;transition:all .18s;cursor:pointer;text-align:center}
.fv-share-item:hover{background:color-mix(in srgb,var(--sc) 14%,transparent);border-color:color-mix(in srgb,var(--sc) 35%,transparent);color:var(--sc);transform:translateY(-2px)}
.fv-share-item span:first-child{font-size:1.3rem}

/* ── QR Modal ──────────────────────────────────────────── */
.fv-qr-modal{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:9000;display:none;align-items:center;justify-content:center;padding:20px}
.fv-qr-inner{background:var(--s2);border:1px solid var(--b2);border-radius:22px;padding:22px;max-width:320px;width:100%}
.fv-qr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.fv-qr-title{font-family:var(--fd);font-weight:700;font-size:.95rem}

/* ── Follow Panel ──────────────────────────────────────── */
.fv-follow-grid{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto}
.fv-follow-item{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--s3);border:1px solid var(--b1);border-radius:10px;font-size:.83rem;color:var(--t2);text-decoration:none;transition:all .18s}
.fv-follow-item:hover{background:color-mix(in srgb,var(--fc) 12%,transparent);border-color:color-mix(in srgb,var(--fc) 30%,transparent);color:var(--fc)}
.fv-follow-item span:first-child{font-size:1.1rem;width:22px;text-align:center}

/* ── Visitor Counter ───────────────────────────────────── */
.fv-visitor-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;background:var(--s2);border:1px solid var(--b1);border-radius:99px;font-size:.72rem;color:var(--t3);font-family:var(--fm)}
.fv-visitor-badge svg{opacity:.5}

/* ── Page Footer Bar ───────────────────────────────────── */
.fv-page-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:14px 0;border-top:1px solid var(--b1);margin-top:24px}
.fv-page-footer-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ── Comments ──────────────────────────────────────────── */
.fv-comments-wrap{background:var(--s1);border:1px solid var(--b1);border-radius:var(--rl);padding:20px;margin-top:16px}
.fv-comments-title{font-family:var(--fd);font-weight:700;font-size:1rem;margin-bottom:16px;display:flex;align-items:center;gap:8px}
#fv-comments-list{display:flex;flex-direction:column;gap:12px;margin-bottom:16px;max-height:400px;overflow-y:auto}
.fv-comment{display:flex;gap:11px;align-items:flex-start}
.fv-comment-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--a2));display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:#fff;flex-shrink:0;cursor:pointer;text-transform:uppercase}
.fv-comment-body{flex:1;background:var(--s2);border:1px solid var(--b1);border-radius:12px;padding:10px 13px}
.fv-comment-head{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.fv-comment-name{font-weight:600;font-size:.82rem;cursor:pointer;color:var(--ac)}
.fv-comment-name:hover{text-decoration:underline}
.fv-comment-time{font-size:.7rem;color:var(--t3);font-family:var(--fm);margin-left:auto}
.fv-comment-text{font-size:.84rem;color:var(--t2);line-height:1.6;word-break:break-word}
.fv-comment-form{display:flex;gap:10px;align-items:flex-start;padding-top:12px;border-top:1px solid var(--b1)}
.fv-badge-plan{padding:2px 7px;border-radius:99px;font-size:.6rem;font-family:var(--fm);font-weight:700;background:rgba(79,139,255,.15);color:var(--ac);border:1px solid rgba(79,139,255,.25)}

/* ── Premium Gate ──────────────────────────────────────── */
#fv-premium-gate{animation:fadeIn .25s ease both}
.fv-plan-card{background:var(--s1);border:1px solid var(--b1);border-radius:14px;padding:14px;text-align:left}
.fv-plan-card.featured{border-color:var(--ac)}

/* ── Ads slot ──────────────────────────────────────────── */
#fv-ad-slot{margin:16px 0;min-height:60px;border-radius:var(--r);overflow:hidden;background:var(--s2);border:1px solid var(--b1)}

/* ── Plan badges on tools ──────────────────────────────── */
.tsb-a.locked{opacity:.55}
.tsb-a.locked:hover{opacity:.8}

/* ── Mobile share/follow ───────────────────────────────── */
@media(max-width:480px){
  .fv-share-panel,.fv-follow-panel{position:fixed;bottom:0;left:0;right:0;border-radius:20px 20px 0 0;min-width:unset;max-width:unset;z-index:9000}
  .fv-share-grid{grid-template-columns:repeat(4,1fr)}
}

/* ── Tool plan badge ───────────────────────────────────── */
.tool-plan-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:99px;font-size:.65rem;font-family:var(--fm);font-weight:700;margin-left:8px}
.tool-plan-badge.free{background:rgba(0,224,152,.1);color:var(--grn);border:1px solid rgba(0,224,152,.2)}
.tool-plan-badge.basic{background:rgba(79,139,255,.1);color:var(--ac);border:1px solid rgba(79,139,255,.2)}
.tool-plan-badge.pro{background:rgba(155,89,255,.1);color:var(--a2);border:1px solid rgba(155,89,255,.2)}
.tool-plan-badge.ai{background:rgba(255,107,53,.1);color:#ff6b35;border:1px solid rgba(255,107,53,.2)}

/* ── Profile link ──────────────────────────────────────── */
.fv-profile-link{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;background:var(--s2);border:1px solid var(--b1);border-radius:99px;font-size:.78rem;color:var(--t2);cursor:pointer;transition:var(--tr)}
.fv-profile-link:hover{border-color:var(--ac);color:var(--ac)}