/* tools.css - Vootkit Tools page (v52). Deep Ocean Blue theme + dark mode. */
:root{--vt-blue:#2563eb;--vt-blue-deep:#1e40af;--vt-blue-light:#60a5fa;--vt-ink:#0f1724;--vt-dim:#5a6472;--vt-line:#e6eaee;--vt-bg:#f7f9fc;--vt-card:#fff;--vt-disp:'Manrope',sans-serif;--vt-body:'DM Sans',sans-serif}
*{box-sizing:border-box}
.vt-body{margin:0;background:var(--vt-bg);color:var(--vt-ink);font-family:var(--vt-body);min-height:100vh}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* header */
.vt-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:22px;height:64px;padding:0 clamp(16px,4vw,40px);background:rgba(255,255,255,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--vt-line)}
.vt-brand{display:flex;align-items:center;gap:10px;font:800 20px var(--vt-disp);color:var(--vt-ink);letter-spacing:-.5px}
.vt-brand-mark{width:32px;height:32px}
.vt-brand-mark svg{width:32px;height:32px}
.brand-ring{fill:none;stroke:rgba(37,99,235,.45);stroke-width:1.25;stroke-dasharray:17 7;transform-origin:center;animation:vtOrbit 9s linear infinite}
.brand-v{fill:none;stroke:var(--vt-blue);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.brand-orb{fill:var(--vt-blue-light);transform-origin:22px 22px;animation:vtOrbit 5.5s linear infinite}
@keyframes vtOrbit{to{transform:rotate(360deg)}}
.vt-topnav{display:flex;gap:6px;margin-right:auto}
.vt-topnav a{padding:8px 13px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--vt-dim)}
.vt-topnav a:hover{color:var(--vt-ink);background:#eef2f6}
.vt-topnav a.active{color:var(--vt-blue)}
.vt-header-actions{display:flex;align-items:center;gap:10px}
.vt-cta{background:var(--vt-blue);color:#fff;padding:9px 15px;border-radius:999px;font-size:13px;font-weight:700;box-shadow:0 6px 16px rgba(37,99,235,.25)}
.vt-cta:hover{background:var(--vt-blue-deep)}

/* hero */
.vt-hero{max-width:900px;margin:0 auto;padding:56px clamp(16px,4vw,40px) 26px;text-align:center}
.vt-kicker{font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--vt-blue);display:block;margin-bottom:12px}
.vt-hero h1{font:800 clamp(30px,5vw,46px)/1.08 var(--vt-disp);letter-spacing:-1.5px;margin:0 0 14px}
.vt-hero h1 em{font-style:normal;background:linear-gradient(100deg,#2563eb,#60a5fa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.vt-hero p{max-width:640px;margin:0 auto;color:var(--vt-dim);font-size:16px;line-height:1.6}

/* categories */
.vt-main{max-width:1120px;margin:0 auto;padding:0 clamp(16px,4vw,40px) 60px}
.vt-cats{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:28px}
.vt-cat{border:1px solid var(--vt-line);background:#fff;color:#3d4654;font-size:13px;font-weight:600;padding:9px 15px;border-radius:999px;cursor:pointer;transition:transform .14s,border-color .14s,background .14s,color .14s}
.vt-cat b{color:#9aa3ad;font-weight:700;margin-left:4px}
.vt-cat:hover{transform:translateY(-1px);border-color:var(--vt-blue-light)}
.vt-cat.active{background:var(--vt-blue);border-color:var(--vt-blue);color:#fff}
.vt-cat.active b{color:rgba(255,255,255,.75)}

/* tool grid */
.vt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.vt-card{position:relative;text-align:left;border:1px solid var(--vt-line);background:var(--vt-card);border-radius:18px;padding:22px;cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:transform .16s,box-shadow .16s,border-color .16s}
.vt-card:hover{transform:translateY(-4px);border-color:var(--vt-blue-light);box-shadow:0 16px 36px rgba(37,99,235,.12)}
.vt-card-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(150deg,#2563eb,#60a5fa);color:#fff;margin-bottom:12px}
.vt-card-ic svg{width:22px;height:22px}
.vt-card strong{font:700 16px var(--vt-disp);color:var(--vt-ink)}
.vt-card small{color:var(--vt-dim);font-size:12.5px;line-height:1.5;flex:1}
.vt-card-cat{margin-top:10px;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--vt-blue)}

/* footer */
.vt-foot{max-width:1120px;margin:0 auto;padding:26px clamp(16px,4vw,40px) 46px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--vt-dim);border-top:1px solid var(--vt-line)}
.vt-foot a{color:var(--vt-blue);font-weight:700}

/* theme toggle (reused style from theme.css too) */
.theme-toggle{width:38px;height:38px;border:1px solid var(--vt-line);border-radius:11px;background:#fff;color:#3d4654;display:grid;place-items:center;cursor:pointer}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .ic-moon{display:none}

/* ---- modal / tool workspace ---- */
.vt-modal{position:fixed;inset:0;z-index:80;display:flex;justify-content:center;align-items:flex-start}
.vt-modal[hidden]{display:none!important}
.vt-modal-scrim{position:absolute;inset:0;background:rgba(11,20,32,.5);backdrop-filter:blur(4px)}
.vt-modal-card{position:relative;z-index:2;width:min(620px,95vw);max-height:92vh;overflow-y:auto;margin-top:4vh;background:#fff;border-radius:20px;box-shadow:0 30px 90px rgba(15,23,36,.3);padding:28px clamp(20px,4vw,34px) 32px}
.vt-modal-close{position:absolute;top:15px;right:15px;border:0;background:#f2f5f7;width:36px;height:36px;border-radius:10px;font-size:20px;color:#5a6472;cursor:pointer}
body.vt-modal-open{overflow:hidden}

/* ---- tool inner UI ---- */
.vt-tool-head h3{margin:0 0 4px;font:800 20px var(--vt-disp);color:var(--vt-ink)}
.vt-tool-head p{margin:0 0 18px;color:var(--vt-dim);font-size:13.5px}
.vt-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.vt-in{border:1px solid var(--vt-line);border-radius:11px;padding:11px 13px;font-size:14px;color:var(--vt-ink);background:#fff;outline:0;flex:1;min-width:90px}
.vt-in:focus{border-color:var(--vt-blue);box-shadow:0 0 0 3px rgba(37,99,235,.13)}
.vt-lbl{font-size:12px;font-weight:700;color:var(--vt-dim);flex:none}
.vt-range{flex:1;accent-color:var(--vt-blue)}
.vt-rangeval{font-weight:800;color:var(--vt-blue);font-size:13px;min-width:38px;text-align:right}
.vt-check{display:flex;align-items:center;gap:7px;font-size:13px;color:#3d4654;margin:2px 0 12px}
.vt-btn{border:1px solid var(--vt-line);background:#fff;color:var(--vt-ink);font-size:13.5px;font-weight:700;padding:11px 16px;border-radius:11px;cursor:pointer;transition:background .15s,border-color .15s,transform .12s}
.vt-btn:hover{background:#f2f5f7;transform:translateY(-1px)}
.vt-btn.primary{background:var(--vt-blue);border-color:var(--vt-blue);color:#fff;box-shadow:0 8px 20px rgba(37,99,235,.24)}
.vt-btn.primary:hover{background:var(--vt-blue-deep)}
.vt-btnrow{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.vt-drop{width:100%;border:2px dashed #c9d3dd;border-radius:14px;background:#fafcff;padding:26px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;margin-bottom:14px;transition:border-color .15s,background .15s}
.vt-drop:hover,.vt-drop.over{border-color:var(--vt-blue);background:#eef2ff}
.vt-drop-ic{width:40px;height:40px;color:var(--vt-blue)}
.vt-drop strong{font-size:14px;color:var(--vt-ink)}
.vt-drop small{font-size:11px;color:#8a93a0}
.vt-note{font-size:13px;color:var(--vt-dim);margin-top:6px;min-height:18px}
.vt-note.ok{color:#0b7a3f}
.vt-note.err{color:#c2453a}
.vt-fine{font-size:11.5px;color:#8a93a0;line-height:1.5;margin:10px 0 0}
.vt-result{margin-top:14px;background:#f5f7ff;border:1px solid #dbe4ff;border-radius:14px;padding:18px}
.vt-big{font:800 30px var(--vt-disp);color:var(--vt-blue-deep);display:flex;align-items:baseline;gap:8px;letter-spacing:-1px}
.vt-big span{font-size:13px;font-weight:600;color:var(--vt-dim);letter-spacing:0}
.vt-stats{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px}
.vt-stats span{display:flex;flex-direction:column;font-size:11px;color:var(--vt-dim)}
.vt-stats b{font-size:16px;color:var(--vt-ink);font-family:var(--vt-disp)}
.vt-muted{color:#8a93a0;font-size:13px}
.vt-arrow{color:var(--vt-blue);font-weight:800;font-size:18px}
.vt-ta{width:100%;border:1px solid var(--vt-line);border-radius:12px;padding:12px;font-size:14px;font-family:var(--vt-body);resize:vertical;outline:0;margin-bottom:10px}
.vt-ta:focus{border-color:var(--vt-blue);box-shadow:0 0 0 3px rgba(37,99,235,.13)}
.vt-filelist{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.vt-fileitem{display:flex;justify-content:space-between;align-items:center;background:#f5f7ff;border:1px solid #dbe4ff;border-radius:9px;padding:8px 12px;font-size:12.5px}
.vt-x{border:0;background:none;color:#c2453a;font-size:18px;cursor:pointer;line-height:1}
.vt-video{width:100%;border-radius:12px;background:#000;margin-bottom:12px;max-height:280px}
.vt-qr{display:flex;justify-content:center;padding:16px;background:#fff;border:1px solid var(--vt-line);border-radius:14px;margin:6px 0 12px}
.vt-qr img,.vt-qr canvas{border-radius:6px}
.vt-weather .vt-wnow{display:flex;align-items:center;gap:16px}
.vt-wtemp{font:800 40px var(--vt-disp);color:var(--vt-blue-deep)}
.vt-wmeta strong{display:block;font-size:15px}
.vt-wmeta span{font-size:12px;color:var(--vt-dim)}
.vt-wdays{display:flex;gap:8px;margin-top:16px}
.vt-wday{flex:1;text-align:center;background:#fff;border:1px solid #dbe4ff;border-radius:10px;padding:10px 4px}
.vt-wday span{display:block;font-size:11px;color:var(--vt-dim)}
.vt-wday b{display:block;font-size:15px;color:var(--vt-ink)}
.vt-wday small{font-size:11px;color:#8a93a0}
.vt-countstats span b{color:var(--vt-blue-deep)}

@media(max-width:600px){
  .vt-topnav{display:none}
  .vt-grid{grid-template-columns:1fr}
  .vt-hero{padding-top:36px}
}

/* ===== dark mode (page-specific; theme.css handles shared bits) ===== */
html[data-theme="dark"] .vt-body{background:#0b1220;color:#e6edf5}
html[data-theme="dark"] .vt-header{background:rgba(13,20,33,.85);border-bottom-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .vt-brand,html[data-theme="dark"] .vt-brand-word{color:#eef3fa}
html[data-theme="dark"] .vt-topnav a{color:#a6b6c9}
html[data-theme="dark"] .vt-topnav a:hover{background:rgba(255,255,255,.06);color:#fff}
html[data-theme="dark"] .vt-hero p{color:#a6b6c9}
html[data-theme="dark"] .vt-cat{background:#111c2b;border-color:rgba(255,255,255,.1);color:#c6d3e2}
html[data-theme="dark"] .vt-card{background:#111c2b;border-color:rgba(255,255,255,.09)}
html[data-theme="dark"] .vt-card strong{color:#eef3fa}
html[data-theme="dark"] .vt-card small{color:#a6b6c9}
html[data-theme="dark"] .vt-modal-card{background:#111c2b;color:#dbe6f2}
html[data-theme="dark"] .vt-modal-close{background:rgba(255,255,255,.06);color:#c6d3e2}
html[data-theme="dark"] .vt-tool-head h3{color:#eef3fa}
html[data-theme="dark"] .vt-tool-head p,html[data-theme="dark"] .vt-note,html[data-theme="dark"] .vt-lbl{color:#a6b6c9}
html[data-theme="dark"] .vt-in,html[data-theme="dark"] .vt-ta{background:#0b1220;border-color:rgba(255,255,255,.12);color:#eef3fa}
html[data-theme="dark"] .vt-btn{background:#0b1220;border-color:rgba(255,255,255,.12);color:#dbe6f2}
html[data-theme="dark"] .vt-drop{background:#0e1826;border-color:rgba(255,255,255,.18)}
html[data-theme="dark"] .vt-drop strong{color:#eef3fa}
html[data-theme="dark"] .vt-result{background:#0e1826;border-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .vt-stats b,html[data-theme="dark"] .vt-wday b{color:#eef3fa}
html[data-theme="dark"] .vt-fileitem,html[data-theme="dark"] .vt-wday{background:#0b1220;border-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .vt-foot{border-top-color:rgba(255,255,255,.08);color:#a6b6c9}
html[data-theme="dark"] .theme-toggle .ic-sun{display:none}
html[data-theme="dark"] .theme-toggle .ic-moon{display:block}

/* ===== wave-2 tool components (v53) ===== */
.vt-kv{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid #e6eef7;font-size:13.5px}
.vt-kv:last-child{border-bottom:0}
.vt-kv span{color:var(--vt-dim)}
.vt-kv b{font-family:var(--vt-disp);color:var(--vt-ink);word-break:break-all;text-align:right}
.vt-code{background:#0e1a29;color:#cfe4ff;border-radius:11px;padding:13px 15px;font:13px/1.5 ui-monospace,Menlo,monospace;word-break:break-all;margin:6px 0 10px}
.vt-swatch{width:44px;height:44px;border-radius:11px;border:1px solid var(--vt-line);flex:none}
.vt-gradprev{height:90px;border-radius:12px;margin:4px 0 10px;border:1px solid var(--vt-line)}
.vt-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;margin:6px 0 12px}
.vt-pal-sw{height:74px;border-radius:11px;border:1px solid rgba(0,0,0,.08);cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding:6px;position:relative}
.vt-pal-sw span{font-size:10px;font-weight:700;background:rgba(255,255,255,.85);color:#0f1724;padding:2px 6px;border-radius:5px}
.vt-shadowbox{width:120px;height:80px;background:#fff;border-radius:14px;margin:14px auto 18px;border:1px solid #eef2f6}
.vt-contrastprev{padding:22px;border-radius:12px;text-align:center;font:800 22px var(--vt-disp);margin:6px 0 12px;border:1px solid var(--vt-line)}
.vt-pass{color:#0b7a3f;font-weight:800}.vt-fail{color:#c2453a;font-weight:800}
.vt-diff{border:1px solid var(--vt-line);border-radius:12px;overflow:hidden;font:12.5px/1.6 ui-monospace,Menlo,monospace;max-height:280px;overflow-y:auto}
.vt-diff>div{padding:2px 12px;white-space:pre-wrap;word-break:break-word}
.vt-d-eq{color:var(--vt-dim)}
.vt-d-add{background:#e7f7ee;color:#0b7a3f}
.vt-d-del{background:#fdeceb;color:#c2453a}
.vt-timer{font:800 46px var(--vt-disp);color:var(--vt-blue-deep);text-align:center;letter-spacing:-1px;margin:12px 0}
.vt-laps{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.vt-lap{background:#f5f7ff;border:1px solid #dbe4ff;border-radius:9px;padding:8px 12px;font-size:12.5px}
.vt-dice{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:12px}
.vt-dice span{width:44px;height:44px;border-radius:10px;background:linear-gradient(150deg,#2563eb,#60a5fa);color:#fff;display:grid;place-items:center;font:800 20px var(--vt-disp)}
.vt-coin{width:100px;height:100px;border-radius:50%;background:linear-gradient(150deg,#2563eb,#60a5fa);color:#fff;display:grid;place-items:center;font:800 16px var(--vt-disp);margin:8px auto 14px;transition:transform .35s}
.vt-coin.spin{transform:rotateY(720deg)}
.vt-strength{height:10px;border-radius:999px;background:#eef2f6;overflow:hidden;margin:8px 0}
.vt-strength i{display:block;height:100%;width:0;border-radius:999px;transition:width .2s,background .2s}
.vt-tzlist,.vt-tzitem{display:flex}
.vt-tzlist{flex-direction:column;gap:6px}
.vt-tzitem{justify-content:space-between;background:#f5f7ff;border:1px solid #dbe4ff;border-radius:9px;padding:9px 13px;font-size:13px}
.vt-tzitem b{font-family:var(--vt-disp);color:var(--vt-blue-deep)}

/* dark variants for wave-2 */
html[data-theme="dark"] .vt-kv{border-bottom-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .vt-kv b{color:#eef3fa}
html[data-theme="dark"] .vt-diff,html[data-theme="dark"] .vt-shadowbox,html[data-theme="dark"] .vt-swatch,html[data-theme="dark"] .vt-gradprev,html[data-theme="dark"] .vt-contrastprev{border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .vt-d-eq{color:#8296ac}
html[data-theme="dark"] .vt-d-add{background:rgba(11,122,63,.2);color:#7ee0a6}
html[data-theme="dark"] .vt-d-del{background:rgba(194,69,58,.2);color:#f2a29c}
html[data-theme="dark"] .vt-lap,html[data-theme="dark"] .vt-tzitem{background:#0b1220;border-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .vt-tzitem b{color:#93b4fb}
html[data-theme="dark"] .vt-shadowbox{background:#0e1826}
html[data-theme="dark"] .vt-strength{background:rgba(255,255,255,.1)}

/* ===== wave-3 heavy-hitter components (v54) ===== */
.vt-thumbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-top:10px}
.vt-thumb{display:flex;flex-direction:column;gap:6px}
.vt-thumb canvas{width:100%;border:1px solid var(--vt-line);border-radius:8px}
.vt-barcode,.vt-chart,.vt-memecanvas,.vt-sigpad{width:100%;max-width:100%;border:1px solid var(--vt-line);border-radius:12px;background:#fff;margin:8px 0 12px}
.vt-sigpad{cursor:crosshair;touch-action:none}
.vt-memecanvas{max-height:340px;object-fit:contain}
.vt-mdprev{border:1px solid var(--vt-line);border-radius:12px;padding:14px 16px;background:#fff;overflow:auto;font-size:14px;line-height:1.6}
.vt-mdprev h1,.vt-mdprev h2,.vt-mdprev h3{font-family:var(--vt-disp);margin:.5em 0 .3em}
.vt-mdprev code{background:#eef2f6;padding:2px 5px;border-radius:5px;font-size:.9em}
.vt-mdprev pre{background:#0e1a29;color:#cfe4ff;padding:12px;border-radius:10px;overflow:auto}
.vt-mdprev a{color:var(--vt-blue)}
.vt-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch;margin-bottom:10px}
.vt-split .vt-ta,.vt-split .vt-mdprev{min-height:220px;margin:0}
.vt-tablewrap{overflow:auto;max-height:340px;border:1px solid var(--vt-line);border-radius:12px;margin:8px 0}
.vt-table{width:100%;border-collapse:collapse;font-size:12.5px}
.vt-table th{position:sticky;top:0;background:#eef2ff;color:var(--vt-blue-deep);text-align:left;padding:9px 11px;cursor:pointer;white-space:nowrap;font-family:var(--vt-disp)}
.vt-table td{padding:8px 11px;border-top:1px solid #eef2f6;white-space:nowrap}
.vt-table tbody tr:hover,.vt-table tr:hover td{background:#f7fafd}
.vt-ascii{font:6px/6px ui-monospace,monospace;overflow:auto;max-height:300px;background:#0e1a29;color:#cfe4ff;padding:10px;border-radius:10px;white-space:pre;margin:6px 0 12px}
.vt-audio{width:100%;margin:8px 0}
.vt-countdown{text-align:center;margin:10px 0}
.vt-cd-grid{display:flex;justify-content:center;gap:14px}
.vt-cd-grid div{background:#f5f7ff;border:1px solid #dbe4ff;border-radius:12px;padding:14px 10px;min-width:66px}
.vt-cd-grid b{display:block;font:800 30px var(--vt-disp);color:var(--vt-blue-deep);letter-spacing:-1px}
.vt-cd-grid span{font-size:11px;color:var(--vt-dim);text-transform:uppercase;letter-spacing:.5px}
.vt-cd-title{margin-top:12px;color:var(--vt-dim);font-size:14px}

/* dark variants */
html[data-theme="dark"] .vt-barcode,html[data-theme="dark"] .vt-chart,html[data-theme="dark"] .vt-memecanvas,html[data-theme="dark"] .vt-sigpad,html[data-theme="dark"] .vt-mdprev,html[data-theme="dark"] .vt-thumb canvas{background:#0e1826;border-color:rgba(255,255,255,.12);color:#dbe6f2}
html[data-theme="dark"] .vt-mdprev code{background:#0b1220}
html[data-theme="dark"] .vt-tablewrap{border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .vt-table th{background:#0e1826;color:#93b4fb}
html[data-theme="dark"] .vt-table td{border-top-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .vt-cd-grid div{background:#0b1220;border-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .vt-cd-grid b{color:#93b4fb}

/* v56 - vivid per-category tool logos + electric vibrancy */
.vt-card-ic{background:linear-gradient(150deg,#2563eb,#4f46e5)}
.vt-card-ic.cat-images{background:linear-gradient(150deg,#ec4899,#f97316)}
.vt-card-ic.cat-pdf{background:linear-gradient(150deg,#ef4444,#b91c1c)}
.vt-card-ic.cat-video{background:linear-gradient(150deg,#8b5cf6,#6d28d9)}
.vt-card-ic.cat-finance{background:linear-gradient(150deg,#10b981,#047857)}
.vt-card-ic.cat-science{background:linear-gradient(150deg,#06b6d4,#0891b2)}
.vt-card-ic.cat-weather-travel{background:linear-gradient(150deg,#0ea5e9,#2563eb)}
.vt-card-ic.cat-utilities{background:linear-gradient(150deg,#2563eb,#4f46e5)}
.vt-card-ic.cat-downloads{background:linear-gradient(150deg,#14b8a6,#0d9488)}
.vt-card-ic.cat-design{background:linear-gradient(150deg,#f43f5e,#c026d3)}
.vt-card-ic.cat-developer{background:linear-gradient(150deg,#6366f1,#4338ca)}
.vt-card-ic.cat-text{background:linear-gradient(150deg,#f59e0b,#d97706)}
.vt-card-ic.cat-health{background:linear-gradient(150deg,#22c55e,#15803d)}
.vt-card-ic.cat-time{background:linear-gradient(150deg,#3b82f6,#1d4ed8)}
.vt-card-ic.cat-fun{background:linear-gradient(150deg,#f97316,#ea580c)}
.vt-card-ic.cat-data{background:linear-gradient(150deg,#0891b2,#0e7490)}
.vt-card-ic.cat-media{background:linear-gradient(150deg,#a855f7,#7e22ce)}
.vt-card-ic{width:48px;height:48px;border-radius:14px;box-shadow:0 6px 16px rgba(37,99,235,.2)}
.vt-card-ic svg{width:24px;height:24px}
.vt-card:hover{box-shadow:0 18px 40px rgba(37,99,235,.16)}
.vt-hero h1 em{background:linear-gradient(105deg,#2563eb,#4f46e5 50%,#06b6d4)}
.vt-cta,.vt-btn.primary{background:linear-gradient(135deg,#2563eb,#4f46e5)}
.vt-cat.active{background:linear-gradient(135deg,#2563eb,#4f46e5);border-color:transparent}

/* v57 - on-device AI tools */
.vt-card-ic.cat-ai-on-device{background:linear-gradient(150deg,#7c3aed,#2563eb)}
.vt-ai-bar{height:8px;border-radius:999px;background:#eef2ff;overflow:hidden;margin:10px 0}
.vt-ai-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#7c3aed,#2563eb);transition:width .3s}
.vt-ai-img{max-width:100%;max-height:240px;border-radius:12px;border:1px solid var(--vt-line);margin:6px 0;display:block}
.vt-ai-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vt-ai-checker{background-image:linear-gradient(45deg,#e6eaee 25%,transparent 25%),linear-gradient(-45deg,#e6eaee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e6eaee 75%),linear-gradient(-45deg,transparent 75%,#e6eaee 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
html[data-theme="dark"] .vt-ai-bar{background:rgba(255,255,255,.1)}
@media(max-width:600px){.vt-ai-compare{grid-template-columns:1fr}}