/* ui-upgrade.css - Vootkit total UI polish layer (v50). Loaded last; wins. */
:root{
  --vk-teal:#2563eb;--vk-teal-deep:#1e40af;--vk-ink:#0f1724;--vk-dim:#5a6472;
  --vk-line:#e6eaee;--vk-radius:16px;
  --vk-shadow-sm:0 1px 2px rgba(15,23,36,.05);
  --vk-shadow:0 6px 22px rgba(15,23,36,.07);
  --vk-shadow-lg:0 18px 50px rgba(15,23,36,.12);
}
html{scroll-behavior:smooth}
::selection{background:rgba(37,99,235,.2)}

/* nicer scrollbars */
*{scrollbar-width:thin;scrollbar-color:#cdd5dc transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:#cdd5dc;border-radius:10px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#aeb8c1;background-clip:content-box}

/* Masthead: cleaner glass */
.masthead{backdrop-filter:blur(18px) saturate(140%);box-shadow:0 1px 0 rgba(15,23,36,.05)}
.vk-nav button{transition:color .18s,background .18s}
.signup-button{box-shadow:0 6px 16px rgba(37,99,235,.28);transition:transform .16s,box-shadow .16s,background .16s}
.signup-button:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(37,99,235,.34)}

/* Hero title: refined weight + gradient accent word */
.capture-content h1.vk-hero-title,.vk-hero-title{letter-spacing:-2px}
.vk-hero-title em{background:linear-gradient(100deg,#2563eb,#3b82f6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#2563eb;font-style:normal}

/* Composer card: deeper, softer */
.intent-composer{border-radius:20px!important;box-shadow:var(--vk-shadow-lg)!important;transition:box-shadow .2s,border-color .2s}
.intent-composer:focus-within{box-shadow:0 0 0 3px rgba(37,99,235,.14),var(--vk-shadow-lg)!important}
.begin-button{box-shadow:0 8px 20px rgba(37,99,235,.32)!important;transition:transform .16s,box-shadow .16s}
.begin-button:hover{transform:translateY(-1px) scale(1.02)}

/* Mode chips: pill polish + motion */
.vk-modes button{transition:transform .15s,border-color .15s,box-shadow .15s,background .15s}
.vk-modes button:hover{transform:translateY(-1px)}
.vk-modes button.active{box-shadow:0 6px 16px rgba(37,99,235,.16)}

/* Workforce strip: elevate */
.vk-workforce-strip{border-radius:18px!important;box-shadow:var(--vk-shadow)!important;transition:transform .16s,box-shadow .16s,border-color .16s}
.vk-workforce-strip:hover{transform:translateY(-2px)!important;box-shadow:var(--vk-shadow-lg)!important}
.vk-workforce-orbs i{box-shadow:0 2px 6px rgba(15,23,36,.18)}

/* Result panels: unify into cards with soft elevation */
.vk-result-panel,.vk-kernel-panel,.vk-intent-object-panel{border-radius:var(--vk-radius)!important;box-shadow:var(--vk-shadow-sm);transition:box-shadow .2s}
.vk-result-panel:hover{box-shadow:var(--vk-shadow)}
.vk-result-panel header h2{letter-spacing:-.3px}

/* Domain Router: score bars get a subtle shine + animation */
.vk-rf-bar i{background:linear-gradient(90deg,#2563eb,#60a5fa)!important;animation:vkGrow .6s ease}
@keyframes vkGrow{from{width:0}}
.vk-router-tier{box-shadow:0 2px 8px rgba(37,99,235,.15)}

/* Team + agent cards: lift on hover */
.vk-team-agent,.vk-agent-card{transition:transform .16s,box-shadow .16s,border-color .16s}
.vk-team-agent:hover,.vk-agent-card:hover{transform:translateY(-3px);box-shadow:var(--vk-shadow)}
.vk-agent-card.core,.vk-team-agent.core{position:relative}
.vk-team-agent.core::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(37,99,235,.5),transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* Tool cards */
.vk-agent-tool{border-radius:12px!important;transition:transform .15s,box-shadow .15s,border-color .15s}
.vk-agent-tool:hover{transform:translateY(-2px);box-shadow:var(--vk-shadow);border-color:#cfe9e6}

/* Dashboard tool grid tiles: richer */
.tool-card{transition:transform .18s,box-shadow .18s,border-color .18s}
.tool-card:hover{transform:translateY(-3px)}
.tool-icon{box-shadow:inset 0 0 0 1px rgba(37,99,235,.06)}

/* Buttons everywhere: consistent focus ring */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid rgba(37,99,235,.5);outline-offset:2px}

/* Blog cards: image zoom on hover */
.vk-post{transition:transform .18s,box-shadow .18s,border-color .18s}
.vk-post:hover{box-shadow:var(--vk-shadow-lg)}
.vk-post-cover.art svg{transition:transform .4s ease}
.vk-post:hover .vk-post-cover.art svg{transform:scale(1.06)}

/* About stats: gradient number + card lift */
.vk-about-stats article{transition:transform .16s,box-shadow .16s;border-radius:18px}
.vk-about-stats article:hover{transform:translateY(-2px);box-shadow:var(--vk-shadow)}
.vk-about-stats b{background:linear-gradient(100deg,#2563eb,#3b82f6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* How-it-works step numbers glow */
.vk-how-grid .vk-step-n{box-shadow:0 6px 16px rgba(37,99,235,.28)}

/* Agents hub: polished panel */
.vk-agents-panel{border-radius:22px!important;box-shadow:var(--vk-shadow-lg)!important}
.vk-city-chip{transition:transform .14s,border-color .14s,background .14s,color .14s}
.vk-city-chip:hover{transform:translateY(-1px)}
.vk-agents-stats b{background:linear-gradient(100deg,#2563eb,#3b82f6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Footer: subtle top glow line */
.vk-footer{background:linear-gradient(180deg,#0b1420,#0a121d)}
.vk-footer-inner{position:relative}
.vk-social a{transition:transform .16s,background .16s,border-color .16s,color .16s}
.vk-social a:hover{transform:translateY(-2px)}

/* Gentle entrance for result panels */
.vk-live-results .vk-result-panel,.vk-live-results .vk-kernel-panel,.vk-live-results .vk-intent-object-panel{animation:vkFade .35s ease both}
@keyframes vkFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* v52 - Tools nav is now a link; match the nav button styling */
.vk-nav .vk-navlink{position:relative;border:0;background:none;color:#5a6472;font:600 13.5px var(--vk-body,'DM Sans',sans-serif);padding:8px 13px;border-radius:9px;cursor:pointer;display:flex;align-items:center;gap:7px;text-decoration:none;transition:color .18s,background .18s}
.vk-nav .vk-navlink svg{display:none;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vk-nav .vk-navlink:hover{color:#0f1724;background:#f2f5f7}
html[data-theme="dark"] .vk-nav .vk-navlink{color:#a6b6c9}
html[data-theme="dark"] .vk-nav .vk-navlink:hover{color:#eef3fa;background:rgba(255,255,255,.06)}
@media(max-width:760px){.vk-nav .vk-navlink{flex-direction:column;gap:3px;font-size:10px;padding:4px 8px;flex:1}.vk-nav .vk-navlink svg{display:block}}