/* VTracerTool widget styles — namespaced .vt- to avoid clashing with page CSS */
.vt-card{max-width:920px;margin:0 auto;background:#fff;border-radius:14px;box-shadow:0 4px 18px rgba(0,0,0,.10);overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#333}
.vt-card *{box-sizing:border-box}
.vt-head{display:flex;align-items:center;gap:10px;padding:16px 22px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:17px;font-weight:700}
.vt-dot{width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.25)}
.vt-title{flex:1}

.vt-drop{padding:40px 24px;text-align:center;border:2px dashed #c7cdf0;border-radius:0;background:#fafbff;cursor:pointer;transition:background .15s,border-color .15s}
.vt-drop.vt-drag{border-color:#667eea;background:#eef1ff}
.vt-drop-ico{font-size:40px;line-height:1;margin-bottom:10px}
.vt-drop-title{font-size:18px;font-weight:700;color:#333}
.vt-drop-sub{font-size:14px;color:#888;margin:4px 0 16px}
.vt-btn{display:inline-block;padding:11px 26px;background:#667eea;color:#fff;border:none;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s;text-decoration:none}
.vt-btn:hover{background:#5568d3}
.vt-choose{cursor:pointer}
.vt-note{margin-top:14px;font-size:12px;color:#999}
.vt-note-extra{color:#b45309;background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;padding:8px 12px;display:inline-block;margin-top:8px}

.vt-filters{padding:18px 22px;border-top:1px solid #eee}
.vt-filters-title{font-size:15px;font-weight:700;margin:0 0 12px;color:#333}
.vt-filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.vt-fbtn{padding:11px 14px;border:2px solid #e2e6f5;background:#fff;color:#555;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s}
.vt-fbtn:hover{border-color:#667eea;color:#667eea}
.vt-fbtn.active{background:#667eea;border-color:#667eea;color:#fff}

.vt-adv-grid{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 22px}
.vt-adv{font-size:13px}
.vt-adv-label{display:flex;justify-content:space-between;color:#555;font-weight:600;margin-bottom:6px}
.vt-adv-val{color:#667eea}
.vt-adv-range{width:100%;accent-color:#667eea}

.vt-preview{padding:18px 22px;border-top:1px solid #eee}
.vt-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.vt-box{background:#f8f9fb;border:1px solid #eceef5;border-radius:10px;padding:14px}
.vt-label{font-size:13px;font-weight:700;color:#444;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.vt-size{font-weight:400;color:#888;font-size:12px}
.vt-checker{background:repeating-conic-gradient(#eee 0% 25%,#fff 0% 50%) 50%/18px 18px;display:flex;align-items:center;justify-content:center;min-height:200px;border-radius:6px;padding:8px}
.vt-img{max-width:100%;max-height:240px;border-radius:4px;background:#fff}
.vt-svg{background:repeating-conic-gradient(#eee 0% 25%,#fff 0% 50%) 50%/18px 18px;min-height:200px;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:8px}
.vt-svg svg{max-width:100%;max-height:240px;width:auto;height:auto;background:#fff;border-radius:4px}
.vt-spin-wrap{padding:30px;text-align:center;color:#667eea;font-size:13px}
.vt-spin{width:30px;height:30px;border:3px solid #e6e8f5;border-top-color:#667eea;border-radius:50%;animation:vtspin .8s linear infinite;margin:0 auto 10px}
@keyframes vtspin{to{transform:rotate(360deg)}}
.vt-err{color:#e74c3c;font-size:13px;text-align:center;padding:20px;line-height:1.6}
.vt-err a{color:#667eea;text-decoration:underline}

.vt-actions{padding:18px 22px;background:#f8f9fa;border-top:1px solid #eee;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.vt-actions .vt-up{background:#7c3aed}
.vt-actions .vt-up:hover{background:#6d28d9}
.vt-actions .vt-another{background:#667eea}
.vt-actions .vt-reset{background:#6c757d}
.vt-actions .vt-reset:hover{background:#5a6268}

.vt-upsell{margin:0;padding:26px 22px;text-align:center;color:#fff;background:linear-gradient(135deg,#1a1a2e,#0f3460)}
.vt-upsell-tag{font-size:12px;font-weight:700;color:#a78bfa;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.vt-upsell-title{font-size:20px;font-weight:800;margin-bottom:10px}
.vt-upsell-copy{font-size:14px;color:rgba(255,255,255,.82);line-height:1.6;max-width:620px;margin:0 auto 18px}
.vt-upsell-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.vt-upsell-mac{padding:12px 26px;background:#fff;color:#1a1a2e;border-radius:10px;font-size:14px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.vt-upsell-win{padding:12px 26px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:10px;font-size:14px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.vt-upsell-note{font-size:12px;color:rgba(255,255,255,.5)}

.vt-toast{position:fixed;top:100px;right:20px;background:#27ae60;color:#fff;padding:10px 20px;border-radius:8px;font-size:13px;font-weight:600;display:none;z-index:99999;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.vt-toast.show{display:block}

@media(max-width:768px){
  .vt-preview-grid{grid-template-columns:1fr}
  .vt-drop{padding:32px 16px}
  .vt-head{padding:14px 16px;font-size:15px}
  .vt-filters{padding:16px}
  .vt-preview{padding:16px}
  .vt-adv-grid{grid-template-columns:1fr}
  .vt-fbtn{font-size:13px;padding:10px 8px}
  .vt-actions{flex-direction:column;align-items:stretch}
  .vt-actions .vt-btn{width:100%}
  .vt-upsell{padding:22px 16px}
  .vt-upsell-btns{flex-direction:column;align-items:stretch}
  .vt-upsell-mac,.vt-upsell-win{width:100%;justify-content:center}
  .vt-checker,.vt-svg{min-height:160px}
  .vt-img,.vt-svg svg{max-height:200px}
}
@media(max-width:420px){
  .vt-filter-grid{grid-template-columns:1fr 1fr}
  .vt-toast{top:auto;bottom:12px;right:12px;left:12px}
}

/* ---- related / more-tools block (cluster internal links) ---------------- */
.rel-tools-wrap{max-width:980px;margin:36px auto 0;padding:0 16px}
.rel-tools-wrap h3{font-size:20px;font-weight:700;color:#2d2d3a;margin:0 0 16px;text-align:center}
.rel-tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.rel-tool-card{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid #e8e8f0;border-radius:12px;padding:16px 18px;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.rel-tool-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(102,126,234,.18);border-color:#667eea}
.rel-tool-card .rt-name{font-size:15px;font-weight:700;color:#2d2d3a}
.rel-tool-card .rt-desc{font-size:12.5px;color:#8a8a99}
